Orbeon Forms community mailing list

Including control (xbl) specific CSS to a form

Classic

List

Threaded

6 messages Options

jpenninkhof

Including control (xbl) specific CSS to a form

From reading documentation and looking at other form builder controls, I was hoping that I could add control specific CSS by adding this section to an XBL file:

<xbl:resources>

<xbl:style>

CSS goes here

</xbl:style>

</xbl:resources>

After linking the XBL into form-builder (by adding a "oxf.fb.toolbox.group.phoqus.uri.*.*" value to properties.loca) and using the control in a form, I would have though that the CSS for the control would become visible in the published form. Unfortunately the custom CSS doesn't appear. If there anything else that I forgot to do?

XBL source that I was doing some testing with can be found on:

http://pastebin.com/47RGucjC

Thanks!

--
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
OW2 mailing lists service home page: http://www.ow2.org/wws

thomas.broussard

Re: Including control (xbl) specific CSS to a form

Hi,

Your code seems correct to me, have you well updated the xbl you're trying to display? Sometimes I have to restart the service (tomcat) hosting the orbeon webapp.

Otherwise, the css code should be in a "style" tag directly in the html result: for example

<style rel="stylesheet" type="text/css"> .xbl-fr-upload-fakefile { white-space: nowrap; z-index: 1; text-align:center; cursor: pointer; zoom:1; /*ie alignment layout fix...*/ margin-left:auto; margin-right:auto; } ... </style>
is the result of :

<xbl:resources>
<xbl:style src="/ops/yui/button/assets/skins/sam/button.css" />
<xbl:style>
.xbl-fr-upload-fakefile {
white-space: nowrap;
z-index: 1;
text-align:center;
cursor: pointer;
zoom:1; /*ie alignment layout fix...*/
margin-left:auto;
margin-right:auto;
}
....
</xbl:style>
</xbl:resources>

So I assume you should be able to see this either.

Best regards,

Thomas Broussard

Erik Bruchez

Re: Including control (xbl) specific CSS to a form

Administrator

In reply to this post by jpenninkhof

Yes that should work!

-Erik

On Wed, Jun 13, 2012 at 8:21 AM, Jan Penninkhof <[hidden email]> wrote:

> From reading documentation and looking at other form builder controls, I was
> hoping that I could add control specific CSS by adding this section to an
> XBL file:
>
> <xbl:resources>
> <xbl:style>
> CSS goes here
> </xbl:style>
> </xbl:resources>
>
> After linking the XBL into form-builder (by adding a
> "oxf.fb.toolbox.group.phoqus.uri.*.*" value to properties.loca) and using
> the control in a form, I would have though that the CSS for the control
> would become visible in the published form. Unfortunately the custom CSS
> doesn't appear. If there anything else that I forgot to do?
>
> XBL source that I was doing some testing with can be found on:
> http://pastebin.com/47RGucjC
>
> Thanks!
>
>
> --
> 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
> OW2 mailing lists service home page: http://www.ow2.org/wws
>

jpenninkhof

Re: Including control (xbl) specific CSS to a form

In reply to this post by jpenninkhof

It appears that for reason a template section is compulsory for additional styles to be included.

After I added the following line to the control, it started working:

<xbl:template xxbl:transform="oxf:xslt"></xbl:template>

Is there anyone that knows the reason behind this?

Cheers,

Jan

On Wed, Jun 13, 2012 at 5:21 PM, Jan Penninkhof <[hidden email]> wrote:

From reading documentation and looking at other form builder controls, I was hoping that I could add control specific CSS by adding this section to an XBL file:

<xbl:resources>
<xbl:style>

CSS goes here
</xbl:style>
</xbl:resources>

After linking the XBL into form-builder (by adding a "oxf.fb.toolbox.group.phoqus.uri.*.*" value to properties.loca) and using the control in a form, I would have though that the CSS for the control would become visible in the published form. Unfortunately the custom CSS doesn't appear. If there anything else that I forgot to do?

XBL source that I was doing some testing with can be found on:
http://pastebin.com/47RGucjC

Thanks!

Erik Bruchez

Re: Re: Including control (xbl) specific CSS to a form

Administrator

> It appears that for reason a template section is compulsory for additional
> styles to be included.
> After I added the following line to the control, it started working:
>
> <xbl:template xxbl:transform="oxf:xslt"></xbl:template>
>
>
> Is there anyone that knows the reason behind this?

So you are talking about built-in controls here, like xforms:input? In
Form Builder, built-in components are described as XBL components. but
in fact they are not actual XBL components at this point, and so they
are not processed by the XBL engine. So the CSS is just left out. Now
as soon as you add your empty xbl:template, the XBL engine will do
some processing. But I am almost surprised that it's working at all at
this point ;)

We would like at some point to represent even built-in controls with
XBL, in which case everything would be properly unified, but that's
not the case yet.

-Erik

--
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
OW2 mailing lists service home page: http://www.ow2.org/wws

jpenninkhof

Re: Re: Re: Including control (xbl) specific CSS to a form

I think from my experiments you can already see that I'm really very new with Orbeon and I wasn't even aware that I was using built-in controls. My goal was to split the standard text input control into various controls with different widths, so that I have better control over the length of input fields. As the regular text-input control did the job well enough, except for its width, I haven't even looked further than this built-in control, I suppose.

So, if I understand you correctly, a proper template section (not only an empty section) should be mandatory for custom controls?

My next challenge in "Europefying" the controls would be to get both the label and input-box on one line and to have a control with vertical radio buttons (instead of the standard horizontal list). As a complete newbie this is still quite a daunting endeavor, so I'm afraid I will be back ;)

Thanks for your help so far!

Cheers,

Jan