I have a scrollable DIV that has lines of information (textarea's), as DIVs,
one of top of another.
The scroll is something like 300 x 400 px, but it can have a lot of lines in it (DIV elements).
For each DIV line of information I have another small DIV that basically
lets an user click on YES / NO to delete that line of information.
I hide all of these "deletion" DIVs, but show only one of them, when
an user clicks on "delete" button for a particular line of information.
Problem comes because I position nicely the "deletion YES/NO div" above each line of information, with position:absolute. relative and fixed do not work well for me because they break the nice alignment I have in the "outer" DIV that holds all this.
For the 1st visible to the eye entries (lines of information) the "deletion" DIV for each of them looks ok (with position:absolute), but when I scroll down
the DIV, they don't show up no more. So this is the main problem.
How can I deal with this problem ?
I needed to cast my "nicely done delete DIV", which I kept position:absolute into another DIV, which had set position:relative, just that, as styling.
This way the "outer" DIV positioned relative was keeping the track with the other elements in the main scrolling DIV, and the absolute which was inside it would now position nicely on top, with margin-left, or margin-top etc.
Related
I do not mean an html <frame>. I mean something like the frame that goes around this text box that I am typing into on here, with a border and a button bar with some icons in it.
I'd like some editable content that can exist in 2 modes. The first is view mode, where you see the content. The second is editing mode, where a frame appears around it with any controls needed to assist with the editing.
I'd like the frame to not interrupt the normal page flow of the content. So if there was something very close above the content, then the tool bar would sit on top of it in the z-plane. The frame should appear to sit on top of the page, not within it.
I thought about getting the absolute screen coordinates of the thing being wrapped and using 'fixed' positioning to get the frame in the right place.
But I am wondering if 'absolute' positioning might work? Except in this case the absolutely positioned frame would be the parent of the thing it wraps, and 'absolute' positions a child relative to a parent, not a parent relative to a child. Or could a child that is positioned with absolute actually have a larger size than the child, and therefore wrap it like I describe?
You simply need a parent div that contains a div for the header bar and a second div for both input and output.
You would then hide the input and populate the output div with the contents of the input whenever your user was 'done' (simulated here by clicking 'Submit').
I've created a fiddle demonstrating this here.
Note that the input field would need a calc() applied to it in order to adjust for its width.
Hope this helps!
Here's my problem, it's quite uncommon so this is why I ask the question here:
I have a parent div, called middle (which is itself inside a parent div called row, its height is set to 315px). This middle contains two divs, div1 and scrollable_div.
div1 has a determined height that is not meant to change. On the other hand, the scrollable_div contains a list that is meant to evolve (through javascript method), which means if the list contains too many elements, it will end up overlapping and do some crazy stuff as soon as the list reaches the row's height. I would like a scroll to appear in order not to totally wreck this good-looking page when the list gets too big.
Here a codepen : http://codepen.io/Yocto/pen/qZXQjm where elnamestands for element name. (row1 has a purple background and the not-so-scrollable list has an orange one).
Don't hesitate to tell me if what I want isn't quite understandable.
Simply set a height for the scrollable div and then set the y overflow property....
Updated CodePen
.scrollable_div { height:130px; overflow-y:scroll;}
I have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
Is this even possible? The basic setup is a sidebar on the right with div elements in it.
Clicking one of these elements would add a "popout" div, that should be displayed left of the clicked element. The popout contains a variable number of buttons.
I'd like to style it using only CSS, so i can just add the correct HTML elements from my script and have the stylesheet do the layout.
I've attepmted the popout inside the sidebar element, positioned absolutely, but then I cannot make the sidebar element itself scale to be at least as tall as the popout. (The sidebar elements are usually shorter in height than the popout).
I tried putting the popout before the element, and using position absolute, but for some reason the popout will not get wider if i add more buttons, and instead overflows them downwards.
Using position relative on the popout will make it leave empty space where it would have been in the sidebar.
Floating it messes up the width of other sidebar elements.
The sidebar is fixed width. The popout is fixed-height. The buttons are fixed-size. The sidebar elements are full-width but variable-height.
I've lost track of all the different things I've tried. My closest attempt at the moment is in this JsFiddle, where the popout is positioned correctly, but does not grow leftwards, only overflow downwards. If I set the width to a large number, it will line the buttons up correctly, but it makes strange things happen if I add a :hover pseudo-class.
How could this be done in HTML/CSS? Or is it only possible using JavaScript? If so, what could be a simple "out-of-the-way" approach of doing this?
Add white-space:nowrap; to div.popout.
This will prevent line breaks between the buttons.
Im trying to make this layout (many of these are in a list):
An image (of varying height, but a set width) on the left. To the right is an <h2>, and below that, but still to the right of the image is a div with other content in it.
The div is used to provide a different colored background. Right now, the div for some reason extends behind the image, and the images has a varying distance between them, and sometimes one element will get pushed to the right by the height of the image above.
http://jsfiddle.net/RQsUc/
Add overflow: hidden to your outermost divs (div (display: block)) to contain the floats.