I have a collapsible panel, and I wish to change the image (from + to -). I found a few solutions online, and the one I wish to implement is through css. However, for some, reason, something is wrong with my css. Can someone tell me what exactly?
HTML
<div class="panel panel-default at-panel">
<div class="panel-heading at-panel-heading">Panel<img class="collapsed at-collapse-button" data-toggle="collapse" data-target="#panelBodyNA"/></div>
<div id="panelBodyNA" class="panel-body at-panel-body collapse">
<p> Test</p>
</div>
</div>
CSS
img.at-collapse-button.collapsed:before{
content:url("../img/plus.png");
}
img.at-collapse-button:before{
content:url("../img/minus.png");
}
You cannot use :before pseudo element with an image element.
You have to follow this approach:
<div class="panel panel-default at-panel">
<div class="panel-heading at-panel-heading collapsed at-collapse-button" data-toggle="collapse" data-target="#panelBodyNA">Panel</div>
<div id="panelBodyNA" class="panel-body at-panel-body collapse">
<p> Test</p>
</div>
</div>
You css then:
.at-collapse-button.collapsed:before{
content:url("../img/plus.png");
}
.at-collapse-button:before{
content:url("../img/minus.png");
}
Or any other css you would like to have because content url will not bring you an image.
But you can manipulate your pseudo element as you would like ex:
.at-collapse-button.collapsed:before{
position: relative;
width: 20px;
height: 20px;
background-image:url("../img/plus.png");
}
Related
I have a bootstrap div with "row" class, and 2 divs inside acting as columns, A and B.
A contains a span with an icon. B contains a panel which height is variable, even after it loads, the user can add things to it and its height can still grow or become smaller.
I need to vertically center my span, taking the panel's height as reference.
here's my code:
<div class="row">
<div class="col-lg-3"><span class="icon-clipboard icon-agenda-item"></span></div>
<div class="col-lg-9">
<div class="panel panel-default deletable-panel">
<div class="panel-heading">
heading content
</div>
<div class="panel-body">
body content
</div>
</div>
</div>
</div>
The first part is how it is displayed now, and the second part is how I want it to be displayed. As you can see, the "content" is editable inline, so if the panel grows, the span needs to adjust as well.
thank you very much!
EDIT 1
I must add that I am using IE.
I tried the first suggestion and this is the result:
I ended up using this:
<div class="row">
<div class="col-lg-1 v-align"><span class="icon-clipboard icon-agenda-item"></span></div>
<div class="col-lg-10 v-align">
<div class="panel panel-default deletable-panel">
<div class="panel-heading">
heading content
</div>
<div class="panel-body">
body content
</div>
</div>
</div>
</div>
where:
.v-align {
float: none;
display: inline-block;
vertical-align: middle;
}
Please note, that both columns added, equals 11, instead of 12. There was the key! I don't know why, but if I left it 1 and 11 (resulting in 12 in total) it was displayed as mi edit image.
Thank you!
Yes, You can do it, But you have to remove some bootstrap class and add two of your own class and you can set it easily. Here is the code
.content{
clear:both;
display:block;
}
.a{
display:inlin-block;
vertical-align:middle;
width:20%;
}
.b{
display:inlin-block;
vertical-align:middle;
width:80%;
}
<div class="row">
<div class="col-lg-12">
<div class="content">
<div class="a">
<span class="icon-clipboard icon-agenda-item"></span>
</div>
<div class="b">
<div class="panel panel-default deletable-panel">
<div class="panel-heading">
heading content
</div>
<div class="panel-body">
body content
</div>
</div>
</div>
</div>
</div>
</div>
I hope This will help you
Regards,
Sarbasish
Using bootstrap, how can horizontally align components within a panel-heading? In order to have: title : aligned to left, btn1 : centered, btn2 : aligned to the right.
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">title</h3>
<button class="btn">btn1</button>
<button class="btn">btn2</button>
</div>
<div class="panel-body">
text
</div>
</div>
</div>
I have tried to create a bootstrap class "row" and columns, but the row goes outside the panel-heading since the panel is inside another col-md-6:
A right way to go with .row and .col is like this
<div class="panel panel-default container-fluid">
<div class="panel-heading row">
<div class="col-xs-4"><h3 class="panel-title">title</h3></div>
<div class="col-xs-4 text-center"><button class="btn">btn1</button></div>
<div class="col-xs-4"><button class="btn pull-right">btn2</button></div>
</div>
<div class="panel-body">
text
</div>
</div>
http://jsfiddle.net/j7u53eav/3
Using Ch.Idea's answer as a jumping-off point, you can add a row class to your panel-heading. However, you do not need to make the panel a container-fluid.
Since the Bootstrap row class adds negative margins, you just need to remove them. Assuming every time a row is added to a panel-heading you would want this behaviour, it's as simple as adding some CSS:
.panel-heading.row {
margin: 0
}
Since columns already have padding, you can take it further by removing the left and right from the row as well:
.panel-heading.row {
margin: 0;
padding-left: 0;
padding-right: 0;
}
And for the sake of thoroughness, a modified copy of Ch.Idea's work:
<div class="panel panel-default">
<div class="panel-heading row">
<div class="col-xs-4"><h3 class="panel-title">title</h3></div>
<div class="col-xs-4 text-center"><button class="btn">btn1</button></div>
<div class="col-xs-4"><button class="btn pull-right">btn2</button></div>
</div>
<div class="panel-body">
text
</div>
<table class="table">
<!-- insert rest of table here -->
</table>
</div>
And a modified jsfiddle showing full-width tables:
http://jsfiddle.net/my7axd1b/3/
I'm trying to have 4 cols inside a row with equal margins but i did not get the desired look
here is my html code
<div class="panel panel-default">
<div class="panel-heading">Account Summary</div>
<div class="panel-body">
<div class="row center-block text-center summary_boxes">
<div class="col-sm-3">2500</div>
<div class="col-sm-3">1300</div>
<div class="col-sm-3">1000</div>
<div class="col-sm-3">1000</div>
</div>
</div>
css code
.summary_boxes div
{
background-color:#eee;
border: 1px solid #DDDDDD;
border-radius:3px;
}
and this is the result
The issue is that Bootstrap uses padding for columns and columns themselves shouldn't have additional styles applied directly to them.
What you should do is make child elements of the columns and give those the style you want, then you will have the "margin" you are looking for.
<div class="panel panel-default">
<div class="panel-heading">Account Summary</div>
<div class="panel-body">
<div class="row center-block text-center summary_boxes">
<div class="col-sm-3"><span>2500</span></div>
<div class="col-sm-3"><span>1300</span></div>
<div class="col-sm-3"><span>1000</span></div>
<div class="col-sm-3"><span>1000</span></div>
</div>
</div>
</div>
With the style:
.col-sm-3 > span {
background: red;
display: block;
}
Here is a working fiddle, you might have to make the output window wider to correctly see the result depending on your screen resolution http://jsfiddle.net/LysqB/
I am just jumping into React, as my first project I wanted to convert a Bootstrap project into React and Bootstrap.
What I had was:
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-xs-12">
<div class="row">
<div class="btn heading_button col-xs-12" data-toggle="collapse" href="#collapseTwo">
<h4> Header </h4>
</div>
</div>
<div class="row">
<div id="collapseTwo">
<span>
Content
</span>
</div>
</div>
</div>
</div>
</div>
It was an expanding header that look like this:
My React version so far looks like
var Campaign_Setup = React.createClass({
render: function() {
// transferPropsTo() is smart enough to merge classes provided
// to this component.
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-8 col-xs-12">
<div className="row">
<div className="btn heading_button col-xs-12" data-toggle="collapse" href="#collapseTwo">
<h4> Header</h4>
</div>
</div>
<div class="row">
<div id="collapseTwo">
<span> Content </span>
</div>
</div>
</div>
</div>
</div>
);
}
});
React.renderComponent(<Campaign_Setup />, document.getElementById('Campaign_Settings'));
But it turns out
The header is supposed to take up the whole width, but the React version is squeezing it, and the arrow icon, created in CSS with:
.heading_button:before {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: #999999; /* adjust as needed */
margin-top: 10px;
}
doesn't render. What is wrong with this?
It's worth noting that when looking in the inspector. The container, and rows fill the width, but the button/header does not.
You forgot to convert one class into className for Content.
There should be a warning in your console.
After my lack of success with my previous post, I followed a suggestion and used Bootstrap's Dashboard example as a base, unfortunately with no success.
The aim is a page with a sidebar (col-md-3) that contains panels with all unsorted students (in small panels each), and a main area (col-md-9) that contains different groups (larger panels), in which the students can be dragged and dropped with JQeryUI Sortable. This screenshot shows the concept.
This works fine, except for one problem: while the sidebar does not have a horizontal scrollbar (even when selecting "overflow-x: auto"), it seems to become bigger when trying to drag a panel out from it. This screenshot at the moment when I am dragging the fourt panel from above shows the problem.
Here is a streamlined version of the code:
CSS:
<link href="/static/css/bootstrap.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
padding: 20px;
overflow-y: auto;
}
}
</style>
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-3 sidebar">
<div class="unsortedList panel panel-default">
<div class="panel-heading">
Not assigned
</div>
<div class="panel-body">
<ul id="0" class="list-unstyled connectedLists">
<li class="panel panel-primary innerpanel" id="student_1_id">
<input type="hidden" name="student_1_id" value="0">
<div class="panel-body">
Student 1 Name
</div>
</li>
<li class="panel panel-primary innerpanel" id="student_2_id">
<input type="hidden" name="student_2_id" value="0">
<div class="panel-body">
Student 2 Name
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main">
<div class="col-md-4 col-sm-4 col-xs-5" id="panel_1">
<div class="panel panel-default outerpanel">
<div class="panel-heading">
Group 1
</div>
<div class="panel-body">
<ul id="1" class="list-unstyled connectedLists">
<li class="panel panel-primary innerpanel" id="student_3_id">
<input type="hidden" name="student_3_id" value="1">
<div class="panel-body">
Student 3 Name
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-5" id="panel_2">
<div class="panel panel-default outerpanel">
<div class="panel-heading">
Group 2
</div>
<div class="panel-body">
<ul id="2" class="list-unstyled connectedLists">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
The (functioning and simplified) Javascript code:
$(document).ready(function(){
jQuery(function(event, ui) {
$('.connectedLists').sortable({
connectWith: ".connectedLists",
stop: function(event, ui) {
item = ui.item;
var newList = item.closest("ul");
var group = newList.attr('id');
var formField = item.find("input");
formField.val(group);
},
});
});
};
Is there a way I can stop the sidebar from expanding when dragging? Thanks for looking through this mess!
Ok, this is a tricky problem but there's a little bit of 'hack' that we can do. It's a simple method.
To summarize your issue, you need overflow-y:scroll in your container holding the draggable, while you keep overflow-x:hidden. But, when you drag, the element still spreads across the container like as if the overflow-x had no effect. So here's what we do:
1) We describe the overflow-y:scroll property on DOM:
$(document).ready(function(){
$('.sidebar').css('overflow','scroll');
});
We can't put this directly on the CSS because we are going to be changing this value later and the CSS default property overrides it.
2)
$('.panel-body').mousedown(function(){
$('.sidebar').css('overflow-y','');
});
This means, when we select a draggable element (while the mouse is still down), we will hide the vertical scroll, that means both overflow won't be true. This is the important part, we know that removing overflow-y totally solves the issue but we need a vertical scrollbar. So we hide it only when an element is selected.
3)
$('.panel-body').mouseup(function(){
$('.sidebar').css('overflow-y','scroll');
});
Once we have placed the draggable element in the place we wanted it to be, we put our vertical-scrollbar back.
That's it, this may not be a smooth solution since it's only a workaround.
You can have a look at how it works here:
DEMO (updated)