I have such Layout structure:
1) First lays SimpleLayoutPanel main (green border)
2) I'd like to add DockLayoutPanel child to main (red border; 25px margins)
I have implemented this, but result, shown in attachment (.jpg), is strange for me.
So, all red (top, left, right, bottom) borders of child should be inside main, but child panel shifts. How can I implement this logic in a right way? I have more complex ui structure with 3-4 level. And I also dont work without margins.
And here it is code and css:
SimpleLayoutPanel panel = new SimpleLayoutPanel();
panel.setStyleName("mainModulePanel");
SimpleLayoutPanel p = new SimpleLayoutPanel();
p.setStyleName("moduleBody");
panel.setWidget(p);
initWidget(panel);
//CSS
.moduleBody {
/*width: 100%;
height: 100%;*/
margin: 0px;
width: 100%;
height: 100%;
border: 3px solid red;
}
.mainModulePanel {
/*margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;*/
border: 3px solid green;
}
This has to do with the html definition for the border!
Let me explain it with an example.
Your DockLayoutPanel is 500x500px. You put a child element with 100x100% into it, where the margin, padding and border are 0px. Your element will have a size of 500x500px. No you give it border of 3px. This means that to the height and width 3px are added. So your element has a size of 506x506px.
The overflow is ignored.
The result is your second picture.
This is correct html behavior and has nothing to do with GWT!
I've solved the problem by removing 100% height and width .moduleBody CSS.
So, to avoid such situation u shouldn't size child element by 100% height and width.
Thanks guys!
Related
.mainCoverWrapper {
position: relative;
min-width:312px;
background:red
}
I'm trying to center a div with min-width of 312px and make it expand according to its dynamic content while keeping it centered.
Right now the min-with doesn't work at all because it needs a float. I can't use a float because I need the div centered on the page.
In other words, div starts out with margin auto with a width of 312px and expands with its added content while being centered. Is this possible?
Any help would be greatly appreciated.
http://jsfiddle.net/FVmvA/
Here's a working example of the parent to follow the width of the child, and the child will expand according to the text given in it.
.myCoverWrapper {
border: 1px solid Peru;
margin:auto;
min-width: 200px;
max-width: 100%;
display: inline-block;
background: red;
}
.test {
height: 100px;
margin: 10px;
background: cyan;
}
This makes the parent div follow the width of the kid.
This however, will disallow you to "center" it. There's no way you can have both. This is because you cant center an image without knowing the width of the element.
The solution is to use jQuery, to add CSS in when necessary.
Here's an example. There's some bugs, but well, you have the general idea.
If you want the width to be fluid, your best bet is to set display: inline-block; on the to-be-centered element, and text-align: center; to the parent element.
See: CSS center display inline block?
I have a div tag in which i have other controls. I have given a border to the div through css. I want the div tag to wrap itself around the controls and auto adjust its own size.
.divwrap
{
width: 60%;
height: 60%;
border: 1px solid #66CCFF;
vertical-align:middle;
margin-left:150px;
margin-right:300px;
}
Now in the above code I have fixed margins. So if I were to use the same style for a div tag on another page, it would be problem because the controls (inside the div) on another page may be more or less in no. I want the div tag to be like a rubber band that can auto adjust the size when wrapped around something (in this case, an html table with controls).
is this achievable? if yes, how??
if you want to make a wrapper keep these things in mind
try not to give it a static dimension.
don't give any width and height, as it is going to be a little larger than the content over which it is applied
give percentage value margin and padding:
try this:
.divwrap
{
padding:3%;
display:inline-block;
margin:3%;
border: 1px solid #66CCFF;
vertical-align:middle;
width:auto;
position:relative;
box-shadow: 10px 10px 5px #888888;
}
see this fiddle.
so now, no matter what the width and height of the child div is, this div will always wrap around it.
hey hoping someone can help me. It's for my portfolio I'm building at www.pxlmin.com/portfolio
What I want is for the background color to take up the whole width, and it does, but when I resize the window down-to say half the width-I just get white space off to the side, (when I scroll to the right), so what I'm wondering is how can I get the background of both the center and the container to extend off to the left.. I have width 100% but it's obviously not doing the trick. Thanks.
Remove width: 100%; from #portContainer and #middlePort. Hope this would solve your issue.
You could add the main background color to the body tag:
body{
margin: 0;
padding: 0;
background: #EFE6D9
}
or use a background image which has the stripes in - but as the above remove the 100% width or set the left and right borders to 0. The white bit is probably 6 pixels which is the the borders being added to the width.
#middlePort {
background: #E8DED0;
height: 300px;
border: 3px solid #E2DAD0;
padding-top: 49px;
}
or
#middlePort {
background: #E8DED0;
height: 300px;
width: 100%;
border-bottom: 3px solid #E2DAD0;
border-top: 3px solid #E2DAD0;
padding-top: 49px;
}
ahha, figured it out.. just set a min-width greater than the amount of the content you need to fill with the background. in my case div #middleport min-width: 1500px;
Amazing the amount of pages that have these fall off backgrounds though (when viewport width reduced and scolled to the right).. tinygrab.com, nodejs.org to name a couple..
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.