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...
Add comment
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
Sure
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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
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