My drop-down menu requires the use of position: absolute; for the dropdown. And inside the drop-down, I want to have menu items in multiple columns, like so (example):
For that I could use either float or display: inline-block;, but actually, none work as the absolutely positioned parent simply collapses, and the children are lined up below each other, instead of next to each other.
How can I achieve what I need without having to set a specific width or height on the parent or its children? Is there no way around?
I did try a lot of solutions from similar questions, and those that worked need me to set a specific width or height or have the parent extend to the full width of the page.
Related
When use TabPane with tabs placed on sides the tabs' headers and strings rotates and has vertical orientation. Is there any way to place tabs' string horizontally when use TabPane with the right/left sided tabs?
Put string as label into graphic node. Graphic node can be rotated (there is a rotate graphic property of the tabpane)
Specifically, instead of tab.setText("Text") use tab.setGraphic(new Label("Text")), and look at TabPane.rotateGraphic property.
If you want implementation via fxml : then yes, it is possible. You need to specify attribute rotateGraphic of tabPane, if needed, and set property graphic of a tab to a new instance of label, and that is all. Mostly all you can do via java-code, you can repeat via fxml.
Talking about tabMinWidth - I think, you should look at binding expressions here :
http://docs.oracle.com/javafx/2/api/javafx/beans/binding/Bindings.html
Specifically, I think, you should be interested in max() method - you need to have max of widths of all tabs.
I have done in this way ...
Set following CSS for Tab pane in .CSS file
-fx-tab-min-width: 30px;
-fx-tab-max-width: 30px;
-fx-tab-min-height: 130px;
-fx-tab-max-height: 130px;
After that set label in Tab graphics,Set Min Width for label (Must require)
I'd like to figure out how I can get my text to move along with the browser. Right now my site looks like this: http://simplysweet.shukuya.com/test/. The divs are absolute, but I've tried relative, static, etc... and can't seem to get the text to move along with the image/layout.
To have your text scroll with the rest of the page you simply need for your divs to be relatively positioned (the default.)
Setting the width of your div to 100% will make it occupy all of the available space in the layout just outside that item, (and so-on up to the root of the document.)
If you want to maintain a "centered" block that is left aligned, use:
margin: auto
on whatever div is just beneath the root of the document.
Use min-width property along with positioning for both div
So, I am designing with a fixed width. I just want the gutters to be flexible. So, I tried just using parent div's with 100% width. As you can see in this fiddle:
http://jsfiddle.net/P3Ckk/115/
What I intended was for what is happening with the fixed div ("nav" div) to happen. When the user window gets too small, I'd like the 100% width to collapse upon the fixed width elements (in this case, 1000px) and enable horizontal scrolling.
However, my parent width:100% does not work like that with relative positioning. The "top" "title" and "container" divs all stop at whereever the screen stops. I suppose that is 100% but it leaves the fixed width content overflowing these (now) smaller parent divs!
Additionally, the problem also shows up when a vertical scrollbar comes down. The area to the vertical scrollbar is considered 100% and the remaining gets left blank. This also creates a horizontal scrollbar to view this "extra" part.
What is the best solution here? Should I abandon my parent div 100% width approach?
I've tried making the these 100% divs have min-width:1000px, but that doesn't seem to work. I'm just a bit stumped here.
Any help appreciated. Thanks!
I've read about this before. Before you can use 100% in a div width you must set the css of both your body and html tags to 100%.
html,body{
width: 100%;
}
or else it will stop at the edge of the screen on any device.
I need to make a box on a canvas (a ), outside witch elements contained in it are invisible.
Similar to overflow: hidden; in css.
Note: There are draggable elements inside. I need to be able to drag them but if they exit a box (something like a camera focus) I need them to not be shown (or parts of them if part is inside, part is outside), as I said exactly like overflow: hidden.
Note 2: I can't use other elements to cover the area around the box (please don't make me explain why unless is absolutely necessary (I don't know how to say it short so I'll add pictures and lots of words) :) ).
Have your draggable elements be children of an <svg> element and set overflow: hidden on it. An <svg> element can be a child as well as the root element. A <g> element won't do as it has no explicit width/height and will expand to the size of the contained children.
I'm trying to position a div inside a div.
the outer div has a fixed width and heigt, the inner div contains some text, has a fixed height and automatically fits to the width of the outer div (default behavior, without "width: 100%").
When I now add position:relative to the outer div and position:absolute + bottom: 0 to the inner div, I just want the inner div to move to the bottom of the outer div, but keep the same width it had before. This works fine in most browsers (Internet Explorer 8+, Firefox, Opera), but in IE7 it reduces the width to fit the text inside the inner div.
Is there a clean and valid way to prevent this different behaviour in IE7?
You can see an example here: http://www.loud.fm/tmp (I'm talking about the black box at the inner bottom of the featured-slider-box.) Thank you in advance! :)
Since your already using absolute positioning to lock it to the bottom why not add
left: 0;
right: 0;
to your CSS as well.
When you perform position: absolute, you are breaking some of the relationship. In the example you mention, you'll notice that div of the black box belongs to an li element in which the li element has a static width set (of 590px). You could dynamically set the width of the inner div to that of the outer by using javascript on load to handle all situations. Otherwise, set a static width size that matches that of the parent.
I had a pretty similar issue with Div's being changed in width by IE7. A simple style tag solved it for me:
min-width: 100%;
After hours of trial and error, this was all it took. Hope it helps!