Imagine the following code.
<body id="first_bg_layer">
<div id="second_bg_layer">
<div id="third_bg_layer">
</div>
</div>
</div>
Each layer has a different background that is static/repeated to achieve the desired effect. I need all layers to fill up the screen, otherwise the background will be broken. The background is split in layers to minimize the image sizes.
Setting min-height to 100% doesn't work for various reasons. Is there any way to do this?
Edit: If I set #second_bg_layer to height:100% and #third_bg_layer to min-height:100%, that works. But then the #second_bg_layer is locked to 100%, and will not be expanded more.
What I want to do is to set the min-height on both div's, or some other solution.
Is a trick I read sometime ago, and applied as seen bellow, if I recall well... As said just above by others for the first part, I'd set :
html,html body {height:100%;}
Then, a div containing all content. A sort of wrapper if you want to call it so.
...wrapper div to which I'd set {height:100%;min-height: 100%;}
In its class or id.
But sadly IE does not support min-height, nor height:auto, so...
just set first the IE case line: {height: 100%;}
and then the css that will apply to other browsers:
html>body whatever_the_div_class {height: auto;min-height: 100%;}
Finally, do a footer div to put it outside this wrapper div, just after it, to which css properties you will add:
height 1%; clear:both
(the 1% is like often happens, IE needs some "space" or will do weird things)
Well, let's hope it helps :)
Did you set the HTML and BODY height to 100% with 0 margins? If not, do that, if so, make sure your div elements are positioned correctly.
If you just aren't getting a full width and height out of the body area, then maybe what you are asking for is this:
html, body {
height: 100%; width: 100%;
}
/* And perhaps adding this if you're not using any reset CSS */
html, body {
margin: 0; padding: 0;
}
If its not, I'm not sure what you are having trouble with, but a background-image cannot be displayed outside of its selected element. If you want to differ the background layer from the layer itself then I would suggest using an additional div that has width/height: 100%; position: absolute; top/left: 0; and background: url(...); to hold the background image.
Related
I need to swap panels in a list. I've tried to reorder rows in a grid but I need to put a little more informations in the item so a panel will be nicely to show.
Must be the classic drag icon (four arrows) like here http://examples1.ext.net/#/DragDrop/Panel/Swap_Dropable_Panel/
This example is very close that I want. I need only vertical swap like this one http://tof2k.com/ext/sortable/ ( this could be just what I need but seems it don't use ExtJS themes and I don't know if I can put more information inside the items - and it is a little ugly too).
Some ideas?
Perhaps using a grid with a templatecolumn and drag and drop resolve your issue.
FIDDLE: https://fiddle.sencha.com/#fiddle/1i7l
Also, you can use CSS to change row.
.customRow .x-grid-cell-inner {
margin: 5px 5px 5px 5px;
background-color: yellow;
}
Remove de comment
//cls: 'customRow'
on fiddle (line 58).
I'm using the Polymer core-list in a page and the display provides a good result, but when I try to use this file as a Polymer custom element, it shows me this error : core-list must either be sized or be inside an overflow:auto div that is sized.
How to resolve this problem please ?
Because your question doesn't provide much information just a guess. You are missing
<polymer-element name="xxx">
<style>
:host {
display: block;
}
</style>
<core-list-dart>
...
</polymer-element>
From the core-list documentation:
IMPORTANT: core-list must ether be explicitly sized, or delegate
scrolling to an explicitly sized parent. By "explicitly sized", we
mean it either has an explicit CSS height property set via a class or
inline style, or else is sized by other layout means (e.g. flex or
fit). Alternatively, core-list can delegate scrolling to a scrollable
element that contains the list by setting the scrollTarget property,
and the same explicit sizing requiremets will apply to that element.
You should be good to go, if you set a height property for your element.
<polymer-element name="somename">
<style>
:host {
display: block;
}
.someclass {
height:10vh;
}
</style>
<core-list-something class="someclass">
...
</polymer-element>
I'm using a layout panel with some layers. One of the layers is quite simple but I want it to have a float: right on the element. But this is actually not working because subwidgets are styled with style="postition: absolute; left: 0px; ..." which overrides the styling and so the subpanels/widgets will always be placed on the left. Any workaround for this?
After adding your element to your layout container, did you try setWidgetHorizontalPosition ?
If above method does not work and you want to use float right, maybe you can use a non-layout system with FlowPanel maybe. Otherwise you will have to fix the position and width/height of your components but you may loose responsive design.
Last trick : If you really need to change the absolute style. In your component do something like this (do this after your component has been added to the dom)
this.getElement().getParent().getStyle().set.....
You can reset whatever property you want but this might break your layout
I am using bootstrap in an Ruby on Rails app. I use Firefox. I find that the height of the dropdown field (select tag) is too small.However the height of the text fields are appropriate. I had too add the below code to application.css to fix it:
select {
height: 38px !important;
}
Now dropdown shows its content properly though its overall height (box) is a bit bigger that text fields. Is there a neater way to fix the issue?
I found it more appropriate to remove styling from application.scss and modify the app/assets/stylesheets/custom.css.scss instead. custom.css.scss is generated by Bootstrap. The padding for all FORM elements was set to 10px in that file. I set padding for SELECT element to 2px and left the rest intact.
I am writing an opensocial gadget. My structure is something like this:
<div style="height:200px;overflow:auto;">
<div id="dComment">Comments are loaded here.</div>
</div>
I update the content of the "dComment" every second, and its content gets some scrolling.
In my gadget I have specified <Require feature="dynamic-height"/>
When I use gadgets.windows.adjustHeight() it calculates the height of the content regardless that I have made some part of it hidden through adjusting a height for my outer div. As a result I see a huge white space below my content !!!
I know that I can specify height for adjustHeight function. But then it means that on every update I have to calculate the height of the gadget myself, and I don't want to do it (if possible).
Can someone explain to me why it happens and how can I solve it ?
Instead of visibility:hidden use display:none