CSS transition not able to work with Orbeon Control

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

CSS transition not able to work with Orbeon Control

neetsun

I am trying to include css transition for hover of a control label.

<xh:html xmlns:xh="http://www.w3.org/1999/xhtml"
         xmlns:xxf="http://orbeon.org/oxf/xml/xforms"
         xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
         xmlns:saxon="http://saxon.sf.net/"
         xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
         xmlns:xf="http://www.w3.org/2002/xforms"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns:sql="http://orbeon.org/oxf/xml/sql"
         xmlns:ev="http://www.w3.org/2001/xml-events"
         xmlns:xi="http://www.w3.org/2001/XInclude"
         xmlns:exf="http://www.exforms.org/exf/1-0"
         xmlns:xs="http://www.w3.org/2001/XMLSchema"
         xmlns:fb="http://orbeon.org/oxf/xml/form-builder"
         xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
         xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
         fr:data-format-version="4.0.0">
 <xh:head>
        <xh:title>Playground</xh:title>     
<xh:style type="text/css">
            #extra {
              -webkit-transition: width 20s; /* For Safari 3.1 to 6.0 */
              transition: width 2s !important;
              transition-timing-function: ease-out;
            }
            #extra:hover {
              width: 600px;
            }
</xh:style>

In the label of a text field, i defined the following:

<div id="extra" style="background-color:red">Special Field</div>

When i tested it, the width becomes 600px upon hover, but the transition is not working.

How can I make the css transition work?

Thanks.

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Reply | Threaded
Open this post in threaded view
|

Re: CSS transition not able to work with Orbeon Control

Alessandro  Vernet
Administrator
Hi Angel,

This seems to be more of a CSS than an Orbeon Forms question, so I'd
recommend you create minimal example, using plain HTML + CSS, that shows
what you're trying to do and what the problem is, and then post that
question on a site like Stack Overflow, tagging it "css".

I hope this helps,

‑Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet