My question regards the display of h:graphicImage within a h:panelGrid
<h:panelGrid border="0" cellspacing="0" cellpadding="0" >
<h:graphicImage height="63" width="270" value="images/NewAOnly.PNG" />
<h:graphicImage height="60" width="270" value="images/NewABottom.PNG" />
</h:panelGrid>
The top .PNG file is 270 x 63 with no border area. The bottom .PNG is 270 x 60 with no border area.
My question is, with border="0", cellspacing="0" and cellpadding="0", why do the two images not sit one on top of the other with no space between them?
This will happen when you use a strict doctype. Long story short, check the article on Mozilla Developer Network: Images, Tables, and Mysterious Gaps. As to the doctype, you can fix this by using a quirks or transitional doctype (as a quick test, remove the DOCTYPE line altogether). This is however not recommended these days.
If you're absolutely positive that the table is the right tool for your concrete functional requirement of displaying images this way and e.g. a div is for some dubious reason absolutely not an option (and you're fully aware of the importance of "Semantic HTML"), then you can fix this by making the images in table cells block level elements.
td img {
display: block;
}
Please note that this problem is completely unrelated to JSF. JSF is in the context of this question merely a HTML code generator.
Related
I am using PrimeFaces 7.0 on WildFly 16, JSF 2.3. (I also tried with PrimeFaces 6.2- but nothing changed).
I am using p:galleria tag as follows:
<p:galleria value="#{exposeBean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="false">
<p:graphicImage id="image" value="#{image}" alt="#{image}" title="#{image}"/>
</p:galleria>
The above functionality works as expected, however the picture currenlty chosen does not fade at the bottom, where the rest of the images of the gallery are shown- see here:
What can be the reason, how can I solve it?
My minimal, working example seems to have something to do with the size of the images I use (at least, it seems to be like this.) :
https://github.com/alexmivonwien/pf.gall.git
After comparing the generated HTML and CSS in my case and in the case of the primeface galleria showcase I found the following difference:
1.) My own generated HTML and CSS:
note that the first "li" child under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the CSS style (there is no display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px;">
2.) The HTML and CSS on the primefaces showcase:
Note that the first "li" element under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the css style (there is a display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px; display: none;">
The only way this can be reproduced in the PrimeFaces showcase is by assigning an explicit height to the images. E.g. adding a css rule via a browser developer tool like img {height: 364px} makes this happen. This makes the big image btw not fully show what is in the thumbnail, it is cut-off at the right. And this can be seen in your screen dump as well. In the thumbnail there is way more visible of the sink on the right than in the big image. So this is with 100% certainty caused by some css that resizes the image or with a wrong aspect of the image compared to ttge dimensions put om the p:galeria
The actual technical cause of this is however not visible in the code in your question. Next time, always create a [mcve], by reducing more and more and more until you are either left with a very small piece of (complete, verifyable, executable) code that demonstrates the problem, OR you found the solution...
Effectively this problem is all plain css html related and nothing PrimeFaces specific.
I'm making SVG effects by combining 2 identical photos with alternate slits. When you look closely, there are dotted lines 45 degree across the whole images. Referencing this question, I already tried the option shape-rendering="optimizeQuality", shape-rendering="geometricPrecision" and shape-rendering="auto" on <polygon> tags, but the dots still appears.
How do I remove the tiny dots?
Partial HTML codes (full code is too long to post here, see JSFiddle below for full CSS, JS and HTML codes):
<div class="image_wrapper">
<svg id="svg-1" class="clip-svg">
<image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
</svg>
</div>
<div class="image_wrapper2">
<svg id="svg-2" class="clip-svg">
<image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
</svg>
</div>
JSFiddle demo is here
The dots are caused by anti-aliasing of the polygons that you are using for the diagonal slit clipping paths.
IMO there isn't any way to prevent that. It may or may not get better if you turn anti-aliasing off with `shape-rendering="optimizeSpeed". And even if that works on one browser, it may not work on other ones.
My suggestion is to just have a complete ("un-slitted") version of the image on top. Make it invisible initially, then show it once the animation has finished.
I have been using display.none, for the hid-whens for example, all the hidden fields were kept in a section and section was hidden from web by using Display.none.
This is working for Internet Explorer till IE 9, but for IE 10 all the hidden fields are shown.
Can anyone help in this matter. Any alternative or approach.
Without seeing the page it sis very difficult to guess.
Try validating the html through one of the many online html validators as something may not be closed or Notes might have given you an unwanted code addition .
Try adding a background color to the css #wrapper to make sure the css is being called.
Take a copy of the form and start removing all other elements one section at a time to see if something else is causing the issue.
Add {meta http-equiv="X-UA-Compatible" content="IE=10;IE=9; IE=8; IE=7; IE=EDGE" /} as the very top meta tag and see if that fixes it. Replace the curly braces obviously.
All the best in finding the issue.
It sounds like just the section element is getting hidden. Without seeing the code I can't tell why that changes between ie 9 and 10 but ie is famous for having varying behavior between versions.
One alternative that comes to mind: You could wrap the section and the fields in a DIV element using pass thru HTML and set that div's style to display:none. That is pretty standard and should work across browsers.
Update: To give you an idea what I'm talking about, check out this jsfiddle.
HTML:
<form>
<div class="wrapper">
<input type="text" name="Field 1" /><br />
<input type="text" name="Field 2" /><br />
<input type="text" name="Field 3" />
</div>
<span>Some text that won't be hidden.</span>
</form>
CSS:
.wrapper {
#display:none;
}
You can remove the # next to the display:none and see the difference, even in IE 10.
You'll need to look closely at the HTML being rendered by Domino and make sure that in fact all the fields you are trying to hide are surrounded by the DIV that is hidden.
Take an xpage containing a RichText control (this is Domino 8.5.3, so we're using ck-editor).
Quite often tables are used by the users to structure their RT content. One request is to make sure that those tables have a unique formatting esp. regarding cellspacing and cellpadding.
Through Firebug I see that those inserted tables are setting their borders and cell* parameters using html attributes. And of course, since the html inside the editor has been created using "manual" html the xsp engine can't have much influence here.
Before we start writing some client side js to try and remove or manipulate those attributes: maybe there is someone having a neat idea of how we could accomplish this?
Since the output from the RichText control is, AFAIK, always rendered within a <div> with a class called "domino-richtext" one could use CSS to get that identical appearance you're looking for (at least I think with "unique" you mean identical or uniform).
I pasted an HTML structure below, where the user added some cellspacing and cellpadding:
<div class="domino-richtext xspInputFieldRichText" id="view:_id1:inputRichText1">
<table cellspacing="1" cellpadding="2" border="1" dir="ltr">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
...
</tbody>
</table>
<p dir="ltr">Some more content besides the table...</p>
</div>
When the following styles are applied / defined within a theme or stylesheet, all tables, created within the RT control will look the same.
.domino-richtext table {
border-collapse:collapse; /*remove spacing or padding when defined*/
}
.domino-richtext table tbody tr td,
.domino-richtext table thead tr th {
padding: 0; /*define / remove padding*/
border:1px solid #eee; /*border definition for all tables*/
}
Deceptively simple question, but I'm at my wits' end here.
I have a document. It contains a form. Which contains a subform. Which contains a read-only text field. Here's the relevant part of the structure:
<tr:document ...>
<tr:form ....>
<tr:subform ...>
<div ...><div ...>
<tr:panelGroupLayout>
<tr:panelFormLayout>
<tr:inputText id="selectedAmount"
label="#{...}"
value="#{...}"
disabled="true" />
</tr:panelFormLayout>
</tr:panelGroupLayout>
</div></div>
</tr:subform>
</tr:form>
</tr:document>
(none of the attributes on the ... are setting style information.)
Why is it that MyFaces produces for the innermost element a div rather than input type="text"? I've seen forms with (apparently) this exact same structure that didn't have this problem.
The reason why this is silly and unacceptable is because the div, when empty, doesn't show as a box but as a single line (the border collapses since there is no content and no height style). Manually setting a height via css isn't acceptable either, because the font may vary from computer to computer. I really just wanted it to always render an input tag.
Any ideas? Feel free to ask for details if you want to confirm any suspicion. There's too many data for me to just dump everything in here.