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>
Related
I am trying to implement an Accordion button on my webpage using the HTML code given below. I am currently implementing this on a very basic scale without using any javascript code with this accordion snippet.
The button just clicks and does nothing and the basic collapsing doesn't take place nor does the accordion functionality is implemented.
Kindly help me in implementing this!
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-primary" type="button"
data toggle="collapse" data-target="#collapseButtonExample" aria-
expanded="true" aria-controls="collapseExample">Question
</button>
</div>
<div class="collapse" id="collapseButtonExample" >
<div class="card card-body">
<p></p>
</div>
</div>
</div>
Something like this will work if there is single element
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-primary" type="button" #btn (click)="btn.toggle = !btn.toggle"
>Question
</button>
</div>
<div [ngClass]="{collapse:!btn.toggle}" >
<div class="card card-body">
<p>1# something</p>
</div>
</div>
</div>
if you have many element this trick will work
<div class="panel panel-default" *ngFor="let i of [1,2,3,4]">
<div class="panel-heading">
<button class="btn btn-primary" type="button" #btn (click)="btn.toggle = !btn.toggle"
>Question
</button>
</div>
<div [ngClass]="{collapse:!btn.toggle}" >
<div class="card card-body">
<p>{{i}}# something</p>
</div>
</div>
</div>
stackblitz demo 🚀🚀
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.
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
Ok so I'm designing a Bootstrap accordion heading panel with multiple elements in it:
A big button
Some (shortish) text/title that could be multiple lines long
A small button group on the left
In theory that's working quite fine, at least if the title is not too long for the container. If it starts spilling into a second or third line, the whole concept falls apart. See my fiddle here.
What I want is that all elements are always 1. Next to each other, 2. Vertically centered.
So let me try and draw how it should look with bigger titles:
-----------------------------------------------------
| |
| ------- Text that spillls over ---------- |
| | BTN | into the next line and | | | | |
| ------- beyond! ---------- |
| |
-----------------------------------------------------
So basically, each of the three elements has it's well defined space and is vertically centered inside that.
How do I achieve this?
You can do this very simple with bootstrap grid system, read some information here: http://getbootstrap.com/css/
It should be something like:
<div class="row">
<div class="col-md-2">left content</div>
<div class="col-md-8">middle content</div>
<div class="col-md-2">right content</div>
</div>
You should read bootstrap documentation, there are more examples and more "how to", so you can find what you exactly need
Just some basics:
bootstrap grid has 12 "spaces" for columns. In example above, I created 3-column layout with middle column larger than the other (you can see 2-8-2 - and you can play wiht 3-6-3 or similar - sum must be always 12)
the "md" in col-md-... means that this column is visible only on Medium devices Desktops (≥992px), you can use "xs", or other for smaller device - it depends on what you need
Here is something that maybe what you're looking for, with vertical centering.
Here is a fiddle
And the code :
Css:
.cell {
display: table-cell;
vertical-align: middle;
float: none;
}
HTML:
<div id="panel-1" class="panel panel-default">
<div class="panel-heading clearfix">
<div class="row">
<div class="col-xs-2 cell">
<button type="button" class="btn btn-default some-button">button!</button>
</div>
<div class="col-xs-8 cell">
<h4 class="panel-title pull-left heading">
<a>Short</a>
</h4>
</div>
<div class="col-xs-2 cell" >
<div class="btn-group">
<button type="button" class="btn btn-default">a</button>
<button type="button" class="btn btn-default">b</button>
<button type="button" class="btn btn-default">c</button>
</div>
</div>
</div>
</div>
<div id="panel-2" class="panel panel-default">
<div class="panel-heading clearfix">
<div class="row">
<div class="col-xs-2 cell">
<button type="button" class="btn btn-default some-button">button!</button>
</div>
<div class="col-xs-8 cell">
<h4 class="panel-title pull-left heading">
<a>Some string that's really longish and stuff hehe right? (looooong long long)</a>
</h4>
</div>
<div class="col-xs-2 cell">
<div class="btn-group">
<button type="button" class="btn btn-default">a</button>
<button type="button" class="btn btn-default">b</button>
<button type="button" class="btn btn-default">c</button>
</div>
</div>
</div>
</div>
</div>
</div>
Why not put your button and button group into your h4 element? Also take the pull left off your div elements. Here is a fiddle with everything line up. I dont know if this is what you were looking for but I added a center align to the css class and removed the pull left from the panel title elements. I also threw the buttons into the header element
<h4 class="panel-title heading">
<div class="pull-left">
<button type="button" class="btn btn-default some-button">
button!
</button>
</div>
<a>
Some string (short)
</a>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default">a</button>
<button type="button" class="btn btn-default">b</button>
<button type="button" class="btn btn-default">c</button>
</div>
</h4>
I have two element in my HTML code. One, is a text:"Machine" and the other is a button which need to be in the right panel (but in the sane line..).
<div class="panel panel-default">
<div class="panel-heading" style="align: center"> <strong class="">Machine</strong>
<div ng-show="app[11]">
<button style="float: right;" class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
For some reason, the button appear beneath the text, and not beside it.
What can be the reason?
Edit:
I change it to the next code, after the answer suggestion:
<div class="panel panel-default">
<div class="panel-heading" style="align: center;"> <strong class="">Machine</strong>
<div style="float: right;" ng-show="app[11]">
<button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
It's still gives me the same result:
I close the first <div> later.
you didn't close your first div.
<div class="panel panel-default">
<div class="panel-heading" style="align: center; float:right;">
<strong class="">Machine</strong>
</div>
<div style="float:right;" ng-show="app[11]">
<button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
and now you can change line-height of the text div to have a better position beside your button.
Don't float anything. dive both divs inside panel-default display:inline-block; vertical-align:middle; and it will center them on the same horizontal line.
.panel-default{
> *{ display:inline-block; vertical-align:middle; }
}
You could put the <button> along with its surrounding <div> inside the <div class="panel-heading"> and move the float property from <button> to <div>, like so:
<div class="panel panel-default">
<div class="panel-heading" style="align: center;"> <strong class="">Machine</strong>
<div style="float: right;" ng-show="app[11]">
<button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
</div>
http://jsfiddle.net/n6tp90s7/
Your code was missing one closing </div>, so I am not sure if that was your intention from the start.
<div id="box">Machine<div id="button">delete</div></div>
and css:
#box {width:200px; height:40px; line-height:40px; padding-left:5px;}
#button {width:70px; height:36px; float:right; margin:2px 5px; background:#ff0000;}
with this, you'll get the result you want. And you can add the codes you didn't write...