I am working with a legacy bootstrap tool for my company. An issue I am having is using panels from bootstrap 3 in the legacy version.
While this is working to an extent, there are some span issues that are coming up.
I have a container with a panel on the page which is inside of a span12 (full length of the page). Within the panel, I am trying to add another panel that is full width of it. Normally I would say, span12 and it would adjust it to what is necessary but in this case, its causing it to hang over.
Here is a sample of the HTML being used:
<div id="main" class="container">
<div class="panel panel-primary custom-panel">
<div class="panel-heading ph"> <span class="panel-title"><i class="icon-bullhorn"></i> Request Communication</span><button name="addComment" commenttype="request" type="button" class="btn btn-mini pull-right"><i class="icon-plus"></i> Add Comment</button></div>
<div class="panel-body well">
<div id="requestComments" class="tab-pane active">
<span name="messages">
<div name="parent_32" class="row parentMessage">
<div class="span12">
<div class="panel panel-default">
<div class="panel-heading">
<small><a target="_BLANK" href="#">Name</a> <span class="text-muted">commented <a title="Timestamp: 2015-08-24 11:20 UTC" data-toggle="tooltip" class="deco-none">2 days ago</a></span></small>
<div class="btn-group pull-right">
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-mini dropdown-toggle" type="button"><i class="icon-cog"></i></button>
<ul class="dropdown-menu">
<li><a messageid="32" name="deleteParent"><i class="icon-trash"></i> Delete Message</a></li>
</ul>
</div>
</div>
<div class="panel-body"><small>dgdfgdfg</small></div>
</div>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/j2j6gnb1/
How can I go about making the inner panel, the full width of its parent (with the same padding it has on the left)?
Remove the margins being set on elements .parentMessage and .span and set width: 100% on the .span12 element.
.parentMessage {
margin: 0;
}
.span12 {
width: 100%;
margin: 0;
}
Fiddle
Related
Im working on a section on a webpage, using bootstrap but cant keep filter on same line. Ive tried a few ways, currently trying columns, tried divs inline, still not lining up correctly.
div class="col-lg-12">
<div class="row">
<div class="col-lg-10">
<div class="rev-search" style="overflow: hidden; padding-right:.5em;" >
<input type="text" style="width: 80%;" id="rev-search" placeholder="Search" autofocus="" />
<span><i class="fa fa-search"></i></span>
</div>
</div>
<div class="col-lg-2">
<div class="dropdown pull-right">
<button class="btn btn-default dropdown-toggle" style="float: right;" type="button" id="group_filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><?php echo $text_filter_group;?><span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="group_filter">
<?php
foreach ($customer_groups as $group){
echo '<li>'.$group['name'].'</li>';
}
?>
</ul>
</div>
</div>
</div>
I believe it's because there is padding on the col-lg-10 and col-lg-2. Add this to your css to remove the padding which is pushing your drop down to the next row.
.col-lg-10, .col-lg-2 {
padding: 0;
}
Following the Bootstrap documentation, please use lg (for larger desktops).
Also try wrapping your row in a fluid container.
<div class="container-fluid">
<div class="row">
</div>
</div>
Here's my fiddle to demonstrate what I have now:
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel Title</h4>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default">Button A</button>
<button type="button" class="btn btn-default">Button B</button>
<button type="button" class="btn btn-default">Button C</button>
</div>
</div>
<div class="panel-body">
Panel content.
</div>
</div>
What I want to happen is for the buttons to have the full-height of the panel (such that there is no space, top and bottom) and to have it move to the edge (such that there is no space on the right side).
I'm thinking of using negative margins and setting the height of the buttons, but that seems hacky? Is there no better way, a class, maybe, that I can use?
Check out the fiddle
There is a padding on the panel-heading that you need to remove.
.option-button {
height:100%;
}
.media-object {
height: 50;
}
.panel-heading {
padding: 0;
}
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">Panel Title</h4>
<div class="btn-group pull-right media-object">
Button A
Button B
Button C
</div>
</div>
<div class="panel-body">
Panel content.
</div>
</div>
i have the following html code for the bootstrap collapse
<div class="panel-group" id="accordion" style="margin-left:890px;width:444px;padding:0px;border:0px solid black;">
<div class="panel panel-default">
<div class="panel-heading" style="padding:0px;">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:442px;margin:0px;" data-parent="#accordion">
<span style="float:left;">Month Calendar</span>
<span class="glyphicon glyphicon-menu-down" style="float:right"></span>
</button>
</div>
<div id="demo" class="panel-collapse collapse in" style="border:0px solid black;padding:0px;">
<div class="panel-body" style="padding:0px;">
#Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
</div>
</div>
</div>
</div>
this has a dev express control. when the page loads the navigator (this is a calendar) displays expanded and the context underneath it moves. So to prevent this i need to make the calendar overflow over the content. How do i make this calendar control overflow over the other?
here is an image to show whats happening
You should make the panel-default position: relative so that it's descendants are bound to it and then make the panel-collapse position: absolute to prevent it from affecting the rest of the flow.
<div class="panel-group" id="accordion" style="margin-left:890px;width:444px;padding:0px;border:0px solid black;position:relative">
<div class="panel panel-default">
<div class="panel-heading" style="padding:0px;">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:442px;margin:0px;" data-parent="#accordion">
<span style="float:left;">Month Calendar</span>
<span class="glyphicon glyphicon-menu-down" style="float:right"></span>
</button>
</div>
<div id="demo" class="panel-collapse collapse in" style="border:0px solid black;padding:0px;position:absolute;top:100%;">
<div class="panel-body" style="padding:0px;">
#Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
</div>
</div>
</div>
</div>
Note: You are using alot of inline styles, it is best to keep as much of styling as possible in css.
On this page: (link removed)
I'm starting to build a tumblr theme, and I have decided to build it using bootstrap. If you click the little I info button in the left corner, a div comes down with a user picture and description. The user picture and description appear as I want them to, but they are off center. I'd like them to be centered. I've tried < center >, using a fluid width container, etc with no avail. I also checked and bootstrap.css and the bootstrap.min.js are properly linked to the page.
Any help with this would be GREAT!
My code:
<div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;">
<center>
<div class="container-fluid" style="height:auto;">
<div class="row">
<div class="col-md-2" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div>
<div class="col-xs-12 col-md-8" style="background-color:blue; margin-top:3%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div>
<div class="container-fluid" style="height:auto; margin-bottom:2%;">
<center>
<div class="container-fluid">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
<br/>
<div class="btn-group" role="group" aria-label="..."> Ask
Archive
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div><!-- /.col-lg-6 --></center>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
{block:ifShowInfoButton}
<i class="fa fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i>
{/block:ifShowInfoButton}
Change the col on the picture from md-2 to md-4.
Or change the col on the text from md-8 to md-10 (better)!
It works on a 12 grid system and currently it is only using 10 columns out of 12, which is why it appears to align to the left :)
You can also use offset.
papakia's answer is correct however you could also add an empty column in front of your image column that is col-md-2 this will sometimes help not throw off the scale of other items if they are already tuned to your liking.
I have a toolbar. When I click on it I have many panels appear on the screen as drop-down.
In the tablet view I want all the panels to collapse and When I click on the panel-heading I want the panel-body to open.
I am poor in css can anyone help me.
Here is the code.
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
<div class="panel-body">
<div class="panel panel-info">
<div class="panel-heading">
<a >First heading</a>
</div>
<div class="panel-body">
<ul class="">
<li><a >item1</a></li>
<li><a >item2</a></li>
</ul>
</div>
</div>
</div>
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
<div class="panel-body">
<div class="panel panel-info">
<div class="panel-heading">
<a>second heading</a>
</div>
<div class="panel-body">
<ul class="">
<li><a >item4</a></li>
<li><a >item3</a></li>
</ul>
</div>
</div>
</div>
As you are using bootstrap accordion. You need to remove class in from your panel-collapse div.
Instead of
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
Write
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse" style="height: auto;">
in is the class, which makes the content panel visible. So if you want all the panels collapse, remove it form every panel container. If you want only one panel to be visible while others should be collapsed, then put it in that panel container only.
Let me know if this helps. :-)
Bootstrap has specialized classes and data-* attributes for these types of tasks.
1) First, in order to make your panel act as an accordion, you need to give:
<a data-toggle="collapse" data-target="#panel1">Heading</a>
where panel1 is the id of your panel-body.
2) Next, since you want your panel-body to be collapsed at first, give the collapse class next to your panel-body:
<div id="panel1" class="panel-body collapse">
Have a look at the demo here to make things clear.
<div class="panel-body columnBody" id="accordion2">
<div class="panel panel-info">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" data-target=".Empty">{{item.key}}</a>
<button class="btn navbar-btn displayMobile" data-parent="#accordion2" data-target=".view{{$index}}"><span class="caret"></span></button>
</div>
<div class="panel-body itemList view{{$index}}">
<ul style="margin-bottom: 0px;">
<li ng-repeat="ke in item.values">{{ke}}</li>
</ul>
</div>
</div>
</div>
css code:
#media screen and (min-width: 850px){
.displayMobile{
display: none;
}
.itemList{
display: none;
}
}