Topic: Problem wrapping text into a button

sasrcm55 pro asked 6 years ago


I have a problem with a text in my button, when the text is to long, it overflow it...

sasrcm55 pro answered 6 years ago


Fixed the problem by adding a style .btn{white-space:normal;}

Michal Szymanski staff answered 6 years ago


Send it via email and we will continue this conversation this way. m.szymanski@mdbootstrap.com Write me also if your code works as expected with pure MDB, without any additional or custom CSS code.

sasrcm55 pro answered 6 years ago


How to send you the screenshot?

sasrcm55 pro answered 6 years ago


Sure
<!-- Modal content-->
		  <div class="modal-content">
			<div class="modal-header">
			  <button type="button" class="close" data-dismiss="modal">&times;</button>
			  <h4 class="modal-title">Validation</h4>
			</div>
			<div class="modal-body">
				<div class="card hoverable">
					<div class="card-content">
						<h6>Identifiant de connexion</h6>
						<div>Email: <span id="prev_connect"></span></div>
						<hr/>
						<h6>Contact du magasin</h6>
						<div id="prev_name">NOM PRENOM</div>
						<div id="prev_tel">TEL</div>
						<div id="prev_email">email</div>
					</div>
				</div>
				<div class="card hoverable pers">
					<div class="card-content text-center">
						<div class="marvel-device iphone6 black">
							<div class="top-bar"></div>
							<div class="sleep"></div>
							<div class="volume"></div>
							<div class="camera"></div>
							<div class="sensor"></div>
							<div class="speaker"></div>
							<div class="screen">
								<div class="fluid-container">
								<a class="btn btn-lg btn-primary btn-block" id="prev_name_shop">NOM SHOP</a>
								<img alt="Photo du magasin" class="preview_photo responsive-img" src="#"/>
								<div class="col-sm-12">
									<a class="btn btn-info pull-right"><i class="material-icons left">chat</i> Chat</a>
									<a class="btn btn-warning pull-left"><i class="material-icons left">euro_symbol</i>Acheter</a>
								</div>
									<div class="col-sm-12 black-text">
										<div class="btn btn-border-success btn-block btn-rounded">
											<i class="material-icons left">phone</i>
										<div id="prev_tel_shop">NA</div>
										</div>
									</div>
									<div class="col-sm-12">
										<a class="btn btn-border-success btn-block btn-rounded">
											<i class="material-icons left">email</i>
											<p id="prev_tel_shop">tototo@tototototooooooooooooooooooooooooo.com</p>
										</a>
									</div>
								<div class="col-sm-12 black-text">
									<div class="btn btn-border-primary btn-block btn-rounded">
										<i class="material-icons left">navigation</i>
										<p id="prev_tel_shop">NA</p>
									</div>
								</div>
								</div>
							</div>
							<div class="home"></div>
							<div class="bottom-bar"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
			  <button type="button" class="btn btn-success">Close</button>
			</div>
		  </div>

		</div>
	  </div>
That's my code, as you see it's in a modal and i used too a css library called device.css you can see the code here: https://marvelapp.github.io/devices.css/ I tried also in a simple btn class and it do the same (without modal and device.css) Thanks

Michal Szymanski staff answered 6 years ago


Can you provide some code and maybe the screenshot?

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags