Problem
I'm having a problem with flex boxes. It is wrapping the content like it should, however any items that overflow the parent container are truncated. See the image below:
Here's the HTML of the entire page:
<html lang="enUS">
<head>
<!-- Page Title (Shows up in title bar of browser) -->
<title>Test Page: User Drill Down</title>
<!-- Favirotie Icons (Shows up next to the URL in the browser address bar)
Generated from https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="http://localhost:22080/core/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:22080/core/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:22080/core/images/favicons/favicon-16x16.png">
<link rel="manifest" href="http://localhost:22080/core/images/favicons/site.webmanifest">
<link rel="mask-icon" href="http://localhost:22080/core/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="http://localhost:22080/core/images/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="http://localhost:22080/core/images/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- JavaScript Core Files -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/ajax.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/heartbeat.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/treewalker.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/verify.js"></script>
<!-- Install Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/APIs/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
<!-- Install FontAwsome CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/APIs/fontawsome/fontawesome-free-5.15.1-web/css/all.min.css">
<!-- Install Custom Common CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/core/css/common.css">
<!-- Install Custom Header CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/core/css/header.css">
<!-- Install Slider CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/core/css/toggle.css">
<!-- Install Bootstrap Datepicker -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/APIs/datepicker/css/bootstrap-datepicker3.min.css">
<style type="text/css">.table-hover > tbody > tr:hover
{
color: #FFFFFF;
background-color: #000000;
}
.table-striped > tbody > tr:nth-of-type(odd)
{
background-color: #000033;
}
.table > thead > tr > th,.table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td
{
border-top-color: #660000;
}
.table > thead > tr > th
{
border-bottom-color: #660000;
}
table-bordered
{
border-color: #660000;
}
.table-bordered > thead > tr > th,.table-bordered > tbody > tr > th,.table-bordered > tfoot > tr > th,.table-bordered > thead > tr > td,.table-bordered > tbody > tr > td,.table-bordered > tfoot > tr > td
{
border-color: #660000;
}
.table-bordered th,.table-bordered tdborder-color
{
#660000: undefined;
}
.slider
{
background-color: #000033;
}
.slider:before
{
background-color: #808080;
}
input:checked:disabled + .slider
{
background-color: #FFFFFF;
}
input:disabled + .slider
{
background-color: #FFFFFF;
}
input:checked + .slider
{
background-color: #9999FF;
}
input:focus + .slider
{
box-shadow-color: #9999FF;
}
.cb-std:before
{
color: #99FF99;
}
.cb-std:checked:before
{
color: #99FF99;
}
.rb-std:before
{
color: #99FF99;
}
.rb-std:checked:before
{
color: #99FF99;
}
legend
{
border-bottom-color: #FF9999;
}
tooltip
{
color: #FFFFFF;
background-color: #000000;
}
tooltip-inner
{
color: #FFFFFF;
background-color: #000000;
}
</style>
</head>
<body href-link="drilldown.php" session-timeout="600" popup-time="30" style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">
<!-- Timeout Modal Dialog -->
<div class="container">
<!-- Modal -->
<div class="modal fade" id="logoutDialogBox" role="dialog" style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" id="logoutHead">
<h4 class="modal-title">Login Session Expired</h4>
</div>
<div class="modal-body" id="logoutBody">
<p>You have been inactive for some time. Your session will expire
in <span id="logoutTime"></span> seconds. Click on
the Stay Logged In button to stay logged in, or to logout now, click
the Logout button.</p>
</div>
<div class="modal-footer" id="logoutFoot">
<button type="button" class="btn btn-default" id="buttonStayLoggedIn">Stay Logged In</button>
<button type="button" class="btn btn-default" id="buttonLogout">Logout</button>
</div>
</div>
</div>
</div>
</div>
<!-- Beginning of header Nav Bar -->
<div id="navigationBarHeader">
<!-- Navbar header with logo, time, and logout button -->
<nav id="navigationBar" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Sea-Core Logo Image -->
<img class="navbar-brand" alt="Brand" src="http://localhost:22080/core/images/branding/base_small.png">
<!-- Div for the time -->
<div class="navbar-text" id="timeday">9:29:11 PM</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Nav Bar, Left Side -->
<ul class="nav navbar-nav">
<button type="button" id="returnHome" class="btn btn-default navbar-btn">Home</button>
</ul>
<!-- Nav Bar, Right Side -->
<ul class="nav navbar-nav navbar-right">
<li>
<!-- All pages have the logout button -->
<button type="button" id="logout" class="btn btn-default navbar-btn">Logout</button>
</li>
</ul>
<span class="icon-bar"> </span>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- End of header Nav Bar -->
<!-- Beginning of function bar -->
<nav id="functionBar1" class="nav nav-inline" hidden="">
<button type="button" id="something" class="btn btn-default navbar-btn">Item 1</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 2</button>
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="something" class="btn btn-default navbar-btn">Item 3.1</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 3.2</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.1</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.2</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.3</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.4</button>
</div>
</nav>
<!-- End of function bar -->
</div>
<!-- Start of main content area -->
<div id="mainFrame">
<div style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0);" id="errorTarget"></div>
<div style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0);" id="responseTarget"></div>
<div class="row row-list">
<div id="link-nav" class="col-xs-2 link-nav-div"></div>
<div id="main" class="col-xs-8 link-main-div">
<div>
<div class="row" style="place-content: center; text-align: center;">
<span style="font-size: 24px; font-weight: bold;">Drill Down Test Module</span>
<span> </span>
</div>
<div class="row" style="place-content: center; text-align: center;">
<span style="font-size: 24px; font-style: italic;">Users</span>
</div>
</div>
<div class="image-border" style="left: 67px !important; width: 1211px !important; height: 6px !important; padding-bottom: 18px !important; padding-top: 12px !important;">
<canvas width="1211" height="6"></canvas>
</div>
<form class="form-horizontal">
<div class="row">
<div class="container" id="ddlink" style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">
<div class="flex-box-row" id="xddlink2">
<span class="text-control"> 0 </span>
<span class="text-control"> 1 </span>
<span class="text-control"> 2 </span>
<span class="text-control"> 3 </span>
<span class="text-control"> 4 </span>
<span class="text-control"> 5 </span>
<span class="text-control"> 6 </span>
<span class="text-control"> 7 </span>
<span class="text-control"> 8 </span>
<span class="text-control"> 9 </span>
<span class="text-control"> A </span>
<span class="text-control"> B </span>
<span class="text-control"> C </span>
<span class="text-control"> D </span>
<span class="text-control"> E </span>
<span class="text-control"> F </span>
<span class="text-control"> G </span>
<span class="text-control"> H </span>
<span class="text-control"> I </span>
<span class="text-control"> J </span>
<span class="text-control"> K </span>
<span class="text-control"> L </span>
<span class="text-control"> M </span>
<span class="text-control"> N </span>
<span class="text-control"> O </span>
<span class="text-control"> P </span>
<span class="text-control"> Q </span>
<span class="text-control"> R </span>
<span class="text-control"> S </span>
<span class="text-control"> T </span>
<span class="text-control"> U </span>
<span class="text-control"> V </span>
<span class="text-control"> W </span>
<span class="text-control"> X </span>
<span class="text-control"> Y </span>
<span class="text-control"> Z </span>
</div>
</div>
</div>
</form>
<div class="image-border" style="left: 168px !important; width: 1009px !important; height: 6px !important; padding-bottom: 18px !important; padding-top: 12px !important;">
<canvas width="1009" height="6"></canvas>
</div>
<div class="row">
<div class="container" id="dddata">
</div>
</div>
<div class="image-border" style="left: 67px !important; width: 1211px !important; height: 6px !important; padding-bottom: 18px !important; padding-top: 12px !important;">
<canvas width="1211" height="6"></canvas>
</div>
<div class="bottom-links">
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/privacy.php');">Privacy Policy</a>
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/cookie.php');">Cookie Policy</a>
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/about.php');">About Us</a>
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/contact.php');">Contact Us</a>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
<div class="vspace10"></div>
</div>
<div id="link-stat" class="col-xs-2 link-status-div"></div>
</div>
</div>
<!-- End of main content area -->
<div>
<form id="token_form">
<input type="hidden" name="token_data" id="token_data" value="144542ef22e58a893ce414ddbd3cdad9342037fe12194ad94003f6ac85471b53">
</form>
</div> <!-- Install Timer -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/timer.js"></script>
<!-- Install regular jQuery -->
<script type="text/javascript" src="http://localhost:22080/APIs/jquery/BaseJQuery/jquery-3.3.1.min.js"></script>
<!-- Install Bootstrap -->
<script type="text/javascript" src="http://localhost:22080/APIs/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- Install FontAwsome -->
<script type="text/javascript" src="http://localhost:22080/APIs/fontawsome/fontawesome-free-5.15.1-web/js/fontawesome.min.js"></script>
<!-- Install Logout Modal Handlers -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/modal.js"></script>
<!-- Common Javascript -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/common.js"></script>
<!-- Install Custom Checkbox -->
<script src="http://localhost:22080/APIs/checkbox/dist/js/bootstrap-checkbox.js"></script>
<!-- Install Datepicker -->
<script src="http://localhost:22080/APIs/datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Install Header Custom JavaScript -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/header.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/common.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/html.js"></script>
<script type="text/javascript" src="http://localhost:22080/test/drilldown.js"></script>
<!-- Checkbox Boot Script -->
<script type="text/javascript">
function featureCheckbox() {
$(':checkbox').checkboxpicker({
html: true,
offLabel: '<span class="glyphicon glyphicon-remove">',
onLabel: '<span class="glyphicon glyphicon-ok">'
});
}
</script>
<!-- Tooltip Boot Script -->
<script type="text/javascript">
function featureTooltip() {
$('[data-toggle="tooltip"]').tooltip();
}
</script>
<!-- Datepicker Boot Script -->
<script type="text/javascript">
function featureDatepicker() {
$('.datepicker').datepicker();
}
</script>
</body>
</html>
And here is the relevant CSS:
/* Flex boxes */
.flex-box-row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
overflow-wrap: break-word;
overflow: hidden;
}
.flex-box-row>*{
flex: 0 0 auto;
}
span.text-control {
font-size: 14pt;
font-weight: bold;
cursor: pointer;
}
Here are some other screenshots that shows the results of other solutions that I have tried:
In this one, the zero is truncated from the beginning.
Here part of the beginning and ending text is cut off.
NOTE: overflow-wrap and overflow CSS attributes have no effect. I've tried it both ways.
NOTE: Since there are a series of SPAN elements as the flex child, I tried adding min-width: 0; as suggested by some of the linked questions but it does not work.
NOTE: This is related to another question here about partitioning large database tables into smaller pieces. That is located here:
Splitting up large data sets into smaller pieces for web viewing Needless to say, I have solved that problem.
Basically, anything that is outside the parent container in those two boxes is not displayed (you can't even click on them), but then content displays normally on the next line. As shown in the image with the flexbox highlighted, it extends past the container. I need to constrain that.
Also Bootstrap 3 is being loaded, but is not being used for the flexbox.
Research
I have done a lot of research into this over the past two days and here's what I have found:
Prevent flex items from overflowing a container
Flexbox item multiline text overflow
Truncated text in nested flexbox items
Centering Items with Flexbox and Overflow
Flexbox items with block content overflow the flexbox container
https://codepen.io/ScottWhittaker/pen/apKqpK
https://css-tricks.com/flexbox-truncated-text/
And many more....
Things that I have tried
I have tried multiple solutions with varying results. However, the main issue of truncating the items is still there no matter what solution that I have tried.
EDIT: 06/05/2021 2230 PDT
As people have pointed out about mixing inline and stylesheets, I'm working on that right now. However, the big issue here is that SOME mixing between stylesheets and inline styles cannot be avoided. The primary reason are theme colors (kinda hard to have many themes with stylesheets) and computed sizes such as the image-border stuff. Also some of the font things with the title headers must also be specified inline because JSON from the server can specify it. Everything inside the DIV with id="main" is generated on the client with JavaScript that interprets JSON from the server. Everything else is a template page that's generated by PHP on the server. Furthermore, when I try to do a minimal code set to reproduce the problem, I can't. That tells me that it's a stylesheet causing the problem, but I'm not sure which one. Bootstrap 3 is being loaded and used throughout the page. I wonder if it's a Bootstrap problem or a problem with one of my stylesheets. I will continue to try to build a minimal example to reproduce the problem though. As for all the external links pointing to localhost, I'm working on that as well.
I would recommend first of all not to mix up inline styles and stylesheets so much - its very hard to tell whats the issue when there is so many inline styles in a large html document. (Also keep in mind any inline styles will take presedence over your classes in the external stylesheet)
Maybe you could supply a minimal reproduction of the error with only the bit of HTML and CSS that is relevant to the problem in a codepen or a jsfiddle? It would make it much easier to help you
After doing a considerable amount of research, testing, and debugging, I found the problem. It seems that bootstrap-3's container class was the culprit. Removing that class for the HTML hierarchy corrected the problem in all cases. With that in mind, I took a look at the class. It had different properties depending on the width of the window. Looking at the docs, it's part of the responsive page functionality which allows a page to be optimally viewed on different size devices.
It was also causing a problem with tables too. Rows would have missing columns. That has been corrected as well.
Thank you to everyone who responded.
I need to reduce the width of the <p></p> element so that the filters applied: text and Division (which is the name of the filter that has been applied) are next to each other. I mean, it should look like filters applied: and Division.
This is the HTML code that I have at the moment:
JSFiddle
If we stretch-out the output screen on Fiddle, we see the gap between filters applied: and Division.
I tried using width: 50%, and lower value as well for the <div></div>, but it did not work. I think I am missing something here.
EDIT: JSFiddle Output
Can you please check the below code? Hope it will work for you. For your required output, we have removed bootstrap grid classes (row,col-*). We have used flex utility class of bootstrap for your required structure, this solution works well also in responsive.
Please refer to this link: https://jsfiddle.net/yudizsolutions/pyrekLz3/3/
.filter-box {
width: 130px;
padding: 0 10px;
}
.btn-box {
padding-left: 15px;
width: 114px;
}
.division-box {
width: calc(100% - 254px);
}
#media(max-width:767px) {
.btn-box {
padding-left: 0px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<div class="d-flex group flex-sm-row flex-column ">
<div class="filter-box">
<p>filters applied:</p>
</div>
<div class="division-box">
<span id="spanDivision" style="display: inline-block;" class="filter-label filter-label-pill">Divisions</span>
<span id="spanFunction" style="display: none;" class="filter-label filter-label-pill">Function</span>
<span id="spanLastLogin" style="display: none;" class="filter-label filter-label-pill">Last Login</span>
<span id="spanUpdatesOpened" style="display: none;" class="filter-label filter-label-pill">Updates Opened</span>
<span id="spanLicenseType" style="display: none;" class="filter-label filter-label-pill">License Type</span>
<span id="spanInterests" style="display: none;" class="filter-label filter-label-pill">Interests</span>
</div>
<div class="btn-box">
<a id="addBtn" class="btn btn-success" title="Add User" href="javascript:;" onclick="Biomed.Admin.users.addUser('','add');"><i class="far fa-user-plus"></i> Add User</a>
</div>
</div>
If you want it to work without bootstrap this is the solution.
The 'filters applied: ' part is a static part that will always remain the same width.
The 'Division' part, will be filled with more than 1 filter I assume.
.filter - container {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 100px calc(90% - 100px) calc(10% - 100px);
}
<div class="filter-container"></div>
Solution link without bootstrap
I want to break the line after Other online payment. but when I added <br> tag this starts making problems in the card content alignment. I'm using bootstrap. any idea why? thank you :)
.user-ads {
font-size: 14px;
text-align: left;
margin-left: -55px;
}
.user-ads li {
position: relative;
padding-bottom: 17px;
padding-left: 25px;
}
.user-ads li span {
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card" style="width: 32rem;">
<div class="card-body">
<ul class="user-ads">
<li><strong>Seller </strong><span>tempestblaze</span></li>
<li><strong>Payment method </strong><span>Other online payment: Koho App</span></li>
<li><strong>Price/BTC </strong><span>1,233,775.89 PKR</span></li>
<li><strong>Limits </strong><span>10,000 - 62,538 PKR</span></li>
<li><span><a class="btn btn-primary" href="">Buy</a></span></li>
</ul>
</div>
</div>
Try this. I added a second break to prevent errors with overflow messing up your margins. I tested this on my on server and it looks good. Kudos!
<div class="card" style="width: 32rem;">
<div class="card-body">
<ul class="user-ads">
<li><strong>Seller </strong><span>tempestblaze</span></li>
<li><strong>Payment method </strong><span>Other online payment:<br> Koho App</span></li>
<br>
<li><strong>Price/BTC </strong><span>1,233,775.89 PKR</span></li>
<li><strong>Limits </strong><span>10,000 - 62,538 PKR</span></li>
<li><span><a class="btn btn-primary" href="">Buy</a></span></li>
</ul>
</div>
</div>
I want to make bootstrap glyphicon round shape i added border radius to class glyhphicon-menu but i dont see anything happening , Any idea how to make it happen using bootstrap or css ?
main.html
<span type="button" class="glyphicon glyphicon-th-list glyhphicon-menu" ng-click="isCollapsed = !isCollapsed" id="treelist"></span>
main.css
.glyphicon.glyhphicon-menu {
font-size: 30px;
border-radius: 50%;
}
You just have to add overflow:hidden so that it clips the text that goes outside the border.
.glyphicon.glyhphicon-menu {
font-size: 30px;
border-radius: 50%;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span type="button" class="glyphicon glyphicon-th-list glyhphicon-menu" ng-click="isCollapsed = !isCollapsed" id="treelist"></span>
I have 3 Bootstrap buttons side-by-side, but one of them has a line break (I'm modifying them with white-space: normal). I need them all to have the same height, and vertical-centered text.
I have them like this:
And I need them like this:
I can't figure out how to do this. Any ideas?
would something like this work for you?
.option-button {
height:100%;
}
.media-object {
height: 100px;
}
<br/><br/>
<div class="media-object pull-left">
<button class="btn btn-info option-button">A</button>
<button class="btn btn-primary option-button">A<br/>B<br/>C</button>
<button class="btn btn-info option-button">A</button>
</div>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
you can use height: 100%; on the buttons but with that, you need to set the height of the containing div. hope this helps!