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.
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!
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.
I need to convert an existing layout to right-to-left for different languages i.e., arabic, hebrew, etc. and I'm having issues with IE7 - imagine that. I used this awesome tool to convert the css, https://github.com/ded/R2, which worked very well. However, when the layout is rendered in IE7, giving any input element focus causes the element to reposition itself on the other side of the screen i.e., about 540px to left.
The ltr version of the layout has the form element inside a 200px container div that is positioned to the left of the main content area, a basic to column layout. The rtl version is a mirror image i.e., the 200px form container is positioned to the right of the main content area.
The two column and main containers are templates that get loaded into parent containers on the base html page i.e., there are divs for the sidebar and the main content area templates. I noticed that moving these parent containers around changes where the repositioned input elements are placed when clicked. These parent elements default to the width of their parent, which is 870px, and it looks like the input elements are repositioning themselves to the left inner border of these elements. I tried changing the width of these parent containers and that did nothing, any ideas?
Thanks,
J
Fixed this problem by setting the parent container dir attribute to ltr and then input elements to rtl.
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.
I have made a simple website and am happy witht he fact that I have had minimal use of div elements. I cannot explain why I do not like using divs, I just dont. That being said I have 2 elements side by side and when the browser shrinks the elements collapse one under the other (it's a paragraph with an image next to it, for ease of picturing).
Other than using position relative and adjusting pixels or wrapping the elements in divs is there a way to prevent two floated elements from changing position when the browser screen shrinks?
you could have a min-width on the container of those two elements. and if they aren't in a div, remember that <body> can also have this min-width
Try to give a width on the container for exampleboth the elements for example say
< class="element-container"> in order to seperate both the elements overlaying on each other.