I have a small div that contains a bootstrap horizontal btn-group. The buttons are wrapping because the div is not wide enough to fit it.
How can I stop this and keep the buttons all horizontal and horizontally centred?
Problem:
How it should look:
<div class="vd-text-widget" style="position: absolute; background-color: #eee; width: 10%; height: 15%; left: 10%; top: 50%">
<div class="btn-group btn-group-lg btn-group-horizontal">
<button class="btn btn-default">
<span class="glyphicon glyphicon-th-list"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-header"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-link"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-font"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-text-size"></span>
</button>
</div>
<p>abbnnb </p>
</div>
Edit: Using display: -moz-box works on firefox. Will look into other browser solutions. Any ideas how to make it horizontally centred?
This worked for me:
<div class="btn-group" style="display: flex">
Change width to 20%
style="position: absolute; background-color: #eee; width: 20%; height: 15%; left: 10%; top: 50%"
Online Demo
OR you can do it by change btn-group-lg to btn-group-sm
You could add white-space: nowrap; to the .vd-text-widget class.
Related
I have a little problem with a dropdown button. I am trying to adjust my website to mobile. What I want is to have a button that will dropdown to left-hand side of it. Her is my html code;
<!-- A div element for the button that will contain the nav-bar buttons -->
<div style="position: absolute; ; right: 0px; margin-top: 40px;" ngbDropdown class="btn-group dropleft">
<button class="btn adjustbtn dropdown-toggle" style="width: auto; height: 20px;" ngbDropdownToggle></button>
<div ngbDropdownMenu class="dropdown-menu">
<button ngbDropdownItem>All Sports</button>
<button ngbDropdownItem>Basketball</button>
<button ngbDropdownItem>Football</button>
</div>
</div>
But the problem is this button is still dropping down to the right-hand side of it, althoug the arrow at my dropdown button points to left. How can I fix this?
Try this.
<div style="position: absolute; left:auto !important; right: 0 !important; margin-top: 40px;" ngbDropdown class="btn-group dropleft">
<button class="btn adjustbtn dropdown-toggle" style="width: auto; height: 20px;" ngbDropdownToggle></button>
<div ngbDropdownMenu class="dropdown-menu">
<button ngbDropdownItem>All Sports</button>
<button ngbDropdownItem>Basketball</button>
<button ngbDropdownItem>Football</button>
</div>
</div>
I guess you are using ng-bootstrap dropdown.
If yes, you should use its class dropdown-menu dropdown-menu-right.
<div style="position: absolute; ; right: 0px; margin-top: 40px;" ngbDropdown class="btn-group dropleft">
<button class="btn adjustbtn dropdown-toggle" style="width: auto; height: 20px;" ngbDropdownToggle></button>
<div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
<button ngbDropdownItem>All Sports</button>
<button ngbDropdownItem>Basketball</button>
<button ngbDropdownItem>Football</button>
</div>
</div>
Sample: dropdown examples
I have a question regarding the vertical alignment of a button group within a row, using bootstrap.
This is an image that explains what I'm trying to achieve
And the following code is used in my current project:
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
<div class="row">
<div class="col-sm-9">
#if (item.Completed) {
<h4><span class="label label-success">Completed</span> #item.Procedure.Title</h4>
} else {
<h4><span class="label label-danger">Not completed</span> #item.Procedure.Title</h4>
}
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Time required:</dt>
<dd>#item.Procedure.Time</dd>
<dt>Material required:</dt>
<dd>#item.Procedure.Material</dd>
<dt>Engineers required:</dt>
<dd>#item.Procedure.Engineers</dd>
<dt>Documentation:</dt>
<dd>#item.Procedure.Documents</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Status:</dt>
<dd>#item.Status</dd>
<dt>Note:</dt>
<dd>#item.Note</dd>
</dl>
</div>
</div>
</div>
<div class="col-sm-3" style="vertical-align: middle;">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-success" role="group">
<span class="glyphicon glyphicon-ok"></span>
OK
</button>
<button type="button" class="btn btn-danger" role="group">
<span class="glyphicon glyphicon-remove"></span>
Not OK
</button>
<button type="button" class="btn btn-info" role="group" data-toggle="modal" data-target="#noteModal#(item.ID)">
<span class="glyphicon glyphicon-pencil"></span>
Add note
</button>
</div>
<div id="noteModal#(item.ID)" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add note</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group">
<label for="note">Note:</label>
<textarea class="form-control" rows="5" id="note" style="min-width: 100%;"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add note</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Any help apreciated, thanks!
I solved the problem using the flex property on the outer .row
.row-flex {
display: flex;
align-items: center;
}
Image
This is what I did:
.btn-group {
flex-wrap: wrap;
width: 80px;
}
button{
width:80px;
}
Here is the JSFiddle demo
I have a bootstrap sidebar that contains a couple buttons. Unfortunately, it looks very ugly and I want each button to be the same size.
These buttons are contained in a sidebar and will be stack vertically. I want to avoid setting a pixel number for each button. Here is the jfiddle
https://jsfiddle.net/66bk2rfc/
HTML
<div id="reading-sidebar" class="col-xs-3 panel-default">
<div id="reading-sidebar-title" class="panel-heading">Options
<button type="button" class="btn btn-xs btn-default pull-right" id="reading-sidebar-hide-btn"><i class="glyphicon glyphicon-remove"></i></button>
</div>
<div id="reading-sidebar-contents" class="panel-body">
<ul class="sidebar-button-list">
<button type="button" id="pre-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Pre Readings</button><br>
<button type="button" id="passage-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Passage</button><br>
<button type="button" id="post-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Post Readings</button><br>
<button type="button" id="media-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Media</button><br>
<button type="button" id="question-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Questions</button>
</ul>
</div>
</div>
The "bootstrap" way to do this would be to use btn-block on your button elements. Like so:
<button type="button" class="btn btn-primary btn-lg btn-block">Full-width Button</button>
You can also just surround them with <div class="btn-group-lg btn-group-vertical">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="reading-container" class="col-xs-6">
<div id="reading-sidebar" class="col-xs-3 panel-default"></div>
<div id="reading-sidebar-contents" class="panel-body">
<div class="btn-group-lg btn-group-vertical">
<button type="button" id="pre-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Pre Readings</button>
<button type="button" id="passage-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Passage</button>
<button type="button" id="post-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Post Readings</button>
<button type="button" id="media-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Media</button>
<button type="button" id="question-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Questions</button>
</div>
</div>
</div>
If I get your question right. Do you mean this:
#reading-sidebar-contents .btn{
width:200px;
}
Here is fiddle: https://jsfiddle.net/66bk2rfc/6/
I changed your fiddle to match a solution. You can give your sidebar a width of 100%. Then you can just make your buttons 80% with one line of css and make them stay in the middle with the margin:0 auto. If you want to adjust your size of the buttons, you can easely change it with just the one line. You could also add the text-align:left, set a font-size for all the buttons,... for better styling to the buttons.
#reading-sidebar
{
width:80%;
margin:0 auto;
}
#reading-sidebar-contents button
{
width:100%;
margin:0 auto;
}
Link: https://jsfiddle.net/66bk2rfc/1/
I suggess You to do it like this:
.btn {
width: 100%;
height: 56px;
padding-left: 2% !important;
}
.btn i {
left: 10px;
width: 10%;
top: 25%;
height: 50%;
}
.btn.pull-left {
text-align: left;
}
Also if you just want only these affect to sidebar buttons, add
#reading-sidebar .btn { } ETC...
If you want it not 100% width and centered, You should do it like this,
.btn { width: 80%; margin-left: 10%; }
That will make it centered easily. :)
I am doing a design for mobile and I have to think in differents devices. I put a button-group in bottom of the page. It's means the bottons appear at the final of the scroll-bar. But, when the page its too small because the device is big, the bottons appear at the middle of the page. And after that, there is white space.
I try with this rules: How to put the footer at the bottom of the visible page? But the buttons appear always at the bottom of the screen. I need see the bottons after using scroll-bar.
HTML
<div id="botoneraInternet" class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default" id="botonHardware" disabled="" style="background-color: rgb(48, 144, 184);">
<span><img class="icons" src="imagenes/llave.png"></span> Hardware
</button>
</div>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default" id="botonClose" style="background-color: rgb(223, 228, 229);">
<span><img class="icons" src="imagenes/valija.png"></span> Cerrar WO
</button>
</div>
</div>
CSS
.btn-group {
position: relative;
vertical-align: middle;
}
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
Someone can help me?
Really thanks, and I am going to give the star to the best answer.
try this....there wasn't enought code you provided so I improvised a bit. But let me know if this is what you need.
http://codepen.io/carinlynchin/pen/WvbLXE
CSS:
body{
height:900px;
position:relative;
}
.btn-group {
position: absolute;
width:100%;
bottom:0
}
.btn-group div {
display:inline;
}
HTML:
<div id="botoneraInternet" class="btn-group btn-group-justified" role="group" aria-label="...">
<div role="group">
<button type="button" class="btn btn-default" id="botonHardware" disabled="" style="background-color: rgb(48, 144, 184);">
<span><img class="icons" src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg"></span> Hardware
</button>
</div>
<div role="group">
<button type="button" class="btn btn-default" id="botonClose" style="background-color: rgb(223, 228, 229);">
<span><img class="icons" src="https://pbs.twimg.com/profile_images/3540744128/7dd80644ae052f1b04180c41bbc674ab.png"></span> Cerrar WO
</button>
</div>
</div>
I'm trying to place a button on top of a thumbnail image but the button is added after the image, in the caption area.
Here is the code:
<div class="thumbnail">
<img class="img-responsive"alt="300x200" src="network_sec.jpg">
<button class="btn btn-default btn-warning pull-right"><span class="glyphicon glyphicon-user"></span> 10</button>
<div class="caption">
<h3 align="center">Network Security</h3>
<br>
<p>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-wrench"></span> Manage</button>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-eye-open"></span> Preview</button>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-pencil"></span> Edit Info</button>
</p>
</div>
</div>
I'm trying to align the button at the bottom right part of the image. Any suggestions on how can I achieve the desired result?
I would put the image an the button in a new div, then use positioning relative and absolute like this.
HTML
<div class="thumbnail">
<div id="thumb">
<img class="img-responsive"alt="300x200" src="network_sec.jpg">
<button class="btn btn-default btn-warning pull-right"><span class="glyphicon glyphicon-user"></span> 10</button>
</div>
<div class="caption">
<h3 align="center">Network Security</h3>
<br>
<p>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-wrench"></span> Manage</button>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-eye-open"></span> Preview</button>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-pencil"></span> Edit Info</button>
</p>
</div>
</div>
CSS
#thumb
{
position: relative;
width: 300px;
height: 200px;
}
#thumb img
{
z-index: 1;
position: absolute;
width: 300px;
height:200px;
top: 0;
left: 0;
}
#thumb button
{
z-index: 5;
position: absolute;
bottom: 0;
right: 0;
}
Is that what you had in mind?