Strange extra DIV height in Google Chrome - javascript

I have two DIVs:
first one is narrow and is floated left and displays a kind of vertical tab structure.
second one displays content per selected item in the left DIV
You can see a simplified example here on JSFiddle.
As shown in example, left DIV is usually higher than the right one. That's why the right DIV is vertically shifted down to align it to the bottom of the selected item in the left DIV so the content is always in view when a user selects an item on the left.
Everything works as expected in Firefox and IE but not in Chrome.
Chrome issue
Whenever you select an item in the left DIV that should reposition the right DIV, the whole container of both gets higher even though non of the contained DIVs is as heigh.
What seems to be going on here and what am I doing wrong?

You can hide the extra height that is added by using .container { overflow-y: hidden; }

Set ur right side div container to position: absolute (i.e height of right and left container to be same and set width as your own)

Related

Collapsible Sidebar Without Visible Reflow on Content Inside

I have a 3 column layout where I want the left and right columns to be collapsible. I want the following:
A smooth slide
Sidebars that have a percentage width
No visible reflow on the sidebar content
No white-space: nowrap;, as this will mess with the display of the sidebar content.
Allow for complex content inside the sidebar, not just simple text in a <p> tag as in the codepen example below.
No hardcoded pixel widths - I know you can add a width on an inner div together with overflow:hidden on the parent, but I don't want to hardcode a large width.
I need the sidebar widths to be relative to the immediate parent (and not the viewport), in case the 3-column layout needs to be within a section of a page (in fact in my scenario that's the case).
Note that the I've tried transitioning on the width property in this codepen, but you can see the visible reflow of content inside the sidebar. Here's a .gif of it:
Ideally I'd like to do this without using JavaScript for the animation, but I'm open to it if there are no other good solutions.
One way to do this I would say is to give a % based width to your pabel-content.
Add these two properties to the class like this
.panel-content {
min-width: 300px;
}
This should remove the wrapping while animation.

How to keep div in the center of viewport

I am creating a feedback system for one of my projects. My target device is iPad. Basically what happens is a div called into the page via ajax and it is supposed to overlay the content underneath. I have that part working.
What I want to do is have the div locked to the middle of the view-port. I have tried position:fixed on my element which works, except it will lock into the wrong position. It seems to be centering itself to the initial position of the viewport. If I scroll down to the bottom of a longer page and call my feedback window, it will still be near the top.
Ajax Page (this runs when the page is called)
$(document).ready(function(){
$(".popup").css({
top: "50%",
left: "50%",
marginLeft: -$(".popup").width() / 2,
marginTop: -$(".popup").height() / 2
});
});
If I can find the top of the viewport I think I'd be able to get this working right.
I've looked into: http://www.appelsiini.net/projects/viewport but it doesn't really solve my problem.
Any help, advice or pointers in the right direction would be greatly appreciated! Thanks!
Fixed positioning is applied relative to the top-left corner of the window, regardless of how far down you're scrolled (which I assume is what you want).
So:
.popup {
position:fixed;
top:20px;
left:40px;
right:40px;
}
Will, first of all, put your popup 20px from the address bar (meaning, even if you scrolled to the bottom).
Next, setting both left AND right will "stretch" the fixed element to start and end 40px (or whatever you give it) from both sides of the window. That's a convenient way of centering this popup div.
If your popup needs to be a fixed size – not stretched based on the width of the window – you could set both the left and right (to zero probably) and then inside this div, have another div with margin:0 auto, which will center that inner div within the fixed outer div.
P.S.
Just as you can set both left and right, you can also set both top and bottom, which will have corresponding results. However, if you need a fixed height, you won't be able to vertically center it using the margin:auto trick.
Don't know if it's the case, but If $(".popup") it's initially hidden by display:none, then it's width and height will be zero on page load.

Can I move the scrollbar, and make it always visible?

When I expand one of my nodes, and the data goes down below the bottom of the window, the scrollbar appears and makes the top bar squish up a bit. Is there any way I can make the scrollbar only show in the bottom white area. Also, can I make it always show even if it's not needed, so it doesn't appear and disappear?
Give the white area a fixed height and set overflow to either auto or scroll.
I would just use a css 'min-height' on an element that can be larger than the window; body { min-height: 101%; } might do it.

Limit horizontal range of centered div when resizing window

I have two divs. One should be positioned 5% from the left window border, the other should be to the right of the previously mentioned div and centred relative to window width. If the window is made too narrow it should not overlap the first div, and it should not move below either.
Whatever comes after should be positioned below the tallest of the first two divs.
How can I do this?
The closest I've come is to use a float for the first div. http://jsfiddle.net/7qVLm/
edit: Here's the final result that I'm happy with: http://jsfiddle.net/ATHpg/
Thanks to both #Christopher Smithson and #gmebeh whose answers helped me to get to this solution.
Here's a fiddle to consider for your solution.
http://jsfiddle.net/f2Muj/5/
With percentage-based width's you can make this happen:
jsFiddle
#d1 is 5% from the left, center-aligned content
#d2 is centered relative to the browser window, and will never overlap #d1
Both use fixed heights to accomodate fixed amounts of content
Play around with the percentages to get the exact width you you want.

JQuery resizeable and dragable divs positioning problems

I'm having trouble properly positioning some divs within a larger div and having them behave as I want.
The source and a preview is here: http://jsbin.com/usuniw/6/edit
Problem 1
When the hidden div is unhidden it appears under the div I want it to appear inside. Once the dive inside is resized (using a handle on the left hand side) it pops into place
Problem 2
When resizing the originally hidden div it moves outside the boundry of it's parent rather than aligning itself to the right-hand side of it.
Thanks for any help you can give.
At the moment, you have the #selectedResult element set as float right which is causing it to appear underneath the #ipad element.
If you get rid of the float:right on #selectedResult and instead set it to:
position: absolute;
right:0;
top:0;
And set the #ipad element to:
position:relative;
Then the element will be fixed to the top and right sides of its parent.
You can see an updated version of your example here: http://jsbin.com/uxavov/edit#preview

Categories