My extension is an overlay that has some images inside a toolbar. I need to display these images small (about 15px), but they render always at the same height of toolbar.
I've already tried to define height and maxHeight of image and of hbox where them are palced but it doesn't work.
here is the piece of code:
...
<toolbox id="navigator-toolbox">
<toolbar id="my-toolbar">
<label>images:</label>
<hbox id="rsour_inputRating">
<image id="rsour_1" />
<image id="rsour_2" />
<image id="rsour_3" />
<image id="rsour_4" />
<image id="rsour_5" />
</hbox>
<toolbarseparator />
...
The correct way is to use -moz-box-align in CSS, or align attribute in xul, so the image doesn't stretch vertically:
#rsour_inputRating{
-moz-box-align:center;
}
#rsour_inputRating img{
list-style-image : url("chrome://...");
width:20px;
height:15px;
}
At the top of the file, add:
<?xml-stylesheet href="chrome://your_ext_name/content/cssFile.css" type="text/css"?>
Then in the css file:
#rsour_inputRating img {height:15px;}
Related
I'm using SVG for an image in a button. But I'm not able to fill in color for it through CSS.
Below is the code to render a button.
<Button onAction="#closeApplication" >
<graphic>
<SVGPath content="M10,16 10,0 0,8z" styleClass="button‐icon‐shape" />
</graphic>
</Button>
here is the css
.button-icon-shape SVGPath{
-fx-fill: red;
}
here is how it worked.
I had to style the button and use the class to style the svg in the button.
<Button onAction="#closeApplication" styleClass="closeButton">
<graphic>
<SVGPath content="M10,16 10,0 0,8z" />
</graphic>
</Button>
here is the css
.closeButton{
}
.closeButton SVGPath{
-fx-fill: red;
}
I am aware this is an old question but this OP solution is not the best one to my mind. If you encountered the same kind of problem, my advise is to read the JavaFX CSS Reference Guide (JFX 8) and especially the redirection to this selectors link.
The simplest solution here with the initial code was the following:
<Button onAction="#closeApplication">
<graphic>
<SVGPath content="M10,16 10,0 0,8z" styleClass="button-icon-shape" />
</graphic>
</Button>
And the JavaFX CSS associated would be :
.button-icon-shape {
-fx-fill:red;
}
The dilemma: make a full window svg image that fills WITH aspect distortion, WITHOUT using an SVG tag. Why no svg tag? Because I intend on swapping out the SVG later (if not frequently) in the life of the page, and I have not found an easy way to do that.
The failed attempts:
<!-- for the record, my style are in a css file,
for example purposes they are style attrs-->
<!-- Working in Webkit but not in firefox, in firefox blocks stretching
and places the svg in the middle of the tag-->
<img src="my.svg" style="width:100%;height:100%;
position:fixed;top:0;left:0;bottom:0;right:0;" />
<!-- Both Webkit and Firefox block distortion, so the svg
appears centered in the div rather than conforming to the div-->
<div style="width:100%;height:100%;position:fixed;top:0;
left:0;bottom:0;right:0;background-size:cover;
background-image:url(my.svg);" />
I have also tried
background-size:contain;
background-size:cover;
background-size:100% 100%;
background-postion: center center;
but no luck.
I got this to work in Firefox, Chrome, and Safari using
<img src="my.svg" style="width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;" />
The trick was to make sure the SVG I was displaying had preserveAspectRatio="none" set in the root. Also, I had to either delete the viewBox in the SVG, or make sure it tightly cropped the image content.
For example:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 5 3">
<desc>Flag of Germany</desc>
<rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
<rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
<rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
</svg>
Hopefully you have control over the content of the SVG files you are trying to display. :-)
Here's a jQuery solution. As you can see, I'm using it with an SVG without <svg>
The css
#bgImage{
position:absolute;
left:0;
top:0;
}
The html
<object width="10" height="10" id="bgImage" data="resources/runner.svg" type="image/svg+xml"></object>
The javascript
//resize the background image
function resizeImage($selection){
//get the ratio of the image
var imageRatio = $selection.width() / $selection.height();
//get the screen ratio
var screenRatio = $(window).width() / $(window).height();
//if the image is wider than the screen
if(imageRatio > screenRatio){
$selection.height($(window).height()); //set image height to screen height
$selection.width($(window).height()*imageRatio); //set the correct width based on image ratio
}
//if the screen is wider than the image
else{
$selection.width($(window).width()); //set the image width to the screen width
$selection.height($(window).width()/imageRatio); //set the correct image height based on the image ratio
}
}
Run this whenever you want to resize the image, typically on "onresize" and "onload"
$(window).resize(function(){
resizeImage($("#bgImage"));
}
I am trying to insert an image in a button using JavaFX CSS. Although, I can do it easily using the "-fx-graphic" tag, I cannot find a way to resize the image in whatever size I want.
I can do this through the following FXML code, where I give 30 to my preferred width of image, but I would like to do this with pure CSS. Is there any way to do that?
FXML
<Button text="Press Me">
<graphic>
<ImageView fitWidth="30">
<image>
<Image url="myImage.png"/>
</image>
</ImageView>
</graphic>
</Button>
CSS
#buttonWithImage {
-fx-graphic: url("myImage.png");
}
I had the same problem and found a workaround: instead of using -fx-image, I use -fx-background-image.
Note: I use an additional lib to use svg file in the following example.
CSS
#buttonWithImage {
-fx-background-image: url('myimage.svg');
-fx-background-size: 30px;
-fx-background-repeat: no-repeat;
-fx-background-position: 90%;
}
I was wondering How one can achieve following button style where text resides underneath of image in JavaFx?
I tried a lot but all in vain. Any help would be appreciated.
The key is the contentDisplay property, set it to "TOP".
With fxml:
<Button contentDisplay="TOP" layoutX="101.0" layoutY="51.0" mnemonicParsing="false" text="Button">
<graphic>
<ImageView mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#image.png" preserveRatio="false" smooth="false" />
</image>
</ImageView>
</graphic>
</Button>
Or CSS:
.your-selector {
-fx-content-display: top;
}
Check the CSS reference here.
You can simply achieve that just by doing
Button b = new Button("text", graphics);
b.setContentDisplay(ContentDisplay.TOP);
And for cool icons, take a look at http://fxexperience.com/controlsfx/features/ it include icone from FontAwesome and IcoMoon
I'm trying to add a scrollbar to a firefox extension so that it displays when the window is too small.
I'm having issues with having the scrollbar span the entire range from top to bottom of the sidebar and only having it displayed when the window is too small.
One extension that has the functionality I would like is the sage extension, however searching through the CSS and XUL, I'm unable to figure out how it works.
XUL File
<vbox flex="1" id="main" align="center" pack="end" maxwidth="300">
<spacer height="10"/>
<image id="logo" maxwidth="300"/>
<spacer height="20"/>
<vbox id="button" flex="1">
<button id="a-button" label=""/>
<spacer height="20"/>
<listbox id="listbox1" width="300" maxwidth="300" rows="6">
<listhead id="list-header">
<listheader label=""/>
</listhead>
</listbox>
<spacer height="20"/>
</vbox>
<tabbox id="details-box" maxwidth="300">
<tabs id="tabs">
<tab id=a"-label" label="" style="text-align: center;"/>
</tabs>
<tabpanels>
<vbox>
<button id="another-button" label="" />
</vbox>
</tabpanels>
</tabbox>
<spacer height="20"/>
<vbox maxwidth="300">
<description id="message" style="display: none;">
<!-- updated with ajax -->
<html:h1 id="header"/>
<html:p id="body"/>
</description>
</vbox>
<spacer flex="10"/>
</vbox>
<spacer flex="10"/>
</page>
Relevant CSS
/* Main */
{
padding: 0;
margin: 0;
}
#sidebar {
background-color: #fff;
font: 10pt "arial", "sans-serif";
line-height: 11pt;
}
vbox#main {
padding-left: 20px;
padding-right: 20px;
/* min-height: 600px; */
min-width: 330px;
overflow-x: hidden;
overflow-y: auto;
}
How it currently looks
Example Screenshot http://img203.imageshack.us/img203/7209/screenshot20100805at201.png
Desired effect in Sage Extension
Sage Relevant Screenshots http://img193.imageshack.us/img193/9206/sageexample.png
The problem is that vbox#main was not the only child node of . I also had a panel in there which would popup based on some action.
By moving the panel inside of vbox#main, vbox#main would span the entire space of the sidebar.