Show and Hide a <div> in xs view, with a button - html

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

Related

Bootstrap "close" Class: Button Sometimes Pushed out of Alert by Text

I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within.
Most of the time, it appears fine like so:
But at certain screen widths, just before the text in the alert wraps, the close button no longer has enough room at the end of the alert. In this image, I reduced the screen width by a few pixels compared to the previous image:
Here is my code snippet (edited to replace ASP.NET controls and code render blocks):
<div class="mt-0 mb-3 alert alert-primary">
<span class="text-here">foo</span>
<a class="close">
<span>×</span>
</a>
</div>
Good observation
The green div with display:inline-block; & width to 100% should resolve this...
working snippet below:
.fixedAlert {
display: inline-block;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="mt-0 mb-3 alert alert-success fixedAlert">
<span class="text-here"> FIXED ALERT... I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within</span>
<button type="button" class="close">
<span>×</span>
</button>
</div>
<div class="mt-0 mb-3 alert alert-primary ">
<span class="text-here"> ORIGINAL ALERT... I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within</span>
<button type="button" class="close">
<span>×</span>
</button>
</div>
</div>
Updated: in light of questioner's comment below
It turns out I'd simply removed one class too many while removing client-side dismiss functionality in favour of an ASP.NET click event postback.
The class in question, alert-dismissible, which is supposed to go alongside the alert class when a close button is present. It adds a larger amount of padding to the right side of the alert div, such that the floating close button/anchor always has enough room to sit at the top right. It also gives the close button some styling, including padding, such that it is nicely centered in that vertical space.
That also explains why my close button was at the bottom right instead. A comment on the main question that got deleted by its OP did point out that the close button looked like it was in a weird position.
Here is my new working code, without any additional custom classes needed:
<div class="mt-0 mb-3 alert alert-dismissable alert-primary">
<span class="text-here">foo</span>
<a class="close">
<span>×</span>
</a>
</div>

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.

Horizontal Bootstrap buttons stacking twice

I can't seem to understand this behavior:
CodePen demo
<div class="container-fluid buy-now">
<div class="row">
<div class="col-sm-offset-3 col-sm-6 text-center">
<button type="button" class="btn btn-primary btn-lg" id="buy-now-button" >BUY NOW FOR $400</button>
<button id="make-an-offer-button" type="button" class="btn btn-lg btn-info">MAKE AN OFFER</button>
</div>
</div>
</div>
Basically, the buttons stay next to each other until I get to about 1244px width when they stack on top of each other. Then, they go BACK to horizontal at about 768px. But then, at about 620px width, they go to stacked again.
Why is there such a "jumpy" behavior at seemingly random screen resolutions? According to the definitions I've set, these buttons should stay next to each other right until 768px (and below), when they go back to stacked mode.
You can replace the sm classes in the third line with xs so that it applies to all sizes:
<div class="col-xs-offset-3 col-xs-6 text-center">
This will result in only one horizontal/vertical break.
Here it is: https://codepen.io/anon/pen/QaMxPY
--
Second solution:
Erase col-xs-offset-3 col-xs-6 from that tag, resulting in
<div class="text-center">
This will center the buttons and only stack them when the screen becomes too narrow to have them side by side.
https://codepen.io/anon/pen/QaMxPY
--
Or use a smaller offset and a wider container class:
<div class="col-xs-offset-1 col-xs-10 text-center">
https://codepen.io/anon/pen/RxZBbx
--
And you can make the buttons smaller, by applying a different class to them (btn-sm instead of btn-lg) and changing their font-sizes:
https://codepen.io/anon/pen/mpMjyx

prevent bootstrap navbar-fixed-bottom overlap

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>

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.