Change Default font color / style for readonly field
Locked
Change Default font color / style for readonly field
 
|
Hello all,
How can I change the Style / Font Color of the readonly fields (e.g. those input fields with a bind calculations). I found that all the readonly fields was set to grey color by default, I have tried to add a class in my xform CSS call: .input-readonly { color:black;} input.input-readonly { color:black;} .input-readonly input { color:black;} also, I have tried to change the class in /config/theme/xforms.css, but it seems not working, can anyone please advise a way? Thanks a lot, -- Nelson. [hidden email] -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help ObjectWeb mailing lists service home page: http://www.objectweb.org/wws |
Re: Change Default font color / style for readonly field
|
Administrator
|
Nelson,
What browser are you using? IE won't allow you to style read-only controls for example. But you are not using the right classes anyway. Try things like: .xforms-readonly input { ... } instead. -Erik Nelson Tsang wrote: > Hello all, > > How can I change the Style / Font Color of the readonly fields (e.g. > those input fields with a bind calculations). > I found that all the readonly fields was set to grey color by default, I > have tried to add a class in my xform CSS > call: > .input-readonly { color:black;} > input.input-readonly { color:black;} > .input-readonly input { color:black;} > > also, I have tried to change the class in /config/theme/xforms.css, but > it seems not working, can anyone please advise a way? > Thanks a lot, > -- > Nelson. > [hidden email] <mailto:[hidden email]> Orbeon Forms - Web Forms for the Enterprise Done the Right Way http://www.orbeon.com/ -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help ObjectWeb mailing lists service home page: http://www.objectweb.org/wws |
Re: Change Default font color / style for readonly field
|
|
Erik,
Thanks a lot, however, I'm using IE, unfortunately. :( is there any workaround for IE user instead? Best regards, -- Nelson. On 2/2/07,
Erik Bruchez <[hidden email]> wrote: Nelson, -- -- Nelson. [hidden email] -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help ObjectWeb mailing lists service home page: http://www.objectweb.org/wws |
Re: Change Default font color / style for readonly field
|
Administrator
|
Nelson,
Are you talking about input fields specifically (xforms:input)? Or are you talking about other controls? If it is text fields, don't you want the user to have some visual indication that the field is read-only? Alex On 2/3/07, Nelson Tsang <[hidden email]> wrote: > Erik, > > Thanks a lot, however, I'm using IE, unfortunately. :( > is there any workaround for IE user instead? > > Best regards, > -- > Nelson. > > > On 2/2/07, Erik Bruchez <[hidden email]> wrote: > > > > Nelson, > > > > What browser are you using? IE won't allow you to style read-only > > controls for example. > > > > But you are not using the right classes anyway. Try things like: > > > > .xforms-readonly input { ... } > > > > instead. > > > > -Erik > > > > Nelson Tsang wrote: > > > Hello all, > > > > > > How can I change the Style / Font Color of the readonly fields (e.g. > > > those input fields with a bind calculations). > > > I found that all the readonly fields was set to grey color by default, I > > > have tried to add a class in my xform CSS > > > call: > > > .input-readonly { color:black;} > > > input.input-readonly { color:black;} > > > .input-readonly input { color:black;} > > > > > > also, I have tried to change the class in /config/theme/xforms.css, but > > > it seems not working, can anyone please advise a way? > > > Thanks a lot, > > > -- > > > Nelson. > > > [hidden email] <mailto: [hidden email]> > > > > -- > > Orbeon Forms - Web Forms for the Enterprise Done the Right Way > > http://www.orbeon.com/ > > > > > > > > -- > > You receive this message as a subscriber of the [hidden email] > mailing list. > > To unsubscribe: > mailto:[hidden email] > > For general help: mailto: [hidden email]?subject=help > > ObjectWeb mailing lists service home page: http://www.objectweb.org/wws > > > > > > > > -- > -- > Nelson. > [hidden email] > > -- > You receive this message as a subscriber of the [hidden email] > mailing list. > To unsubscribe: mailto:[hidden email] > For general help: mailto:[hidden email]?subject=help > ObjectWeb mailing lists service home page: http://www.objectweb.org/wws > > -- Orbeon Forms - Web Forms for the Enterprise, Done the Right Way http://www.orbeon.com/ -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help ObjectWeb mailing lists service home page: http://www.objectweb.org/wws |
Re: Change Default font color / style for readonly field
|
|
Hello Alex,
Yes, I'm thinking of the input fields (xforms:input). The case is, for example, I have some fields which do the auto calculation in the form which is make read-only. However, it become grey out that is not what I want (since the grey color is a little bit hard to read in my form.) also, for another example, user will read the form in read-only mode, the entire form cannot be changed, in this case, the text in the form become light grey. it is hard to read and not nice for the user. All I want to do is to change the font color or the style of the input boxes. I can use (xforms:output) in case 1, but it look a little bit odd as those will display without the boxes. For case two, I have no idea how to make it work. -- Nelson.
On 2/4/07, Alessandro Vernet <[hidden email]> wrote: Nelson, -- -- Nelson. [hidden email] -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help ObjectWeb mailing lists service home page: http://www.objectweb.org/wws |
Re: Change Default font color / style for readonly field
|
Administrator
|
Hi Nelson,
On 2/4/07, Nelson Tsang <[hidden email]> wrote: > Yes, I'm thinking of the input fields (xforms:input). The case is, for > example, I have some > fields which do the auto calculation in the form which is make read-only. > However, it become > grey out that is not what I want (since the grey color is a little bit hard > to read in my form.) You can do this with CSS, by adding to your page, in the <xhtml:head>: <xhtml:style type="text/css"> .xforms-readonly input { background: white; color: black; } </xhtml:style> This changes the way the browser renders disabled text fields. But the browser renders disabled text fields like this for a reason: it give a cue to the end user that the value cannot be modified. So I am wondering if in this case using an <xforms:output> is not a better option. > also, for another example, user will read the form in read-only mode, the > entire form cannot be > changed, in this case, the text in the form become light grey. it is hard to > read and not nice for > the user. The "view readonly" in the "Government Forms" example does this with the xxforms:readonly-appearance attribute on <xforms:model>. This is a simple way to create a read-only view a form (for instance for printing) without having to spend to much time on styling. See for instance how this attribute is used in resources\apps\forms\detail\detail-view.xhtml. Alex -- Orbeon Forms - Web Forms for the Enterprise, Done the Right Way http://www.orbeon.com/ -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help ObjectWeb mailing lists service home page: http://www.objectweb.org/wws |
Re: Change Default font color / style for readonly field
|
Administrator
|
Alessandro Vernet wrote:
> Hi Nelson, > > On 2/4/07, Nelson Tsang <[hidden email]> wrote: >> Yes, I'm thinking of the input fields (xforms:input). The case is, for >> example, I have some >> fields which do the auto calculation in the form which is make read-only. >> However, it become >> grey out that is not what I want (since the grey color is a little bit >> hard >> to read in my form.) > > You can do this with CSS, by adding to your page, in the <xhtml:head>: > > <xhtml:style type="text/css"> > .xforms-readonly input { background: white; color: black; } > </xhtml:style> > > This changes the way the browser renders disabled text fields. But the > browser renders disabled text fields like this for a reason: it give a > cue to the end user that the value cannot be modified. So I am > wondering if in this case using an <xforms:output> is not a better > option. really a solution since Nelson uses IE. -Erik -- Orbeon Forms - Web Forms for the Enterprise Done the Right Way http://www.orbeon.com/ -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help ObjectWeb mailing lists service home page: http://www.objectweb.org/wws |
Re: Change Default font color / style for readonly field
|
|
Erik Bruchez wrote:
> Alessandro Vernet wrote: >> Hi Nelson, >> >> On 2/4/07, Nelson Tsang <[hidden email]> wrote: >>> Yes, I'm thinking of the input fields (xforms:input). The case is, for >>> example, I have some >>> fields which do the auto calculation in the form which is make >>> read-only. >>> However, it become >>> grey out that is not what I want (since the grey color is a little >>> bit hard >>> to read in my form.) >> >> You can do this with CSS, by adding to your page, in the <xhtml:head>: >> >> <xhtml:style type="text/css"> >> .xforms-readonly input { background: white; color: black; } >> </xhtml:style> >> >> This changes the way the browser renders disabled text fields. But the >> browser renders disabled text fields like this for a reason: it give a >> cue to the end user that the value cannot be modified. So I am >> wondering if in this case using an <xforms:output> is not a better >> option. > > Plus IE 6 ignores styling of read-only controls, so styling is not > really a solution since Nelson uses IE. > > -Erik Best bet is to stick to an output, and perhaps try and style it in such a way that the user still understands it's 'data' rather than a label etc. (eg different color, underline, etc, box effect using different background color or border, etc) Adrian -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help ObjectWeb mailing lists service home page: http://www.objectweb.org/wws |
Re: Change Default font color / style for readonly field
|
|
Hello Adrian,
Yes, I had tried the way you did, it works on the one hand, however, on the other hand, I need to display the same forms, which has input fields with values, in a read-only mode. The entire form is read-only and I cannot make all the fields as output. I think the only way at this moment is the xxforms:readonly-appearance attribute, how can I change the style of that attribute in the CSS is my next question. Thanks, -- Nelson.
On 2/7/07, Adrian Baker <[hidden email]> wrote: Erik Bruchez wrote: -- -- Nelson. [hidden email] -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help ObjectWeb mailing lists service home page: http://www.objectweb.org/wws |
Re: Change Default font color / style for readonly field
|
|
Hi Nelson,
I can't help you with xxforms-readonly-appearance, but one option is to put both input & output fields in the form, then display either then inputs or outputs, depending on whether you're in readonly mode. You could control this using XForms: <xf:output ref="apple[instance('mode') = 'readonly']"/> <xf:input ref="apple[instance('mode') = 'edit']"/> Or alternatively you could preprocess the form definition using XSLT and replace inputs with outputs etc (or even generate the matching outputs using XSLT but still show/hide them using binds/refs). Adrian Nelson Tsang wrote: Hello Adrian, -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help ObjectWeb mailing lists service home page: http://www.objectweb.org/wws |
Re: Change Default font color / style for readonly field
|
Administrator
|
In reply to this post by nelsontsang
Nelson & all, Really, this is why we introduced the xxforms:readonly-appearance attribute: to allow you to produce reasonably nice-looking pages, without having to change all your controls to xforms:output, without dealing with writing complex XPath expressions to output the appropriate labels of xforms:select and xforms:select1 controls, etc. You can see how this is done with the "View Read-Only" mode of the Government Forms sample application. When it comes to styling, and in the absence of a thorough documentation, the "view source" feature of your web browser is your friend. You can also use extensions such as Firebug for Firefox, which allow you to look at your page's DOM really easily. There you can see the classes and elements produced by the XForms engine. You will notice that all the "static read-only" controls have an xforms-static class. You can use this class in your CSS definitions. Still regarding styling, the tutorial covers a few basics in the section "Making Things Look Nicer": http://www.orbeon.com/ops/doc/intro-tutorial#making-things-look-nicer -Erik Nelson Tsang wrote: > Hello Adrian, > > Yes, I had tried the way you did, it works on the one hand, however, on > the other hand, I need to > display the same forms, which has input fields with values, in a > read-only mode. The entire form is read-only and I cannot make all the > fields as output. > > I think the only way at this moment is the xxforms:readonly-appearance > attribute, how can I change the style of that attribute in the CSS is my > next question. > > Thanks, > -- > Nelson. > > > On 2/7/07, *Adrian Baker* <[hidden email] > <mailto:[hidden email]>> wrote: > > Erik Bruchez wrote: > > Alessandro Vernet wrote: > >> Hi Nelson, > >> > >> On 2/4/07, Nelson Tsang <[hidden email] > <mailto:[hidden email]>> wrote: > >>> Yes, I'm thinking of the input fields (xforms:input). The case > is, for > >>> example, I have some > >>> fields which do the auto calculation in the form which is make > >>> read-only. > >>> However, it become > >>> grey out that is not what I want (since the grey color is a little > >>> bit hard > >>> to read in my form.) > >> > >> You can do this with CSS, by adding to your page, in the > <xhtml:head>: > >> > >> <xhtml:style type="text/css"> > >> .xforms-readonly input { background: white; color: black; } > >> </xhtml:style> > >> > >> This changes the way the browser renders disabled text fields. > But the > >> browser renders disabled text fields like this for a reason: it > give a > >> cue to the end user that the value cannot be modified. So I am > >> wondering if in this case using an <xforms:output> is not a better > >> option. > > > > Plus IE 6 ignores styling of read-only controls, so styling is not > > really a solution since Nelson uses IE. > > > > -Erik > I too had this exact problem: disabled inputs are too hard to read in > IE, and there is no way to style them. > > Best bet is to stick to an output, and perhaps try and style it in such > a way that the user still understands it's 'data' rather than a label > etc. (eg different color, underline, etc, box effect using different > background color or border, etc) > > Adrian > > > > > -- > You receive this message as a subscriber of the > [hidden email] <mailto:[hidden email]> mailing list. > To unsubscribe: mailto:[hidden email] > <mailto:[hidden email]> > For general help: mailto:[hidden email] > <mailto:[hidden email]>?subject=help > ObjectWeb mailing lists service home page: http://www.objectweb.org/wws > > > > > -- > -- > Nelson. > [hidden email] <mailto:[hidden email]> > -- Orbeon Forms - Web Forms for the Enterprise Done the Right Way http://www.orbeon.com/ -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help ObjectWeb mailing lists service home page: http://www.objectweb.org/wws |
«
Return to Orbeon Forms community mailing list
|
1 view|%1 views
| Free forum by Nabble | Edit this page |