I am building a responsive calendar that has full-width buttons on it (events), and it shows extra info with the collapse component under it. But the button keeps appearing superimposed so it doesn't display the info correctly...
This is one of my event buttons:
<!--Event 1-->
<div class="div-event col-md-6">
<span class="date-event col-xs-2 col-md-1"><span class="num-date-event">22</span><br>SEP</span>
<button class="btn btn-event btn-block col-xs-8 col-md-4" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Kate's Super Party<br>at her house</button>
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-1" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
<div class="collapse" id="collapse-1">
<div class="well">
Hi, I'm a collapsable well that shows something but I can't be seen because of the weird css I have!
</div>
</div>
<div class="clearfix"></div>
</div>
I have tried using margin-top and position but it hasn't worked.
Is there a way to "separate" the collapse from the parent row? Or any other way to do it?
Here is the full calendar: https://jsfiddle.net/mrndrmrj/16/
In following span add margin-bottom:10px
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-1" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
Well, I found that the problem was grouping the event with the collapsable "well", so putting the well outside the div-event made it work!
This is one of the events corrected:
<!--Event 1-->
<div class="div-event">
<span class="date-event col-xs-2 col-md-2"><span class="num-date-event">22</span><br>SEP</span>
<button class="btn btn-event btn-block col-xs-8 col-md-8" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Kate's Super Party<br>at her house</button>
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-2" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
<div class="clearfix"></div>
</div>
<div class="collapse" id="collapse-1">
<div class="well">
Hi, I'm a collapsable well that shows something and now I can be seen, but not the last two guys.
</div>
</div>
And this is the updated fiddle with the first two events corrected and the last two wrong so you can see the difference...
https://jsfiddle.net/mrndrmrj/20/
Related
A button is created for each question from the database, when clicked, only one answer should be opened. But instead, when you click on any of the buttons, all answers open.
So far I've tried to change "collapse" to "${question.id}", but it seems to me that it doesn't work this way.
<div class="card-columns">
<#list questions as question>
<div class="card border-light mb-3 bg-card">
<div class="m-2">
<p>
<button class="btn btn-info" type="button"
data-toggle="collapse"
data-target="#collapse"
aria-expanded="false"
aria-controls="collapse">
${question.question}
</button>
</p>
</div>
<div class="m-2">
<div class="collapse" id="collapse">
<div class="card card-body border-info">
${question.answer}
</div>
</div>
</div>
<#else>
There is no questions.
</#list>
</div>
</div>
You need to change "collapse" to $question.id in 2 line:
<button ... data-target="#collapse"
and
<div ... id="collapse">(id not class).
I dont familiar with freemarker, so cant provide full fix.
Background:The website I am working on there are several different filters that people can use in order to show only the data they need; basic stuff. To make things look nice since I am not css inclined, I am using bootstrap to make things look clean.
Problem: I can't seem to get the buttons to line up with the right side of the fields. I can make them pull to the very edge of the field set, I can make push/pull them to the general area they should be in, but I can't get them to line up nicely and stay that way regardless of how you rearrange the size of the page window.
JSFiddle: https://jsfiddle.net/v3cugpx1/1/
<div class="form-group col-md-12">
<div class="input-group-btn">
<div class="pull-right">
<a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
<button class="btn btn-primary" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
Any help would be greatly appreciated.
Cheers!
It's important to match the nesting of columns because of the gutters in the grid, which the other answers remark upon. If you start with the other two answers, it's easy enough to modify them to add the margin between the buttons you're looking for:
<div class="form-group col-md-12">
<div class="col-md-12">
<div class="btn-toolbar col-md-12">
<a class="btn btn-info pull-right" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
<button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
The only really real addition is the btn-toolbar class to the inner-most div. And for posterity here's the Fiddle.
Don't use .input-group instead use col-sm-* classes to give extra padding multiple times, so that you can match the padding available on all other form elements. And then arrange the buttons inside of it, like:
<div class="form-group col-md-12"> <!-- Extra Padding (15px) -->
<div class="col-xs-12"> <!-- Extra Padding (15px) -->
<div class="col-xs-12"> <!-- Extra Padding (15px) -->
<a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left pull-left"></i> Clear</a>
<button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
Have a look at the updated Fiddle.
Hope this helps!
You are using wrapper cols for the inputs. I included one "col-md-12" before the button's "form-group" and another one after it. This way your code stay consistent and you achieve what you want.
<div class="col-md-12"> <----
<div class="form-group col-md-12">
<div class="col-md-12"> <----
<div class="input-group-btn">
Updated Fiddle
This question already has answers here:
Bootstrap: Collapse other sections when one is expanded
(13 answers)
Closed 6 years ago.
I am trying to find a way to implement bootstrap buttons which will show collapsible content without allowing the content of more than one button to show at any time.
I can get the buttons to trigger collapsible content but I cant find a way to stop them both being un-collapsed at the same time:
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Button 2
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Here is some example text
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-block">
Here is some example text, too
</div>
</div>
js fiddle demo here: https://jsfiddle.net/hzs68sne/
What you want to achieve looks like the collapse accordion.
To do this with your current setup, you can wrap the entire group in a single .panel div and make use of the data-parent attribute.
<div id="container">
<div class="panel">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" data-parent="#container">
Button 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" data-parent="#container">
Button 2
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Here is some example text
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-block">
Here is some example text, too
</div>
</div>
</div>
</div>
JSFiddle demo: https://jsfiddle.net/gbfb32z9/
Keep in mind:
The .panel div needs to be a direct child of the data-parent element.
The .collapse elements are direct children of a .panel element.
Hi guys using bootstrap and struggling to understand how to get a my main div box to have other divs inside of it
For example i am trying to make this:
This big box is just a div.
What i got so far:
<div class="container">
<div class="MainBox">
<div class="Leftbox">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="CentreBox">
</div>
</div>
</div>
I am not so sure how to do the boxes on the right hand side , i have tried different methods but it mucks up the whole div. Any help would be great. Thanks xx
You really want to look into Bootstraps grid system, as suggested by #Sringland in his comments, found here: Bootstrap Docs
The grid system creates 12 columns on any screen size (from xtra small - large), and can be defined as a class by col-(screensize)-(span). For example - if you want 12 columns spanning a large sized screen add the class: col-lg-12 to your div.
These columns are "embeddable", and will create a new 12-column layout inside one another. So if you want to split up an 8 column layout into two equal sized containers within it, it would like like this:
<div class="col-md-8">
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</div>
So remember, each time you "open" a column regardless of its size, that container will have another 12 columns to work with.
After all this is said, your layout will look something like this:
<div class="row height-500px">
<div class="container">
<div class="col-md-3 border height-500px">
<!-- Content goes here -->
</div>
<div class="col-md-7 border height-500px">
<!-- CONTENT GOES HERE -->
</div>
<div class="col-md-2 height-500px">
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
</div>
</div>
</div>
Here is a link to a Bootply to see it in action. Please see the bootply for a better understanding of the height classes and border classes. I created these simply to represent your layout.
Now, gutters (the space between the columns) are not working as intended, and I hope someone help there. But, hopefully this will be a good starting point for you.
Jus try using bootstrap grid system. I used buttons for the right column, but you can use whatever you need.
<div class="container MainBox border-on">
<div class="col-md-2 left border-on">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="col-md-8 CentreBox border-on">
<h3>
center
</h3>
</div>
<div class="col-md-2 right border-on">
<h3>
right
</h3>
<div class="col-md-12">
One
</div>
<div class="col-md-12">
Two
</div>
<div class="col-md-12">
Three
</div>
<div class="col-md-12">
Four
</div>
</div>
</div>
I'm trying to learn some bootstrap 3, and i'm trying to add a group of two buttons to a panel heading for those Collapse-Accordion's.
I want to be able to line the title of the panel to the left, and the btn-group lined to the right.
I have tried to add pull-left for the title, and pull-right for the button group, but this will not result in something pretty...
Adding for example: style="margin-left:200px;" to the <span>, will work, but when i add more panels, with different names, there will be another number of px for that margin...
Here is a link to my JSfiddle.
Where i go wrong is probably somewhere here: Not sure if i can use the <span> within the <h4>, and for this purpose of mine?
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Click me...
</a>
<span class="btn-group">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</span>
</h4>
</div>
pls try the below code, and here is the fiddle
<div class="panel-heading">
<h4 class="panel-title">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Click me...
</a>
</div>
<div class="col-md-6 text-right">
<span class="btn-group">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</span>
</div>
</div>
</div>
</h4>
</div>
if you change some of the css rules for the panel-head and btn-group it work.
.btn-group{
position: absolute;
right: 8px;
top: 8px;
}
.panel-heading{
position: relative;
}
http://jsfiddle.net/q8qCW/1/
I would suggest, not to add these rules to every panel-head and btn-group ^^. I also change the size of the btn-group to.
btn-group-xs
It is not a very dynamic way if doing it, but gets the job done.
Other sizes of btn-groups are possible, but require different top and right css rules.
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Click me...
</a>
<span class="btn-group col-md-offset-9">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</span>
Hi i have forked your code to js fiddle and added some class and media queries(for idea), please try to improve media queries as well.
you can find it here
How about using a list-inline..
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<span class="btn-group pull-right">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</span>
<h4>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Click me...
</a>
</h4>
</li>
</ul>
</div>
</div>
</div>
Demo: http://bootply.com/92157