Thanks for taking the time.
I implemented css bootstrap and got a nice fixed menu on top of my one page scrolling website. Just to make sure users instinctively see the navigation, I copied the menu below the header as well. Works well on every browser I have but IE 10.
Here's the code:
<div class="text-center">
<button type="button" class="btn btn-default btn-info">
123123
</button>
<button type="button" class="btn btn-default btn-warning">
13132123
</button>
<button type="button" class="btn btn-default btn-danger">
12313123
</button>
<button type="button" class="btn btn-default btn-success">
ЗА 132123123
</button>
<button type="button" class="btn btn-default btn-info">
12312313
</button>
<button type="button" class="btn btn-default btn-warning">
123123123
</button>
</div>
The div's are named like this:
<div class="news-holder cf" id="news">
They are closed and everything. I am completely new to web design so I don't know what's happening. It's bizarre.
As stated by #recursive a link should not be in a button.
Further more if this is a menu you most certainly should not be using button and avoid inline styles.
also check that you have div's on page with the id of news, articles etc.
if you need further assistance please supply more of your code.
try this.
<nav>
<ul class="text-center">
<li class="btn btn-default btn-info">
123123
</li>
<li class="btn btn-default btn-warning">
13132123
</li>
<li class="btn btn-default btn-danger">
12313123
</li>
<li class="btn btn-default btn-success">
ЗА 132123123
</li>
<li class="btn btn-default btn-info">
12312313
</li>
<li class="btn btn-default btn-warning">
123123123
</li>
</ul>
</nav>
<a> elements are not allowed inside of <button> elements.
http://www.w3.org/TR/html5/forms.html#the-button-element
there must be no interactive content descendant.
That's likely to be related to the problem. Since anchors have been well supported for decades.
Related
I basically have a button group with one button that is sometimes disabled ("Corpus delicti"). In the case it is disabled I want to show the user an explanation via a popover.
Since disabled elements require wrapper elements I wrapped a div around the button - what messed the styling up.
So I followed Bootstrap's hint "to specify the option container: 'body'" but styling is still messed up.
This is the markup, find it also in this fiddle:
https://jsfiddle.net/7ben7zmg/
<div class="btn-group" role="group">
<button onclick="console.log('huh')" type="button" class="btn btn-default">Log-Datei</button>
<div class="btn-group" role="group">
<div data-container="body" data-toggle="popover" data-placement="right" data-content="Lorem ipsum..." data-trigger="hover" data-html="true">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled=""></button>
</div>
Corpus delicti <span class="caret"></span>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Infoseite <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<button type="button" class="btn btn-default">TCP-Dump</button><button type="button" class="btn btn-default">Diesen Kunden deaktivieren</button>
</div>
Have no clue what I can do. Please help.
Apply data-toggle:popover in the btn-group instead of wrapping in other div..
Wrapping to another div will disturb your layout..
Updated Fiddle
This question already has answers here:
Center a column using Twitter Bootstrap 3
(34 answers)
Closed 6 years ago.
I have the following code:
<div class="row">
<div class="col-xs-12" id="buttonList">
<ul class="list-inline">
<li><button id="homeBtn" type="button" class="smallMarginB headerButton active btn btn-sm btn-primary">Home</button></li>
<li><button id="aboutBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">About</button></li>
<li><button id="servicesBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Services</button></li>
<li><button id="transBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Transformations</button></li>
<li><button id="testBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Testimonials</button></li>
<li><button id="contactBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Contact</button></li>
<li><button id="faqBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">FAQ</button></li>
</ul>
</div>
</div>
It simply shows buttons in a single column. I want it to be centered no matter the users resolution. I have tried using offesets but for odd resolutions it doesn't work (ex. resolution is 1366px). I have also tried adding col-centered and margin: auto with no success.
Try adding class="text-center" to div col element:
<div class="col-xs-12 text-center" id="buttonList">
You can try:
margin-left:auto; margin-right:auto for horizontal alignment;
margin-top:auto; margin-bottom:auto, for vertical alignment
or
margin:auto for both.
I have 2 bootstrap ul's and one is beautified and the other one is not, my problem is why the first ul is not rendering correctly is is not beautified , what is wrong ? How you can see in fiddle example in second ul which is the same with first ul nut beautified te spaces are added correctly...
Same html but not beautified
<ul id="handlers-list" class="list-group">
<li id="GET___asdasd" class="list-group-item"><span>/asdasd</span><span class="label label-primary">GET</span><span class="label label-primary">html</span><span style="display:none;">asdasdasd</span><button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span></button><button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button><button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
</ul>
Same HTML but beautified is render correctly
<ul id="handlers-list" class="list-group">
<li id="GET___asdasd" class="list-group-item">
<span>/asdasd</span>
<span class="label label-primary">GET</span>
<span class="label label-primary">html</span>
<span style="display:none;">asdasdasd</span>
<button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm">
<span class="glyphicon glyphicon-open" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-warning btn-sm">
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
</ul>
Here is a small js example:
White-spaces between inline elements are transformed into one space. The reasoning is that inline elements might be interspersed with regular inner text of the parent element. So give space or enter the span in new line to get expected result
Try like this:
<li id="GET___asdasd" class="list-group-item"><span>/asdasd</span> <span class="label label-primary">GET</span><span class="label label-primary">html</span> <span style="display:none;">asdasdasd</span>
<button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
</li>
could be due to your code structure. if you structure the top one like the bottom one then it should work
http://i.imgur.com/3v4M7Lw.png
heres a screen shot of what i changed
Continuous html markup like in the first example removes the space between elements.
The second example has spaces in the markup which leads to proper aligned buttons.
I'm trying to get a Bootstrap btn-group to work, with a few fixed elements and a btn in the middle that grows to fill out the entire thing.
JSFiddle of what I'm trying to do: http://jsfiddle.net/DTcHh/2988/
Basically the idea is I'm trying to get the 3 and 4 buttons to stick to the right, while the "Text here" element fills out the rest of the space. Menu sticks to the left.
I've tried putting btn-group-justified on the element I want to expand out but that makes it take up the entire width of the screen, whereas I want everything to be on one line.
HTML:
<div class="btn-group" role="group" aria-label="First group" style="width:100%; margin-right:-300px">
<div class="btn-group dropup" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Menu <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Edit Lead</li>
<li>Transfer Call</li>
</ul>
</div>
<div class="btn-group" role="group" aria-label="First group" style="width: 100%; margin-right:-320px">
<span class="btn btn-default" style="width:100%;">
Some text here
</span>
</div>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
Any idea how I can achieve this?
Solved it.
Needed to set table-layout:auto on the parent group and add width:1% to the fixed size elements, width:100% to the expandable elements and add the class btn-group-justify to the parent group. Looks perfect now!
Fiddle: http://jsfiddle.net/DTcHh/2996/
try this
<div class="btn-group btn-group-justified" role="group" aria-label="First group" style="table-layout:auto">
<div class="btn-group dropup" role="group">
<a type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Edit Lead</li>
<li>Transfer Call</li>
</ul>
</div>
<span class="btn btn-default" style="width: 100%;">Hey there</span>
<a type="button" class="btn btn-default">3</a>
<a type="button" class="btn btn-default">4</a>
</div>
This is my code: http://jsfiddle.net/52VtD/7462/
I'm trying to put my dropdown and buttons on the same line. But I can't do that because the dropdown is a div and stays on the line below. How can I put them on the same line?
<div class="panel panel-default">
<div class="panel-heading">
<input type="checkbox">
<button type="submit" class="btn btn-xs btn-default">Stage</button>
<button type="submit" class="btn btn-xs btn-default">Add Label</button>
<button type="submit" class="btn btn-xs btn-default">Send Message</button>
<button type="submit" class="btn btn-xs btn-default">Archive</button>
<div class="dropdown">
<button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Assign to<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Unsorted <span class="badge">12</span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action <span class="badge">42</span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here <span class="badge">42</span></a></li>
</ul>
</div>
</div>
Test
</div>
Never override or modify bootstrap base classes.. Always add new class or identity. You can do it like this :
Add new class "div-inline" to div with class dropdown..
Add this css
.div-inline{
display:inline-block;
}
JSFIddle : http://jsfiddle.net/rahulrulez/52VtD/7464/
As of bootstrap 4, you can change the dropdown line from:
<div class="dropdown">
to:
<div class="dropdown d-inline-block">
That will make all the buttons show up in one line.
Add this to your CSS:
.dropdown{
display: inline;
}
fiddle
I have just one drop down button and a few "normal" buttons. I am using bootstrap and did not want to get into editing CSS, so I resolved the issue as follows. It works, it is on one line, but the above solutions will work better if you have more than one dropdown on the same line.
I wrapped the whole thing (normal buttons and dropdown) into a <div class="row">. I then changed the <div class="dropdown> of the dropdown to <div class="dropdown col-sm-1" style="margin-right: 2%">. It did the trick.
My code looks like this:
<div class="row">
<spring:url value="/person/${person.id}/addaddress" var="addaddressUrl" />
<button class="btn btn-info"
onclick="location.href='${addaddressUrl}'">Add Address</button>
<spring:url value="/person/${person.id}/addphone" var="addphoneUrl" />
<button class="btn btn-primary"
onclick="location.href='${addphoneUrl}'">Add Phone</button>
<spring:url value="/person/${person.id}/addemail" var="addemailUrl" />
<button class="btn btn-success"
onclick="location.href='${addemailUrl}'">Add Email</button>
<spring:url value="/person/${person.id}/addpass" var="addpassUrl" />
<button class="btn btn-default"
onclick="location.href='${addpassUrl}'">Add Pass</button>
<spring:url value="/person/${person.id}/addnote" var="addnoteUrl" />
<button class="btn btn-warning"
onclick="location.href='${addnoteUrl}'">Add Note</button>
<div class="dropdown col-sm-1" style="margin-right: 2%">
<spring:url value="/person/${person.id}/role1" var="role1Url" />
<spring:url value="/person/${person.id}/role2" var="role2Url" />
<spring:url value="/person/${person.id}/role3" var="role3Url" />
<spring:url value="/person/${person.id}/role4" var="role4Url" />
<spring:url value="/person/${person.id}/role5" var="role5Url" />
<spring:url value="/person/${person.id}/role6" var="role6Url" />
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown"
>Add Role
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>role1</li>
<li>role2</li>
<li>role3</li>
<li>role4</li>
<li>role5</li>
<li>role6</li>
</ul>
</div>