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
Related
Problem:
I'm trying to create a HTML from which will have two buttons and a text in the middle. Everything looks fine just the right button is being pushed a little down. What is causing this in my HTML mockup?
I would appreciate any kind of help.
Code:
<div class="card-body p-0">
<ul class="nav nav-sidebar" data-nav-type="accordion">
<li class="nav-item-header">headline</li>
<li class="nav-item" style=" margin: 0px 20px 0px 20px;">
<button type="button" class="btn btn-primary btn-icon" style="left: 20px !important; position:absolute !important;"><i class="icon-arrow-left12"></i></button>
<p style="text-align: center;">Text</p>
<button type="button" class="btn btn-primary btn-icon" style="right: 20px !important; position:absolute !important;"><i class="icon-arrow-right13"></i></button>
</li>
</ul>
</div>
Image to demonstrate the problem:
You've put your text inside a <p> paragraph - so that means it will push everything after it to below it.
Try this: https://jsfiddle.net/px7u04aL/
Even without style sheet css - it shows side by side as I think you wanted.
Agree with comment from Martin that it is best not to use absolute unless you really have to.
Try the following code:-
Add CSS property position: relative; in the second li and add top: 0px in right button.
<div class="card-body p-0">
<ul class="nav nav-sidebar" style="position: relative" data-nav-type="accordion">
<li class="nav-item-header">headline</li>
<li class="nav-item" style="position: relative; margin: 0px 20px 0px 20px;">
<button type="button" class="btn btn-primary btn-icon" style="left: 20px !important; position:absolute !important;"><i class="icon-arrow-left12"></i></button>
<p style="text-align: center;">Text</p>
<button type="button" class="btn btn-primary btn-icon" style="right: 20px !important;top: 0px; position:absolute !important;"><i class="icon-arrow-right13"></i></button>
</li>
</ul>
</div>
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.
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>
Made this Bootply example and I'm wondering how can I get the same width for normal button and a button group consisting of 3 buttons.
Tried it with an css extension but I don't think that is the correct way in sense of the bootstrap grid system.
I know that there is something like .btn-group-justified but using of that class also changes the first ("<") and last element (">") width, but they should be fixed.
Any ideas?
.menu_button {
min-width: 170px;
max-width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default menu_button">First</button>
</div>
<div class="btn-group">
<button class="btn btn-default menu_button">Second</button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button">3rd</button>
<button class="btn btn-default">></button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button">4th</button>
<button class="btn btn-default">></button>
</div>
</div>
</div>
</div>
How's this?
I created a separate class for grouped buttons so that they could have separate stylings.
SIDE NOTE
Bootstrap buttons are styled to be responsive as the viewport changes. So styling them as you did may work, but may not be responsive unless you add your own media queries in CSS to change the size of them as the viewport changes.
.menu_button {
min-width: 170px !important;
max-width: 200px !important;
}
.menu_button_grouped {
min-width: 104px !important;
max-width: 134px !important;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default menu_button">First</button>
</div>
<div class="btn-group">
<button class="btn btn-default menu_button">Second</button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button_grouped">3rd</button>
<button class="btn btn-default">></button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button_grouped">4th</button>
<button class="btn btn-default">></button>
</div>
</div>
</div>
</div>
I hope this helps!
.buttons-group {
min-width: -webkit-fill-available;
justify-content: space-evenly;
}
.button-group {
width: -webkit-fill-available;
}