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.
Related
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.
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.
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=panelMenu&skin=blueSky
The above link has a demo which is similar to what we have on our application, but we would like for the collapse/expand behavior to act a little differently.
We have our menu starting completely expanded, but we basically want the user to have complete control over collapsing and expanding the menus. For example if you open the top one in the demo and then open the second one the first one closes. Is there a way to only collapse and expand onclick? This seems like it should be the default behavior.
So basically here is what I have:
<rich:panelMenu>
<a4j:repeat>
<rich:panelMenuGroup>
<a4j:repeat>
<h:link />
</a4j:repeat>
</rich:panelMenuGroup>
</a4j:repeat>
</rich:panelMenu>
I want to be able to open and close each rich:panelMenuGroup without it affecting the rest of the other rich:panelMenuGroup elements.
It's as simple as: <rich:panelMenu expandSingle="false">
I am using Liferay 6.1 and need collapsible(!) <liferay-ui:panel-container>s to be nested (at least 2 layers deep).
I tried
<liferay-ui:panel-container extended="true" id="outerPanelContainer">
<liferay-ui:panel collapsible="true" title="outer panel">
outer content
<liferay-ui:panel-container extended="true" id="innerPanelContainer">
<liferay-ui:panel collapsible="true" title="inner panel">
inner content
</liferay-ui:panel>
</liferay-ui:panel-container>
</liferay-ui:panel>
</liferay-ui:panel-container>
but I get 2 "panels" that are not collapsible, as well as the outer panel not looking like a panel.
I'm not sure what I could be doing wrong.
edit: Removing the inner container tag solves part of the problem: The panels are collapsible again, but this also removes the "[+]" and "[-]" icons on them, so the user does not get a visual clue that they're collapsible.
Work for me, or I don't understand what do yout want to achieve, see screenshot:
I have a web page that queries database dynamically to display data on the page, similar to database tool like Toad etc. (not even close of course :), example for illustration only).
The problem is data gets trimmed when displayed on the page. This is how I display data using JSF
<h:outputText value="#{record[columnIndex].toDisplayString()}" />
I believe it is about html rendering. What should I do? Write an html encoder? How? Help would be highly appreciated.
The <h:outputText> doesn't trim the value at all.
Perhaps you're talking about whitespace like leading/trailing spaces, tabs, newlines, carriage returns, etc in the value, which have by default totally no meaning in HTML markup. It just becomes part of the HTML source code, but not the HTML presentation. Newlines, for example, are in HTML to be represented by the <br> element, not by the \n character.
If you'd like to preserve the whitespace in a HTML element node as it is in the HTML source code, then you need to set the parent HTML element's CSS white-space property to pre in order to preserve it. If you'd like to wrap lines in block elements, then use pre-wrap.
E.g.
<h:outputText ... styleClass="preformatted" />
with
.preformatted {
white-space: pre-wrap;
}
An alternative is to convert the text to valid HTML markup yourself. E.g. replacing every occurrence of \n character by the <br/> string. You could use an EL function for this.
See also:
Component to inject and interpret String with HTML code into JSF page