I'm trying to make collapsible widgets in a side panel on my page. For the most part it works fine. I'm able to set the height of child div's to 0px with a transition, and they disappear.
However, I've found that a textarea will not collapse completely. When I set the height of the textarea to 0px it seems to transition like the other div's, but it still appears to occupy more space then 0px high.
The html is like this:
<div class="container">
<div class="heading" onclick="toggleSiblings(this)">heading</div>
<textarea class="collapsible" placeholder="type in here..."></textarea>
</div>
<div class="container">
<div class="heading" onclick="toggleSiblings(this)">heading</div>
<div class="collapsible"></div>
</div>
toggleSibblings() loops through all the siblings with a class of "collapsible" and toggles the "collapsed" class on them. The "collapsed" class just sets the height to 0px
Here's a jsfiddle to show my problem: http://jsfiddle.net/447n50cy/
Can anyone tell my why the textarea is occupying the extra space?
Putting float:left; or display:block; along with transitioning to padding:0; will cause it to collapse. As an inline-block element it has issues collapsing properly.
Textarea have by default margin and padding:
You could reset the textarea:
textarea {
margin:0;
padding:0;
outline:0;
}
Add this to your fiddle. The problem is that you probably want some padding when people enter something in the textarea. You could easily use jQuery to add and remove classes.
Related
I'm using Bootstrap 3 and I want to center a div within a cell in the container row. when I looked I only found topics about centering the div in the container which is not what I need. I want to know how to center the div (both vertically and horizontally) in the particular cell that it is. The reason is that on the same row I have other divs of bigger height and at the end of the row I want to put a button which is relatively small compared to the other divs and hence I want to center it to make it look pretty.
What I've tried until now is to go into the bootstrap.min.css file and change the following:
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
padding:8px;
line-height:1.42857143;
vertical-align:top;
border-top:1px solid #ddd}
to:
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
padding:8px;
line-height:1.42857143;
vertical-align:middle;
border-top:1px solid #ddd}
Which didn't seem to change anything so I'm guessing I'm not on the right track.
For center-ing a div horizontally, you can put in CSS file:
margin-left: auto; margin-right:auto;
For vertical alignment:
margin-top: auto; margin-bottom: auto;
Posting your HTML code would be helpful btw.
For both vertical and horizontal centering, this solution worked for me: http://jsfiddle.net/hg8Sn/
The only downside of this is that as I am using bootstrap, when the window gets smaller the button would be aligned to the left of the div. I fixed this by making the button take up the whole width of the div so I set col-xs and col-md to 12:
<div id="addchart" class="col-md-6 col-lg-6 col-xs-12 col-sm-12 text-center">
<button id="add-chart-btn" class="btn btn-lg btn-default">Add Chart</button>
</div>
For me, this only centers the button and it doesn't stretch it to the width of the container. It could be because I am using a specific bootstrap theme but either way if someone would want to fix this then they can set a fixed width to the button.
Check and see you are using bootstrap.min.css and not bootstrap.css.
Maybe you might be linking the wrong css files.
I didn't know what would be the best title for my question...
Well, I'll show what I want to do with a simple picture:
The issue:
I have my content centered, lets say it's 980px width.
Now, my header will have a logo and a menu.
BUT, I want my header to
use only a left side of the top, like 50% of the content width and
then stretch to the left side of the viewport. I know this is
possible using javascript and calculate the left offset of the
content and set the dynamic width div with it's left offset.
Is it the best way? I believe there should be another way, but I can't think of one. Hope you guys have a better idea than mine, since mine slows down the perfomance of the site when I resize the window.
Maybe have 2 divs; one in the background and one to contain the logo?
http://jsfiddle.net/kUKyp/1/
I believe what you are after is margin:auto in CSS. It's very simple:
Put your content div on the page, with a fixed width of say 980px as you wanted and set margin:auto.
Put your logo and menu div inside content.
Here is a good example of this in action:
http://bluerobot.com/web/css/center1.html
The CSS code from the above page:
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
And the markup:
<body>
<div id="Content"></div>
</body>
Using twitter bootstraps fluid layouts
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6"> (6 for half of the width, number can be changed 1-12) your logo and menu
</div>
your content
</div>
</div>
I'm currently grabbing #rightDesc's height in jQuery and using it to decide #rightHistory's height, both of which are divs.
$('#rightHistory').height($('#rightMiddleCenter').innerHeight() - $('#rightDesc').outerHeight() - $('#rightDescToggle').outerHeight());
The layout is below:
<div id="rightMiddleCenter">
<div id="rightDesc">
</div>
<div id="rightDescToggle">
Toggle Descriptions
</div>
<div id="rightHistory">
</div>
</div>
CSS:
#rightMiddleCenter{
float:left;
height:100%;
width:260px;
}
#rightDesc{
padding:0 0 10px;
}
#rightDescToggle{
padding:5px 5px 5px 0;
cursor:pointer;
}
#rightHistory{
}
I've now decided to make #rightDesc toggleable with slideToggle, but when it's hidden jQuery still returns its full height. This results in #rightHistory's height not changing and not taking up the amount of space it should.
Can anyone suggest a solution? Any help would be greatly appreciated.
When you use the visibility:hidden or display:noneway of hiding an element, the height and width of the element aren't changed, it just ain't visible.
edit:
I suggest using custom data attributes for your specific action and use those for your height-width usage. Or just build your calculation a bit different and check if an element is visible or not, that way substituting the height and width with 0.
I have a dialog box. When I call a show on it, everything in the box shows except for the contents in the header DIV and this only happens in firefox. It shows fine in both IE and chrome. I am doing nothing fancy in the dialog box any ideas?
Also it shows up when I hover over the buttons in the dialog box and when i inspect the dialog box but if I reload the page and click show again, the header is no longer there
CSS:
.formHeader {
padding:10px;
background-color:#f2f2f2;
font-size:14px;
font-weight:bold;
}
.dialogContainerBlock .formHeader{
background-color:#333;
color:#fff;
margin-left:-20px;
padding-right:30px;
margin-top:-40px;
position:fixed;
z-index:990;
width:inherit;
}
HTML:
<div class="dialogContainerBlock" style="width:100px; background:black;">
<div class="formHeader">Hi I work</div>
</div>
position:fixed is relative the body of the document, by using negative margins you are hiding the div outside the boundaries of the body.
The negative margin-top seems to be the most relevant style causing this. Watch out for negative margins for hiding things, because when you want to show them you will need to remember to undo them. You might create a class like "closed" and then have that contain the negative margins, then remove that class when you want to show the div.
I have a container div element that has overflow:hidden on it. Unfortunately this property is required on it because of the way the site is made.
Inside this div it's all the site content, including some tooltips. These tooltips are displayed with jQuery when you mouse over a link or something.
The problem is that some of these tooltips will display partially hidden because of the overflow thing above, because they are positioned outside the container div...
Is there any way to be able to show a specific element from inside this container, even if it's out of its boundaries? Maybe a javascript solution?
the html looks like this:
<div style="overflow:hidden; position:relative;">
the main content
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
try this:
<div style="position:relative;">
<div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
just place your main content to another div inside the main div and give provided css to hide the content if overflowing...
CSS works like a box, and sometimes, you have elements "flowing out". Setting overflow: hidden on the main element hides contents that flow out of this box.
Consider the following:
HTML
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
CSS
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}`
This outputs the following:
Note that the rest of the texts that overflow are hidden.
if overflow:hidden is to contain floats, then there are other ways that would allow tooltips to not be cut off. look foe clearfix:after