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>
Related
I would like to know if anyone faces this issue of awkward padding between the table and header of sap.f.DynamicPage:
There is nothing "incorrect" about the padding between the header and the content. It's the intended design which can be seen in the source code:
.sapFDynamicPageContent/*, ...*/ {
//...
padding: 2rem 3rem 0 3rem;
}
Don't
This shouldn't be changed if you're following Fiori design guidelines or if the app is supposed to be running on FLP. Please, avoid using custom CSS to remove the padding as mentioned in the documentation:
SAP Fiori launchpad apps should not override styles.
Do (as of v1.56)
What we can and should, however, is to align the table with the header content by removing the side padding shown below:
This can be achieved by adding the predefined CSS class sapFDynamicPageAlignContent to the table with the width: auto. E.g. in XMLView:
<Table class="sapFDynamicPageAlignContent" width="auto">
The SAP Fiori Design guidelines require that the DynamicPageHeader's content and the DynamicPage's content are aligned vertically. When using sap.ui.layout.form.Form, sap.m.Panel, sap.m.Table and sap.m.List in the content area of DynamicPage, you need to adjust their left text offset to achieve the vertical alignment. To do this, apply the sapFDynamicPageAlignContent CSS class to them and set their width property to auto. [src]
Here is an example: https://openui5nightly.hana.ondemand.com/#/sample/sap.f.sample.DynamicPageFreeStyle/preview
Predefined Padding CSS Classes (as of v1.58)
Apart from the above mentioned guidelines, sap.f.DynamicPage now supports the following padding classes:
sapUiNoContentPadding
sapUiContentPadding
sapUiResponsiveContentPadding
E.g.: Applying this completely removes the surrounding padding:
<f:DynamicPage class="sapUiNoContentPadding">
I think it's by design:
Dynamic Page | SAP Fiori Design Guidelines
SAPUI5 SDK - Samples (1.50.10)
actually it's the padding of the content.
With custom CSS you can decrease padding:
.sapFDynamicPageContent {
padding-top: 0;
}
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
I use card/deck macro, and I have a problem with setting width of column. For example I have this code:
{card}
||Test|data|
||Result|data|
{card}
if I use this macro in this way the left column have width by the longest word in it, but if I break rows like this (it's needed for logical divide attributes in left column):
{card}
||Test|data|
||Result|data|
{card}
This looks like two blocks with different column width.
I think there be an attribute in card something like width or else, but i don't know exactly.
The best way is add CSS in wiki markup between the {html}{html} tags.
There are two classes in confluence table .confluenceTh and .confluenceTd, for header and cell. It looks like:
{html}
<style type="text/css">
.confluenceTh{
width:300px;
}
.confluenceTd{
width:300px;
}
</style>
{html}
One option is to control the column size of the table using [{table-plus}][1] which has a width option.
{card:label=mycard}
{table-plus:columnAttributes=style=width:300px, style=width:300px}
||Head1|D1|
||Head2|D2|
{table-plus}
{card}
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.