@All Couchies...

I am working on a form design (databound form) using Material Design Concepts. Here is the Link to the kind of effect that I am needed to use.
http://codepen.io/sevilayha/pen/IdGKH.

When I included couch into it, I lost the very effect (as in above link) of the text label sliding up. Can anyone suggest something in regards to the same?

I am to use this form in Data Bound Form.

Regards,
GenXCoders

I have been trying to get things to work ( though no luck). But I have come across something in particular. I will try to explain:

The original code for the effect (material design):

Code: Select all

<div class="group">      
      <input name="name" id="name" type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
</div>

Now when i implement the <cms:input> the code becomes:

Code: Select all

<div class="col-md-6">
    <div class="group">      
        <input type="text" name="name"  id="name" value=""  />
        <span class="highlight"></span>
        <span class="bar" style="width: 100% !important;"></span>
        <label>Industry Name</label>
    </div>
</div>

The <cms:input> tag removes the "required" attribute and that kills the text slide effect on focus. Is there a way of allowing or forcing the "required" to stay where it is. Also, the sequence of the "type, name and id" attributes also change.

If the "required" can be left where it is, the effect will continue to live. Can this be achieved?

Regards,
GenXCoders

[KK]

Hello Aashish

The 'required' attribute is recognized by Couch cms:input tag as one of its core parameter and hence will not be outputted as HTML.

To do that, we'll have to use a workaround that will force Couch to ignore this parameter and hence let it pass through onto the web page.

Please try this -

<cms:input name='some_name' type='bound' "required" />

Any parameter name (not the value) enclosed within double-quotes would be left unprocessed by cms:input and this will make the code above to output 'required' in the generated HTML.

Hope it helps.

@KK sir...

Thanks a ton... It is now working!!!