• Post Reply Bookmark Topic Watch Topic
  • New Topic

inputText with vertical alignment with label  RSS feed

 
sanju dharma
Ranch Hand
Posts: 45
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

I need to display label and Text-Box resulting from inputText tag in vertical fashion. Means, text-box should be displayed below label.

All implementations, including Oracle ADF and Tomahawk, doesn't have setting to display 'Label" and "Text box" vertical aligned rather than horizontally.

Is there any other library where I can get inputText component with vertical alignment ? Any other way ?

Thanks !
 
Mark Spritzler
ranger
Sheriff
Posts: 17309
11
IntelliJ IDE Mac Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Well it really isn't the UIComponents responsibility of where it puts the Label. It is something you can adjust and change with CSS, or putting a break in between the label and the UIComponent. The tag for the input text does not have to have a label, it could be a seperate tag just for the label.

That is why you don't see anything in the tag that sets this.

Mark
 
sanju dharma
Ranch Hand
Posts: 45
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks for reply.
I agree that if I have Label as separate entity I can control its positions. Did you say that I can control this using CSS in af:inputText tag itself ?
 
Mark Spritzler
ranger
Sheriff
Posts: 17309
11
IntelliJ IDE Mac Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by sanju dharma:
Thanks for reply.
I agree that if I have Label as separate entity I can control its positions. Did you say that I can control this using CSS in af:inputText tag itself ?


Yes, you can control any of it with CSS. Understand that while your jsp or xhtml page has <h:inputText> when it gets requested on the server, it transforms them into actual Html, so you can look at the source of the page, see the html that it creates and put those tags into the CSS file, or I believe you can always put a styleClass attribute in the <h:inputText styleClass="labelOnTop" and put a labelOnTop class in the CSS file.

Mark
 
sanju dharma
Ranch Hand
Posts: 45
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Mark for the reply.

This inputText is inside h:form and when I see HTML it has created a table, label and text-box are in separate td tags. I am not CSS programmer, but somehow I feel it wouldn't be that easy to make these two entities in two TRs rather in TDs using CSS.

Is this usual way of dealing with changing rendering of JSF tags ?

Thanks again reply.
 
Abiodun Adisa
Ranch Hand
Posts: 495
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by sanju dharma:
Hi,

I need to display label and Text-Box resulting from inputText tag in vertical fashion. Means, text-box should be displayed below label.

All implementations, including Oracle ADF and Tomahawk, doesn't have setting to display 'Label" and "Text box" vertical aligned rather than horizontally.

Is there any other library where I can get inputText component with vertical alignment ? Any other way ?

Thanks !



Another way to effectively group components vertically is by using <PanelGrid> component, it arranges your components vertically , resulting in a HTML table Tag
 
sanju dharma
Ranch Hand
Posts: 45
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you very much for the response.

For using panelGrid, I need to break inputText tag into two, outputText ( for label) and inputText itself ( for input text box ) with no value for label.

I am new to JSF. So I am still not convinced that I need to break inputText to make label placed at top of input text-box. Also ( as mentioned earlier ), I dont think one should write complex CSS to make that happen.
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
General rules for JSF:

1. Avoid using vanilla HTML tags. If you must use them, it's safest to wrap them in JSF "verbatim" tags.

2. JSF tags usually employ CSS in favor of local style attributes. This is especially true of complex tags such as calendar displays, where there's lots of different sub-items whose appearance is customizable.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!