I'm using Java to create dinamically images and put them into a jsp page.
This works fine in all browsers, except for IE 7.
I'm using Data URIs in my jsp to populate tags (I'm using a base64 string).
I've found many solutions for IE, but no one refers to images dinamically created in Java.
This is one of the solutions found with css:
/*
Content-Type: multipart/related; boundary="MYSEPARATOR"
--MYSEPARATOR
Content-Location: myimage
Content-Transfer-Encoding: base64
iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC
--MYSEPARATOR--
*/
#test1 {
width: 100px;
height: 100px;
background-image:url(mhtml:http://......./test.css!myimage);
}
It works but I can't change in css the base64 string dinamically.
How can I solve this problem for explorer 7?
Thanks in advice.
For solution to this problem You can try the following things:-
First of all see that the html version you are using is html4 or html5 because these both support cross browse compatability.
2.Try changing CSS Transparency settings for all browsers.
Try using the following code:-
a.transeffect:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
If the above code doesn't work then try by removing the -khtml-opacity: 0.5; line from the code.
Related
I am developing a web application for learning purpose using java spring and Thyme leaf template engine.
In one of my Thymeleaf page, I want to add an image as a background-image using inline CSS. My image is in the static folder,
I have tried to use various method found on the internet but none of them worked.
I've searched and unfortunately failed to find out the solution to this problem.
I've tried to th:style tag and searched in google to find out how this tag works but unfortunately couldn't able to understand this tag properly.
I've added the code and the screenshot of the error.
blockquote class="imgur-embed-pub" lang="en" data-id="a/TOr6Nyn"><a >
href="//imgur.com/TOr6Nyn"></a></blockquote><script async
src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
th:style="'background-image: url('+
#{~/frontend/images/blog/default/thum1.jpg}+')'"
You should add the style attribute to your div as:
style="background-image: url(<c:url value="/resources/images/bg_1.jpg"/>)"
I have also tried static image but it does not work.
But if u want to show image on page use base64 of that image.
Use this code on your thyme leaf page:
<img th:src="#{data:image/png;base64,YOUR BASE 64}
I'm using Chrome and I'm getting a weird display for the primefaces p:selectOneMenu:
And sometimes it is shown correctly like this:
I couldn't find any css rule to override, any one faced this before?
Add this to your css file:
.ui-selectonemenu-label{
width:100% !important;
}
.ui-selectonemenu{
width:100% !important;
}
I just faced an interesting thing concerning HTML widget. The thing is...
If a word length is too long per line then HTML widget becomes wider to have it all placed in
so my question is... is it possible to make HTML widget to cut by pieces long words not to getting wider itself?
Comparing to Swing, I mean the effect something like JTextArea does when word wrapping is off (see image)
EDIT
I tried to use css word-break: break-all; here is the code:
composite code:
public MyTestUI(){//constructor
html.setStyleName("my-test");
}
public void setLongWord(String word)//method
{
html.setHTML(word);
}
css
.my-test {
color:gray;
font-family:verdana;
white-space: normal;
word-break: break-all;
}
... the css works in Chrome but doesn't in FF :( How to make the word breaking the crossbrowser one ?
GWT version 2.3
Any useful comment is much appreciated
Use CSS property word-wrap:break-word as described in following link. This will work even if the HTML widget is having static height and width.
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Use CSS property word-break:normal; or try word-break:hyphenate;
Add a CSS style to your HTML widget to break long words:
http://www.w3schools.com/cssref/css3_pr_word-break.asp
EDIT:
I stay corrected: word-wrap is a better option. See more:
What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS
Is it possible to change the header style of a rich:simpleTogglePanel ?? The font of the header is always "bold" and I want it to be normal.
I tried with the style attribute this way: style="font-weight:normal" without result.
Any idea?
Have you tried putting the !important at the end of your style definition(i.e. style="font-weight:normal !important;")?
Also, as I'm sure you are aware, it is usually better to specify your style in a separate stylesheet. I've customized the <rich:extendedDataTable in this manner (not sure if this is a hack or not, but it works great for me). Open your page in a browser and then crack open the developer tools (press F12 in Firefox with FireBug installed, or in Chrome right click on the rich:SimpleTogglePanel and click 'Inspect Element'. This will let you see the CSS definition name used by the RichFaces framework. Just create a new .css file and define the style you want using the name you find RichFaces is using.
/*This class defines styles for a table cell.*/
/*tableBorderWidth, tableBorderColor border-bottom*/
/*tableBorderWidth, tableBorderColor border-right*/
.rf-edt-c {
border-bottom: 1px solid #021e2f;
border-right: 1px solid #021e2f;
height: auto !important;
min-height: 26px;
}
As you can see, you may need to specify the !important tag there as well, but it keeps the style outside of your page...
Hope this helps.
This is from the Primefaces docs:
Button Icons
An icon on a button is displayed using
CSS and image attribute.
<p:commandButton value=”With Icon” image=”disk”/>
<p:commandButton image=”disk”/>
.disk is a simple css class with a
background property:
.disk {
background-image: url(‘disk.png’) !important; }
My question is: where does this url() point to? In other words, where should I put my images so that the CSS could access it?
I've tried /resources, /resources/img, no luck. Yes, it was working with an absolute URL (one that includes the context path), but that makes the application not portable.
Simple solution:
IF you are using JavaServer Faces 2.0 you have chance to put all resources inside specially designed directory. So you need to have this folder structure in web app:
-rootdir
--resources
---images
----disk.png
And to receive image in css background you should type something like this:
.disk {
background: url(#{resource['images/disk.png']}) !important;
}
It looks like your question is more concerned with the client-side aspects of things, so even though I don't know Primefaces, here's a stab at answering it:
CSS paths are relative to the location of where the CSS rule is declared.
If this is in your HTML (in a <style> block), then disk.png has to be in the same directory as your file.
If this rule is in a separate CSS file, then disk.png should be in the directory where the CSS file is.
If you create a directory images, then the directory will be relative from the CSS too.
Hope this helps?
I faced the same problem for a moment and I reckon documentation about it is unclear!
It works this way for Primefaces commandButton and similar (menuItem, submenu, etc):
What I did is:
Download a theme from the theme library in PrimeFaces website (example: aristo or redmond).
Unzip the archive to your web application resources folder, (in my case: root/resources/css/aristo
Notice that in aristo folder you have : theme.css and /images folder where an indexed png image contains all the icons used by the theme.
If you open the theme.css you'll notice that to access an indexed image icon you should call two classes : .ui-icon and .ui-icon-theiconyouwant (the .ui-icon retrieves the index png using #{resource['primefaces.......png']} and .ui-icon-agivenicon delimit the icon by its X & Y position (index) in the png image).
Now output the theme.css into you application, by using **<h:outputStyleSheet />**. Best way to do it is between tags of your template.
So in your xhtml or jsp, do **<p:commandButton image="ui-icon ui-icon-someicon"} />**.
Now if you want to add your personal images to use with a <p:commandButton, create classes in theme.css :
.smiley {
background-image: url("#{resource['images/smiley.png']}") !important; /this will be ignored by Internet Explorer if not compatible/
width: 16px;
height: 16px;
}
Normally JSF accesses the first images folder available within your resources folder.
Now do: <p:commandButton image="smiley" value="Smile" />