prevent bootstrap navbar-fixed-bottom overlap - html

In some cases the bootstrap navbar-fixed-bottom will overlap other content without displaying a scrollbar.
For example https://jsfiddle.net/m5vgd9g7/1/:
<div>
<a class="btn btn-primary" href="#">
Button
</a>
</div>
<div class="navbar navbar-default navbar-fixed-bottom"
style="padding-bottom:0px; min-height:0px">
bottom
</div>
If you make the display pane very short vertically, the text "bottom" overlaps the button:
How can the overlap be prevented, so a vertical scrollbar appears before they overlap?

You should add a class to your top div which is row, so your top html would look like
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
This will add you a scrollbar for your content vertically. But when we declare a fixed navbar you should keep in mind to add a padding/margin to the rest of the content to the size of the navbar, which should display the rest of the content without being intruded by the navbar. So your final html for the top div would look like,
<div class="row" style="padding-bottom:15px;">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
Note: I would never use inline styles as it would complicate the html in the long run and hard to debug. I did it here for the sake of demonstration.
And the fiddle example is here : https://jsfiddle.net/m5vgd9g7/
EDIT
Thanks to #JDiMatteo who commented about the row class addition. I was about to maintain the bootstrap standards in grid system. (ref: http://getbootstrap.com/css/#grid). Apparently it seems row should be contained within container or container-fluid classes for it to work. This will define a row, where elements/columns(as in bootstrap) could reside in. And by using this, you can get rid of the custom styling we used earlier, padding/margin.
<div class="container">
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
</div>

Related

HTML/CSS/Blazor Fixed Buttons above and below list which needs to fill remaining space

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.

Collasping bootstrap div goes under the bottom div

I am using bootstrap collapse class in a list of divisions.
but collapsing division goes under the bottom item.
It needs to resize browser after collapse to work well.
<div>
<div class="footer-co-src row">
<div class="col-lg-3 col-sm-3 details-fly">
<a class="collapsed" data-toggle="collapse" aria-expanded="true" aria-controls="collapseDetails-1" data-target="#collapseDetails-1">Button</a>
</div>
</div>
<div class="collapse row" id="collapseDetails-1">
<div class="card card-body"> sth to show
</div>
</div>
<div>
I have multiple of these divs, but showing div will be under the next item.
there is no bug in this piece of code. You are probably using some JS library that changes position type to position:absolute or position:fix.
Check any list managing JS/Jquery source on your whole page.
Check the css position:fixed is coming from which library. You can check in inspect elements. And then use this stylesheet library before the bootstrap library in html.

Grid Issue By Using <div> and <a>

I have one silly question about Bootstrap Grid System.
Is that okay to use <a href="#" class="col-lg-4"> instead of <div class="col-lg-4">?
Is it because I want create a column-4 grid menu with hyperlink.
Basically, it should look like this which the hyperlink only cover the text not the whole column even if I had styled width: 100%; height: 100%; inside the <a> tag.
<div class="row">
<div class="col-lg-4">
Menu 1
</div>
</div>
After I change the code, it should look like
<div class="row">
<a href="#" class="col-lg-4">
Menu 1
</a>
</div>
Is this a best practice of using Bootstrap?
Or we have to follow the standard which define by Bootstrap?
do it like this and it will be looking great:
just add a class or style to your a element.
or add class "btn btn-default btn-block" to use bootstrap button styles
<div class="row">
<div class="col-lg-4 text-center">
<a href="#" class=" btn-block">
Menu 1
</a>
</div>
</div>
The only problem I see with that is that the A won't have the css property display: block; by default so you might run into styling issues. If you fix this issue by adding this property, I can see any problem with that.

Trouble with a floated div with hidden-* bootstrap class

I have the next code:
<div class="container-fluid">
<img src="images/w2.png" alt="W logo" class="center-block visible-xs-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
<h2 class="center-block visible-xs-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">This is h2 header</h2>
<div class="hidden-xs visible-sm-inline-block visible-md-inline-block visible-lg-inline-block pull-right">
<div class="row">
<img src="images/user.png" alt="User image" class="col-sm-3 img-circle">
<span class="col-sm-9">Non register user</span>
</div>
<div class="row">
<button type="button" class="btn btn default btn-large col-sm-6">Log in</button>
<button type="button" class="btn btn default btn-large col-sm-6">Register</button>
</div>
</div>
</div>
The above code just show a div which have inside it a image with 50x50px and a h2 and another floated div by the .pull-right class. My problem appear when the viewport size come to set more than extra-small size (xs); the floated div disappear in xs size (at this point everything works well) but later when the viewport come to be small (sm) or higher, the floated div appear in another line: just below from the img and h2.
How can I solve this? thank you.
Edit the question above:
The behavior which I'm looking for is that the div.hidden-xs appear only when the viewport have more size than extra-small size (xs) and also that it appear horizontally aligned to the right (right float) at the same line of img and h2.
Thank you
if <div class="hidden-xs visible-sm-inline-block visible-md-inline-block visible-lg-inline-block pull-right"> is troubling you, that is because you only put class hidden-xs. Because that class means only hidden if viewport is xs. On the other hand, you put visible-sm-inline-block and visible-md-inline-block, so of course that div appear below the img and h2.
reference: bootstrap
Why don't you try
<div class="hidden-xs pull-right">
EDIT:
reference: learnlayout
I think I've got the wrong concept before, sorry. I think your <img> and <h2> not inside the <div> with class visible-*-*.

Bootstrap floating drops item onto second line

This is my code: http://www.bootply.com/Tm5C3Ja7RL
<div class="col-md-12">
<h3>Test</h3><button class="btn btn-default pull-right">Button</button>
</div>
It drops the button onto a second line as well as aligning it to the right. I only want to push it to the right. Can anyone show me the best way of doing this.
As EWit mentioned, a header is a block element.
This block will push down other elements behind it.
There are several solutions, one better/cleaner than the other
Changing the header to an inline element
h3 {
display:inline;
}
This will result in your title with the button right next to it.
I don't think the pull-right will have an effect on it. Should be tested.
You could also add the condition that the h3 must have a certain class or must be inside an element with a certain class.
Splitting the column in 2
<div class="col-md-10">
<h3>Test</h3>
</div>
<div class="col-md-2">
<button class="btn btn-default pull-right">Button</button>
</div>
By also using col-sm, for example, you could alter this so that the button is displayed next to the title in a medium/large screen and under it in a small screen.
However, the pull-right might make it look pretty weird then.
<div class="col-md-10 cold-sm-12">
<h3>Test</h3>
</div>
<div class="col-md-2 col-sm-12">
<button class="btn btn-default pull-right">Button</button>
</div>
Put the button in the h3-element
As EWit mentioned, you can also put the button inside the h3-element.
This will keep the button in the same line, but might alter the text formatting.
<div class="col-md-10">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
Put it inside the <h3>. Headers in HTML take up the full width as a block object. As such other objects are pushed down.
Try:
<div class="col-md-12">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
I myself extend it with some markup for basic links but to align it to the same height as the text in the header.
h1 .pull-right {
padding: 15px 5px 0 0;
}
But I have no idea what values would be best for a button to align it. Trial and error I guess.