Topic: Problem wrapping text into a button

sasrcm55 pro asked 10 years ago


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

sasrcm55 pro answered 10 years ago


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

Michal Szymanski staff answered 10 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 10 years ago


How to send you the screenshot?

sasrcm55 pro answered 10 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 10 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

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