Why this div is overlaping the one before? - javascript

I dont really know how to ask it, dont know what error is this. Im very nob.
Im trying to order this divs, but the detalle_info is overlaping the one before (notice there white words).
Why is this happening? Thanks in advance.
http://tinyurl.com/cb8m37u

In #tabscontent your tabs2 and tabs3 DIVs are within the tabs1 DIV. Move them out of there and hopefully it should be fixed.

I see that the <div> with id namecost has a fixed height 30px, just remove it. Removing that height will make the div resizable depending on its content.

You are setting a height of 30px but the content doesn't fit in that height.

Make your blocks float, nothing more complicated.
Use float:left on your div.
By the way, you don't need a div per sentence.
(don't forget to put a clear:both at the end)

Related

Animating Width of Flexbox Parent Doesn't Affect Children?

I'm trying to use TweenLite to tween in the width of the blue sidebar down to zero. Unfortunately, the content of the blue sidebar breaks outside of the bounds of the parent.
This is something that really should never happen with Flexbox, but the child elements are also Flex containers so I'm sure what I'm doing wrong here. :( If anyone has any suggestions please let me know. Thanks!
Here a link tot he live demo: https://jimtheman.github.io/Flexbox-Push-Drawer-Example/#/
And here you can read the source code: https://github.com/JimTheMan/Flexbox-Push-Drawer-Example/tree/gh-pages
ps. Id like to get this working, but I'm wordering if there is a way to get the center green piece to stretch to fill the container as the blue column shrinks without using Flexbox.
Setting overflow:hidden on the `.whole-app-container' element solved my problem.

Contenteditable divs hide content after reloading

For text editing purposes I use contenteditable divs in a website. When I edit some text the div height is growing dynamically and all other elements on the webiste below shift downwards. That's what I want. Finally I store the content via Ajax on a server. So far everything is working fine.
The problem is when I reload the content from the server the height of the contenteditable divs does not grow automatically to show all it's content. Instead its height stay in the initial size.
BTW, this is true for all browsers.
Does anyone have some hints to overcome this issue ?
EDIT
This is the html and javascript contendeditable relevant code
<div class="editable" contentEditable=true onkeyup="autoGrowSave(this)" onblur="update(this)" ></div>
function autoGrowSave (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
I use above javascript function to auto grow the contenteditable. Actually I do not know if even I need it. The jsFiddle example from Abhitalks below does not need one. Hmm ... I have to try without...
To store content on a sever I use the onblur attribute, which works perfect.
I answer the question myself. Thanks to Abhitaks jsFiddle I found the problem which limited to auto adjust the height. For this I appreciate the answer of course ;-)
In a CSS declaration I gave the class editable an initial height of 20px. Because of this the contenteditable could not adjust its height automatically. In turn I needed the javascript function autoGrow() to compensate this issue. While this "crazy" approach worked when editing the content, it did not work when reloading the content.
So the solution is to eliminate the heightin the CSS declaration and get rid of the javascript function autoGrow(). Now it works perfect !

Animating a table with jQuery

I asked a question yesterday on here and got some awsome help, but I need more help concerning more or less the same, only a bit different.
This is my old thread.
So ye, I made this and the idea is that you can customize the table to see it the way you want. for now its possible to drag the columns to change the order and its possible to order the columns on alphabet or high/low. Since I got help here, its now also possible to hide the columns.
Now I want to make the hiding process a bit more smooth, since its hard to see if something is hidden after a click if you use no animation. I use .fadeOut(200); now, but when the fading is done the column just 'jumps' to fill the gap, is it possible to animate this in some sort?
Edit: After thinking some more, I thought that I could just loop a -1px width untill the element's width is 1px and then just hide it, but for some reason that wont work, the table doesnt respond to .width(xxx); or .css('width', 'xxx');. It does change the value, but the td keeps the same width.
This is somewhat of a workaround, and there might be a better solution, but here it is anyway:
Animate the opacity to 0.0. Fadeout does the same, but it also sets display:none after completely fading out. It is the display:none that causes the adjacent column to jump and fill in the gap.
Animating will cause your hidden div to remain there. Now that it is no longer visible, animate its width to 0. This will cause the adjacent div to smoothly take over its place.
Once width is 0, set display:none
Here's a working sample I whipped up. Adjust accordingly to animate width: http://jsfiddle.net/x7BEv/8/
Here's how the magic happens:
$(document).ready(function(){
$('#button').click(function(){
$('#upper').animate({opacity:0.0},'slow').animate({height:'0px'},'slow',allDone);
});
});
function allDone()
{
$('#upper').hide();
}
I'm not sure how important the allDone() method is. You could probably do away with it.
you must use jqgrid
or just for sorting you can use tablesorter which is very easy to implement

Obscure break in div tag

I am trying to make a div which expands to show hidden content when hovered over. However there seems to be a random space in between images inside the div, hence a premature onmouseout method call. Is there any way to get rid of this problem?
Check out a live version here.
The onmouseout event bubbles.
Therefore, you get the event whenever the mouse moves out of one of your child elements.
You need to check event.target and make sure it's the <div> element. (Or use jQuery's hover method)
Where exactly is the problem? is it the black space between the first two car images when you hover over the first car?
The div is expanding to more than what the image width is. set the width of the image to be 300px.
Then try setting margin,border,padding to zero on all container divs
div.itemHolder {
border:0 none;
margin:0;
padding:0;
}
I think that since you are setting both the height AND width properties, that the image is coming up with a weird aspect ratio. try setting only one of them. If that is not a part of your worries, please ignore
I must not have explained this clear enough, but we managed to fix the issue.
Many thanks for the responses.

How to regulate height of LIs?

I have a UL where the LIs are boxes. I want the boxes to all be the same size, but sometimes the boxes are one line, and other times they're two. how do i add an extra empty line in the LI if the content is only one line? I'm assuming this will be some sort of javascript?
Without seeing any of your HTML markup, you could use CSS height or min-height properties. The latter will only work in the latest browsers, e.g. not IE6.
You should just give them all a certain 'height' or 'min-height' attribute instead of trying to fix a height that is automatically rendered to them.
Try posting some of your html so we can help you more though...
Maybe this could suffice?
line-height: 2em

Categories

Resources