The Bootstrap 3 navbar provides a header area and a collapsible area. The header area houses a branding link that is permanent and the collapsible area houses everything else that collapses under a hamburger icon when the window is shrunk. I am trying to add a select box and a button to the header area with the intent that they should be displayed permanently and not collapse when the window is shrunk. This is what I have tried so far (full code available in a codepen here)
<div class="navbar-header">
<-- Hamburger button -->
<button type="button" class="navbar-toggle" ...>
...
</button>
<a class="navbar-brand" href="#">Brand</a>
<!-- Permanent select box -->
<select class="navbar-text navbar-left">
<option>Option 1</option>
<option>Option 2</option>
</select>
<!-- Permanent button -->
<button type="button" class="btn btn-default btn-sm navbar-btn navbar-left">
Action
</button>
</div>
Unfortunately I am seeing two problems:
The header wraps making the select box and the button fall below the brand link (you have to resize the window from small to big to see this effect).
Althought the button is specified as small, it shows up as big
Any idea how to solve these issues?
1) You could override the CSS and add this
.navbar-header{
min-width: 275px;
}
2) You can change btn-sm to btn-xs if you need the button to be smaller.
See demo
Related
I have an app built in blazor for a shopping list.
The UI is composed of the default blazor template tab,
an Add Item button at the top and a Finished shopping button at the bottom.
Between the 2 buttons I want the remaining space to be taken up by a list of custom components.
I do not know how to get the height of the list set to the remaining space on the page.
Closest I have gotten is by setting the size of the list container to 100vh - 140pixels where 140pixels is the size of the buttons.
As the nav tab appears on the top for narrow screens and the left for wide screens I can't just hardcode in the value for it.
I would also prefer if this didn't rely on me hardcoding this as well.
I have tried setting the container height to 100% but that is just giving it no limit.
The list is in a div with the overflow-auto class from bootstrap.
The code
<body style="height:100%">
<div style="">
<div style="">
<button class="btn btn-primary" style="margin-bottom: 10px; width:100%;" #onclick="AddItem">Add Item <span class="oi oi-plus" style="margin-left: 5px;" aria-hidden="true"></span> </button>
</div>
<div class="overflow-auto" style="height: calc(100vh - 140px);">
#foreach (var item in _shoppingItems)
{
<ShoppingItemComponent Item="#item" DeleteItem="DeleteItem" BoughtToggle="UpdateItem" ></ShoppingItemComponent>
}
</div>
<div style="">
<button class="btn btn-primary" style="width:100%;" #onclick="ClearList">Shopping Done</button>
</div>
</div>
</body>
You can see it running here, although note I am fiddling with it there so it may not match exactly with the styling in this question.
https://smartshoppingapp.azurewebsites.net/
I have found some solutions around stack overflow around the problem, however I cannot get them working within my solution, I think all of the blazor boilerplate divs and bodies etc that wrap around my page are preventing the 100% height working as intended. i.e index.html and mainlayout.razor
Use bootstrap flex:
I un-wired your buttons to get it to work locally.
<div class="vh-100 d-flex flex-column align-items-stretch">
<button class="btn btn-primary">
Add Item <span class="oi oi-plus" style="margin-left: 5px;" aria-hidden="true"></span>
</button>
<div class="flex-fill overflow-auto">
#foreach (var item in _shoppingItems)
{
<ShoppingItemComponent Item="#item"
DeleteItem="DeleteItem"
BoughtToggle="UpdateItem" />
}
</div>
<button class="btn btn-primary">
Shopping Done
</button>
</div>
As a side note: When I am debugging these sort of issues I assign background colours to the divs to see what is really happening. That and inpecting the HTML with the browser tools.
I have created an application where the search function is the most important part. Therefore, I decided to put the search form in the title bar to have it available on every page. Works great, only on mobile devices I have the problem that the fluid layout causes the search fields to cover up most of the screen.
Thus, it would be great to collapse this title bar on mobile devices the same way a navigation bar does. Unfortunately, I did not get this working. I tried solving this with a navbar which did not work at all (see below).
Another idea of mine was to create two different search bars, a collapsed one and a hidden one and use Bootstrap's .hidden-* and .visible-* classes. Not sure how this would perform, apart from that I have not figured out yet how to create a non-navigation title bar in Bootstrap.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid col-md-12">
<div class='row'>
<div class='col-md-8'>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.php">Home</a>
</div>
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</div>
<div class='col-md-4' style='padding-top: 7px;'>
<!-- Session & status information go here -->
</div>
</div>
</div>
</nav>
Any idea how I can show my search fields on large screens and collapse them on mobile devices?
You did not give us much to work with, but as far as the collapsing goes I would go for a combination of css and jQuery. Here is the gist of how I would go about solving this problem by simply creating your own little "bootstrap-like" collapse.
html: Make your own little navigation structure with a button that will display your form on mobile devices.
<ul class="search-nav">
<li class="collapse-button">ICON</li>
<li class="search-form">
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</li>
</ul>
css: Make the collapse-button not show on large screen devices. On small screen devices the collapse-button can be displayed, but the form has to be hidden by default. All of this can be achieved using media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
.collapse-button{
display: none;
}
.search-form{
display: block;
}
#media (max-width: 480px){
.collapse-button{
display: block;
}
.search-form{
display: none;
}
}
jQuery: If the user clicks on the collapse-button the form will toggle between being displayed and not. Something like this:
$( ".collapse-button" ).click(function() {
$( ".search-form" ).toggle(function() {
$( ".search-form" ).css("display","block");
}, function() {
$( ".search-form" ).css("display","none");
});
});
This is just the general idea. I would probably actually go with setting max-height of the form to 0 and overflow:hidden on devices with small screen and a bigger max height on devices with a larger screen. This way you could add a css transition that would make it expand more fluently.
Here is my jsFiddle (you'll have to expand the Result pane to see it in all its glory).
Notice how the green Sign up button is:
Pinned to the top of the navbar; and
Doesn't seem to look like a normal "success" button (example here)
I can't tell if it's because I'm using a CDN (and perhaps the CDN is out of date) or if these 2 things are happening because I'm lacking some CSS rules in the following code:
<ul class="nav navbar-nav navbar-right">
<li class="active"><button type="button" class="button btn-success">Sign up</button></li>
<li class="active"><button type="button" class="button btn-link">Sign in</button></li>
</ul>
Any ideas where I'm going awry?
First of all you need to use the btn class instead of button class on your buttons, then you need to wrap your buttons inside a navbar form parent to position them properly like so:
<form class="navbar-form navbar-right">
<div class="form-group">
<button type="button" class="btn btn-success">Sign up</button>
<button type="button" class="btn btn-link">Sign in</button>
</div>
</form>
https://jsfiddle.net/71j5psr0/6/
You should probably change your buttons to links, just keep in mind in a navbar by default links inside of your list items will take up the full height of the navbar itself and will be inherit a unique style. You can apply the same btn-* classes to links and they will appear exactly as buttons do.
you can try this class="btn btn-success btn-lg"
In your code YOU use "button" in the place of "btn"
I have created a Bootstrap Template where there is a "sidebar" div (col-lg-3) and a content at the right (col-lg-9).
In the xs view all the columns are 12, how can I insert a button that hide and show the content in the sidebar div just in the xs view at the click on it?
I don't know Javascript or jQuery, someone can help me?
Thanks!
If you're using Bootstrap, you might want to check out the Collapse plugin: http://getbootstrap.com/javascript/#collapse
There is a pretty simple example, but you'd want to set it up like this:
*note that you want to add the visible-xs class to the button, so that it is only displayed on xs screens. Additionally, I added the in class on the div that collapses, so that is shows by default (otherwise it would be hidden on all screen sizes).
<div class="row">
<div class="col-lg-3">
<button class="btn btn-primary visible-xs" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
*Button only visible on xs*
</button>
<div class="collapse in" id="collapseExample">
*sidebar content*
</div>
</div>
<div class="col-lg-9">
*content in col-lg-9*
</div>
</div>
Here is an example of the above code. Make sure the screen size is small enough, otherwise the button will be hidden. Click the button to toggle the visibility of col-lg-3 content. http://jsfiddle.net/7v7p744L/1/
Additionally, you could just add the hidden class to the button and say at what size you want it to take effect.
eg:
*hidden in xs
*hidden in sm
I am creating an mobile app using HTML/CSS/JS with Bootstrap and PhoneGap Build.
In my app I have a footer on my pages with 3 navigation buttons. The problem is that when I rotate my device from portrait to landscape, the buttons do not resize to take up the full width like they are supposed to. However, if I click one of the nav buttons after rotating, the new page that loads does show the buttons at full width. Rotating once again back to portrait, now has the buttons taking up way too much space.
I am utilizing <div class="btn-group btn-group-justified"> like the documentation states.
My footer HTML is as follows:
<nav id="footer" class="navbar-fixed-bottom col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4" role="navigation" style="padding: 0 0;">
<div id="footerGroup" class="btn-group btn-group-justified">
<a type="button" class="btn btn-default active" href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
<a type="button" class="btn btn-default" href="fundHistoryPage.html"><span class="glyphicon glyphicon-align-justify"></span> History</a>
<a type="button" class="btn btn-default" href="calculatorPage.html"><span class="glyphicon glyphicon-usd"></span> Calc</a>
</div>
</nav>
I have also tried setting a resize event handler to remove the "btn-group-justified" class and re-add it but to no avail.
$( window ).resize(function(){
$("#footerGroup").removeClass('btn-group-justified');
$("#footerGroup").addClass('btn-group-justified');
});
Any advice would be appreciated.
Edit: The footer re-sizes perfectly when testing in the browser. Just not on test devices.
I hate answering my own question but I am going to anyways. After playing around with it a bit last night I ended up employing the following:
$( window ).resize(function(){
$("#footerGroup").removeClass('btn-group-justified');
setTimeout(function(){
$("#footerGroup").addClass('btn-group-justified');
}, 1);
});
I found that even a delay of just 1 millisecond before adding the class back in is enough to get it to resize properly. Very strange. Opened a new issue on the Bootstrap repo here.
<nav id="footer" class="navbar-fixed-bottom col-sm-12 col-sm-8 col-sm-offset-2 col-sm-6 col-sm-offset-3 col-sm-4 col-sm-offset-4" role="navigation" style="padding: 0 0;">
please maintain same sizes, providing multiple sizes may give you unwanted results