Is there a way to create a widget like Morrowind's items list using scene2d.ui? That is, a container where you can put fixed-sized elements and they would stack up in a row (or in a column) until they fill the parent container by width/height, so after that they'd stack up in the next row/column?
In the image you can see scrolling, but I'd still accept an answer that doesn't allow scrolling. Also I'm aware that inline block elements in CSS don't stack vertically (like they do in Morrowind), that's just the closest analogy I can come up with.
I made a set of HorizontalFlowGroup and VerticalFlowGroup widgets to perform that type of layout.
Here's the source of them:
https://github.com/MobiDevelop/maps-editor/blob/master/maps-editor/src/com/mobidevelop/maps/editor/ui/
If you put the HorizontalFlowGroup in a ScrollPane with vertical scroll, it will fill the width then move to the next row, allowing vertical scrolling. If you put a VerticalFlowGroup in a ScrollPane with horizontal scrolling, it will fill the height and move to the next column, allowing for horizontal scrolling. In either case, if you use a uniform size for the child widgets, they will all align as a grid.
Related
It's my understanding that flexbox containers and their child items flex fully along only one axis, depending on the value of the flex-direction property, row or column. With a "row" container, you can stretch and shrink the width of the container and the individual boxes it contains, but the content in those boxes does not grow or shrink to match. On the other hand, resizing a window vertically does cause content to resize accordingly. (I think the situation is vice versa with "column" containers, though I haven't tried them alone.)
So my questions:
Do I have that right? I've read through many nice blog posts on flexboxes, but none covered this characteristic explicitly as a main 'feature.'
Is there a flexbox-only workaround, some arrangement of rows-inside-columns or the other way around, maybe with specific properties set special ways?
I tried putting a columnar container inside a flexbox belonging to a row container, and then putting text into that, but I saw no change in resizing behavior--the text still resizes only when the window/viewbox is resized vertically, not horizontally. See this codepen.
(About the example: first, I apologize for extraneous properties or properties set to random-ish values, but I was trying anything and everything. I tried to pare them back without messing up the demo but I'm sure there's much to improve. The svg logo on the left is just in a top-level flexbox in the main container for that row--it behaves as expected, shrinking/growing only with vertical window resizes. I put a hidden logo in a third box on the right so with equal-width boxes on either side, the text between them comes out centered in the viewbox, if you don't use shrink too much side to side. Maybe there's a less kludgy way with flexbox to a row with centered text and a logo on the left.)
Is it possible with CSS to have two fixed headers which when made responsive affect the content of the scrollable element. I.e. has the headers gets bigger it pushes down the content below.
I am trying to do it with flex boxes, but stuck on having a second fixed header within and scroll element.
http://codepen.io/labithiotis/pen/tkAlB
Want to avoid using lots of media query or js. feel like there must be a solution with flex box.
The Context:
I'm building out a div roster to use with jQuery or PhP for my roleplaying Star Trek Fleet (nerdy, yes, I know). I need my divs to behave in certain ways to make it robust enough to pull from XML and generate the roster automatically and auto-size my divs to fit however many names are added.
It will help to take a look at my current build example with Firebug/the like to understand what I'm doing.
Requirements:
Each subsection (Outpost Personnel, Outpost Defense), needs to have a number of divs:
1) The background image & subsection container (div id= outpostPersonnel in this example)
2) Sub-sub section container for each side of the listing, left and right. (Think newspaper paragraph.)
3) The top n number of roster names needed to fill/align to that background image in requirement 1. (div id= initialCommandTags (left side listing) and initialPersonnelTags (right side listing))
4) Div that stretches with n number of additional roster names. (div id = overflowCommandTags, overflowPersonnelTags, )
5) A colour div stripe to make it look like LCARS is still encapsulating the n number of roster names from requirement 4. (div id = colorStretchLeft)
The Problem:
I cannot get the parent subsection- the div from 1 (outpostPersonnel) to adhere exactly to the height of ALL its child divs- all the way down to the height of the overflowCommandTags/overflowPersonnelTags div.
One way I've tried it, and the next subsection (Outpost Defense) overlaps the overflowCommandTags div. The other- which is the way I have my example now (and where I gave up)- puts a ~160 pixel high blank space between the end of the overflowTags div and the top of the next subsection (outpostDefense).
If you firebug my current build example, you'll see that the parent div (outpostPersonnel) extends way the heck down, even though none of its child divs are that tall.
Overflow:auto and Overflow:hidden are NOT viable solutions insofar as I have read, since I need the divs to expand fully, and WITHOUT a scrollbar.
I'm completely stumped. Watch it be a really simple solution, too. Is it something to do with the fact that the parent div is only a BG, while the child divs have actual content?
Thank you for bearing with me this far!
Cheers!
((Also the reason why my div style stuff is in-line is because I'm embedding this on an Enjin page and I can't call a *.css file.))
There are a few things to mention here but I'll start with the reason for the gap in between the two sections.
From what I can see from your inline styles you have used position: relative and varying top andleft values to achieve the desired layout. On the element with ID personnelContainer you have added top: -230px. This is what is causing the gap.
When you position an element relatively you have to imagine that the element is in its original position and that you've just visually moved it. In other words, moving the element does not change the flow of the page, so applying the negative top value as in your example will not change the height of the container. (good reference: http://reference.sitepoint.com/css/relativepositioning)
With this in mind, you could go the route of applying minus top values to each of the sections that follow in order to close the gap, however you are likely to find that this complicates matters further and leads to overlapping content.
The best advice I can give is to read the following articles on floated layouts:
http://css-tricks.com/all-about-floats/
http://www.quirksmode.org/css/clearing.html
Relative positioning has its applications but in this case you should use the float property to achieve your layout. If you read the articles above it will give you a good grounding in floated layouts and how to ensure your sections contain everything correctly. As long as you don't set any fixed heights on any of the child elements you will find they expand to accommodate any amount of content.
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.
I'm working on a jquery slider, except instead of using a fixed-width container, I'm using the whole browser window. I've got jQuery set up to fix the margins to make sure it's centered correctly (although I just made them 500 pixels in the demo to keep it simple), but the problem is when I try to add more divs, it puts them on a second line instead of putting them beyond the edge of the browser. Here is my code: http://jsfiddle.net/JsPZT/
Eventually, I'll change the overflow so that they are hidden when they are beyond the edge of the browser, but for now, I just want to know that they are on the same line and not being pushed onto the second.
So my question is what should I change in the CSS to make sure the divs are always on the same line, even if it means pushing them beyond the edge of the window?
To get divs to stay on the same line when they are off of the screen, you have several options. Here's what I can think of off the top of my head.
Make the parent container always large enough to hold the divs you want to float. Theoretically, they shouldn't jump down to the next line that way, but I haven't tried it myself.
Another option is to use a combination of display:table and display:table-cell on the parent and children divs respectively. You just have to make sure you are supporting the browsers you want to support.
My last idea is to set each div with position:absolute. Then, just adjust the left attribute to 100% * x to place the div off the screen to the left or right. Depending on what you are trying to do, when they are off the viewable area you could just leave them at left:-100% or 100%. The same should work for the top attribute if you want the div to be off the screen above or below the viewable area.
Try white-space: nowrap;
If that doesn't work, you will probably need an inner div with a width that's the sum of all contained divs.
You need to add a width to your #track CSS. That is your wrapper, and without a width on that, the items will just overflow and drop to the next line. You'll probably have to add another div to set the overflow and get everything positioned correctly.