I have this problem where I am trying to show multiple graphs (based on jsPlumb) on a single page. Since I want each graph to be side by side on one row no matter how much space is available I am using a table (if I used divs with float:left, if not enough space is available some of the divs move down on a separate row).
Now each table cell contains a main div which in turn contains two or more node-divs. The way jsPlumb works is by creating a separate div for each node. I need to position each node at a particular top/left relative to its parent div.
The problem I have is that the main graphDiv in each table cell does not expand to fit its content. Some of the graph-node divs are outside of it. I understand that when you have "absolute" positioned divs they are not taken into account. But I am using "relative" positioned divs with top/left coordinates. Does the same thing apply?
If so, what would be the best way for me to expand the table-cell/graphDiv to cover its content? (i have tried all the clear fixes and went thru all stack-overflow related posts but could not find a solution).
Here is a link to the jsfiddle page I set up: http://jsfiddle.net/7QkB2/28/
I'm a little rusty but I share your pain in trying to get divs to properly expand to contain their contents.
As explained by this page http://reference.sitepoint.com/css/relativepositioning when you use relative positioning you're actually leaving behind a hole where the content used to be. I'd think of it almost as an optical illusion - The object is still reserving an invisible block in its old position, but it appears as if it has moved.
So in your case, the 3 nodes are still stacked in the upper left corner of the graph even though they look like they're floating outside of it. If you get rid of all the absolute and relative positioning on the nodes you'll see the table is sized to be big enough to fit their original positions.
I'd recommend usually only using position relative if you're only moving your content by a few pixels. Why they designed the css to work this way is a mystery to me, but maybe its something to do with the limitations of the rendering engines? When you use position absolute the object no longer has a "box" taking up space in the document. It's easy to position, but won't affect the spacing of anything else as you observed.
I'm not sure your exact application, but you may need to get creative with how you specify the spacing. If you know the dimensions you can always specify them, but I'm guessing you're not that lucky. Do you really want to set the position relative to the top-left corner, or just relative to the other nodes? I'd probably just use old-fashioned margins. That should allow you to specify the positions of the content that needs to fit in the table while maintaining the block model. Then if you need one of the nodes to overlap, position it using absolute positioning.
Have you tried displaying each div as an inline-block and turning off line wrapping on the enclosing div? You don't have to resort to tables if you want content with a dynamic width to display horizontally without wrapping.
div.graph {
display: inline-block;
}
div.graph-container {
white-space: nowrap;
}
Related
Hoping someone can advise a good strategy for this.
I have a page I am trying to code that has five elements on it. The content of these elements will change as one uses the page ... sometimes consisting of text, sometimes images ... and importantly the height of the content will change (all built using JavaScript). The idea is that all of this will be visible on the screen at once.
The issue is that I want the elements to retain their positions on the screen (e.g., upper left, exact center, etc.) regardless of the size of the others. For example, the element in the middle may be a single line of text and may suddenly become a 300 px high image, may then become a 100 px high image. When that happens, I don't want the objects below it to move up or down.
(PS: this will only be used on a desktop computer)
Is there a way to HTML or CSS this to give these elements absolute positions (e.g., the one one in the middle: 50% from top, 50% from left, centered on the screen) regardless of the size of the others? I was previously just using line breaks and position things using line heights, but that causes elements lower on the screen to "move" down when the higher ones resize.
Any help or suggestions would be appreciated!
youc can use CSS for this, you should try with position property(relative/absolute)/ Check this out link and this link
Is there a way to select all child content beyond a certain parent height using javascript? For example: I have a two column layout with a fixed height. If the content inside column one is vertically overflowing I want to be able to move the overflowed content to column two so I need a way to select it.
I have no trouble detecting if content is overflowing using this technique but I can't figure out a way to select the overflowed content.
With javascript, you can count the number of words that fit in the first column of a two-column layout. You could do this "offscreen" -- where the user won't see it -- by making a copy of the first column just for measurement purposes. For example, give a container an absolute position that's way out of bounds (like, top: -10000px, left: -10000px). Other than the positioning, give it the exact same css (font, line-height, etc.) as the first column in your two-column layout. Using javascript, keep adding words, one at a time, to the container. After you add each word, check if the container has overflowed or not. Once you've reach that point, that's what will fit in your first column (minus the word that actually made it overflow); the rest of the string (including that word) goes into the second column.
I know CSS is not supporting position: fixed for only x or y but only for both a the same time.
The common approach to solve this seem to be to use fixed positioning in combination with jquery to re-position the component with respect to the scroll amount in the non-fixed axis. The downside with this is that the component will lag a lot when scrolling in this direction.
My question is if this is a problem that is being looked at for future specs of CSS? Anyone know?
I think we need a fixed-x and and fixed-y positioning value.
This is especially becoming a problem now with touch devices where scrolling in both dimensions are more common.
Here's a fiddle:
http://jsfiddle.net/UfZPa/1/
which shows what I'm after but not the actual problem because this very small example is very fast as it looks now.
Update
From the CSS ED:
Intersection between the stickily positioned element and the bottom of
the sticky-constraint rectangle limits movement in any direction, so
the offset never pushes the stickily positioned element outside of its
containing block. However, when the element is free to move within its
containing block as the page is scrolled, it appears to be pinned to
the relevant flow root edges, similarly to a fixed position element.
I think this is describing what I want but I'm not sure...
Update 2
To clarify my app is basically a grid with scroll-overflow in both x and y (like Excel). What I want is some labels to stick at the edges in one directionwhen being scrolled out of view but at the same time stay in the normal flow in the opposite direction. I want this for both fixed-x/flow-y and fixed-y/flow-x. And the problem again: With lots of labels this makes scrolling very laggy using the jquery-solution. I think we are missing an option to make components fix in only one dimension and still flow in the other. Maybee I'm the only one wanting this =)
A quick skim through some CSSWG notes such as this one leads me to believe that position: sticky might be a potential solution to this problem, provided you only specify the offsets on the axis you want the element to be fixed.
There is a point of concern though: unlike a fixed element which is considered absolutely positioned, a sticky element starts out relative to its containing block. Since relatively-positioned elements are not taken out of the normal flow, you will have to account for the layout of other elements in the same flow as your element, among other things, and (thus?) forcing the element to act like it's fixed regardless of scroll position may be a little more difficult.
Of course, there is too little information and implementation available to verify any of this — I'm just making an informed guess, and the document I link to is an ED not meant for general reference — but you can always ask the www-style mailing list and see what the good folks there have to say. I haven't experimented enough with position: sticky to be able to comment further myself.
I would like to create screenshots automatically from a browser window and annotate some elements on the website.
I am having in mind to write something like this: (pseudo code)
Place note right of element "#login": "This is the login button"
And the note should be added.
I obviously have to do this directly inside of CSS and/or Javascript because after taking the screenshot the element information would be lost.
What are possible approaches on this?
I am interested in
Relative positioning of notes, arrows and such next to certain HTML elements
Auto Positioning of boxes to avoid overlaps
and anything else which could be useful in this case.
I post one possible draft solution and hope for alternative and better ones
I am also interested in already existing modules (jQuery or others) to help here.
Concerning relative positioning:
We want to add a note right to the element "#login":
Insert a new element, with absolute positioning, as a child of the <body> node.
Obtain the absolute position of the element by iterating from the element back to the <body> and adding up the relative positions. (jQuery's position() would help)
Set left/top for the note-element to the calculated absolute position of #login plus it's current width
Not answered: Auto positioning
Hey, Ive got an php script dragging some images from a database and displaying them using float:left; so they go left to right.
However unless in the css i define i width for the container they jump down onto a 2nd line.
So the question IS!
How for the life of me could I get it to figure out the width of the content and then set the width attribute via javascript all on the one load.
I did have a slight worry that this wouldnt be easily possible as it wud have had to render the images/layout first to get a width before then adjusting it.
Ideas please people!! x
Your question has to do with how the flows of floats work...
If two images are floated and the sum of their widths is wider than the containing element, they will wrap (similar to the way words in a paragraph wrap).
Visual references describing the flow of "float"ed elements (way too difficult to describe in a few words):
http://css.maxdesign.com.au/floatutorial/introduction.htm