I'm styling my GWT CellTable cells by overriding getCellStyleNames in my column definition. Styles are working, on the most part. I'm trying to color the background of a 4-pixel wide column, with mixed display results depending on the browser engine. I'm expecting the following to work, but it doesn't. I need to set the height for firefox to 0, otherwise the first row appears to have a larger height than the rest of the rows. Any ideas?
.wt-tableRowGreen {
background-color: #8DAF00;
width: 0px;
padding-left: 4px !important;
padding-right: 0px !important;
display: compact;
height: 100%;
}
Setting height to 0 works fine for FF, but breaks the others. Using browser specific selectors isn't working:
-ms-height: 100%;
-webkit-height: 100%;
-moz-height: 0;
If you want to target spesific css for Firefox, this is the solution I use:
#-moz-document url-prefix()
{
/* Css for FF here */
}
Obviously, this is something one should generally avoid, but in some cases it's virtually impossible to get around it.
Related
I am using Flying Saucer to generate PDF in my project for long time already. My documents have header and footer repeated on each page. Everything is working fine.
Now I got a requirement to add support of arabic texts in the documents. I embedded the font with Arabic characters and implemented RTLTextReplacedElementFactory (copied from flying saucer support group). Arabic text is displayed OK while it is in a page. If arabic text is inside of the footer, then it is positioned incorrectly:
The footer is created using the following CSS:
#page {
#bottom-left {
content: element(footer);
vertical-align: top;
border-top: 1px solid black;
}
size: A4 portrait;
margin: 2cm;
}
html,
body {
font-family: 'Roboto', sans-serif;
font-size: 12pt;
}
.arabic {
font-family: "Noto Sans Arabic", sans-serif;
font-size: 10pt;
font-style: normal;
font-weight: 100;
}
div#footer {
display: block;
position: running(footer);
}
I do not understand why the arabic text is incorrectly positioned and I do not understand where to start debugging (also, if it possible to have arabic texts in the running footer at all).
The example project is here https://github.com/igorbljahhin/flying-saucer-issue-with-arabic-in-footer.
The issue is reproduced with iText5 and with OpenPDF.
I think RTLText.java:222 should be:
float dist = box.getAbsY(); //from box top to page bottom
I think that the bottom left corner of the page is the origin (0,0), X increases from left to right and Y increases from bottom to top. If box.getAbsY() gives you the Y coordinate of the top of the box, it is should be exactly the distance "from box top to page bottom".
I'm trying to make the second menu sticky below the first menu. The first menu has been made sticky by default (Theme setting).
As the height of the first menu varies for mobile/desktop, I can't set top: 120px or something.
I did try position:sticky and got it to work reasonibly well, however the issues start when testing it on mobile.
So; is there a possibility to make the second menu sticky below the first one?
https://www.salonivon.nl/custom-webshop-tryout/
Thanks in advance,
Richard
The code I used was:
`.my-extra-WooWidget{
position: sticky;
top: 104px;
z-index: 100;
background:white;
width:100%;
padding-bottom:10px;
}
`
This works as long as I'm on the desktop screen.
I'm not able to change the header tho
I would suggest using a fixed position and setting the CSS for top: top: 105px, then using media queries set a different value for mobile screen sizes. Here's a code sample:
widget.my-extra-WooWidget {
top: 105px; /*Use a suitable value here*/
left: 0;
right: 0;
background-color: #fff;
position: fixed;
z-index: 1;
}
#media (max-width: 768px) /*Use a suitable screen size here*/ {
top: 76px; /*Use a suitable value here*/
}
I am developing some custom controls for use in an RCP app. One control is a couple of Labels on a Composite. I gave the Composite a CSS Id and tried to apply this style:
#ImageSelectorButton, #ImageSelectorButton > *
{
font-size: 28pt;
color: rgb(51, 204, 153);
background-color: #ffffff;
}
When the app starts, the control is displayed but the background is transparent. I tried using background-color: rgb(255,255,255,255); but the result is the same.
If the style is changed to background-color: #fffffe; the background is (almost) white and opaque.
Is this a bug or working as intended?
I have a <p:menubar> in a xhtml template. The div that surrounds it has these CSS properties:
position: fixed;
top: 44px;
width: 100%;
So I can fix the menu header while user scrolls down the page.
The problem now is that some Prime Faces component have icons and headers overflowing the menu.
I tried to work with z-index but no success. I imagine that there is another solution in PrimeFaces instead of z-index.
Thanks a lot.
According to the PrimeFaces default style sheet primefaces.css, the <p:message(s)> icon is relatively positioned.
.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
background: url("/omnifaces/javax.faces.resource/messages/messages.png.xhtml?ln=primefaces") no-repeat;
display: block;
float: left;
margin: 0;
padding: 0;
position: relative;
}
I'm in first place not sure why it's relatively positioned as it doesn't seem to need to be offsetted nor have any absolutely positioned children. Perhaps it's been used as some (most likely IE-specific) workaround/hack for something else (if this was "has layout" related, the developer would better have used overflow: hidden instead for this). So just making it the default position: static should fix it.
Add the following to your override stylesheet to achieve this:
.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
position: static;
}
Alternatively, you could of course also set z-index of the menu with an insane high value, as you figured out yourself. I wouldn't consider this a reliable solution though, this is too much a workaround/hack.
Resolved it by setting the z-index: 9999999 to the <p:outputPanel> sorrounding the menu instead of setting the style property in the menu.
Can we get the value from inside a css definition in the code if CSS resource is used?
e.g.
.iv_menu_thumbnail {
display: block;
width: 24px;
height: 24px;
margin: 3px;
float: left;
cursor: pointer;
}`
Can we know via code the value of width and i want to access from one of my java class?
Thanks in advance
var width = $('.iv_menu_thumbnail').width();
console.log(width);
This will get the width of the element if this is what youre asking for.
As far as I'm concerned you cannot get non numerical values from a css declaration.
But you can set your own values via jQuery using the
.css()
So it would look like this if you want to set a new css value. (or overwrite it)
$(someelement).css('float', 'left');
As far as I know, you can only inspect the computed CSS property on an element where this has been applied. Like:
$(someElementOrId).css('width');
or
$(someElementOrId).width();
Note that the former and the latter differ - the former does not contain the unit of measure, the latter does.
You can have a variables in your Css Resource file and set the width attribute with that variable, and then access the width varialbe from code.
CssResource
Css Resource file
#def small 1px;
#def black #000;
border: small solid black;
Java Code
interface MyResources extends CssResource {
int small();
}