Problems, need help? Have a tip or advice? Post it here.
12 posts Page 1 of 2
Hello KK,

I've noticed that "class" option seemed to not work.

Example:
<cms:input name="name_a" type="bound" class="style_a" />

This "name_a" is defined as <cms:editable name='name_a' type='relation' />

Are there any solution for this problem?

gem3 wrote: I've noticed that "class" option seemed to not work.

There is no class parameter: https://docs.couchcms.com/tags-reference/input.html
@gem3
Hi,

When type 'bound' is used, the input fetches all its parameters for the <cms:editable> region it is bound to.
So, it will ignore any param you set with <cms:input> - you need to set all values in the <cms:editable> definition.

That said, even if you were to set the 'class' in <cms:editable>, if you take a look at how the field gets rendered in the admin backend, you'll find that the class in not added directly to the rendered input; rather, it is added to a parent <DIV> enclosing that input.

So, we can do the same on the front-end as well - wrap the <cms:input> in a <DIV> and add the class there.

Hope it helps.

@SimonWpt , actually there is a 'class' param that can be used (perhaps not mentioned in the docs).

Thank you for your reply, KK.

I just tried, but results are not what I expected.

The reason why I asked this question is that bellow case working just fine.

<cms:input name="name_a" type="bound" class="style_a" />
This "name_a" is defined as <cms:editable name='name_a' type='dropdown' />

Then I chenged 'dropdown' to 'relation' and class is not applied.

I just think that there are some codes with 'relation' making difference.

Do you have any advise for this problem?

Hello,

There is a almost same topic.

See solutions for this.

https://www.couchcms.com/forum/viewtopic.php?f=4&t=12540#p35205

In other words what @KK tried to convey - classes et al must be added to definition of cms:editable, not cms:input! Type "bound" will take the class and other parameters from definition and will ignore whatever supplied in cms:input. That is what they are supposed to do in the first place - inherit everything (including class) from 'bound' editable.

Hello KK, trendoman

I just make clear how to add class to data-bound in front-end.

<cms:editable ... class='style_a'>
Is this code in a template add to style to data-bound in front-end?


My experience:

1. <cms:editable ... class='style_a'>
does not add style.

2. <cms:input ... type="bound" class='style_a'>
adds style. (except case of No.3)

3. <cms:editable ... type='relation' class='style_a'>
and <cms:input ... type="bound" class='style_a'>
does not add style.


What is best practice for adding style for data-bound in front-end?

Hello KK,

I'm checking "relation.php"

Line 629 in "static function _render_relation"
Code: Select all
$html .= '<select name="'.$input_name.'_chk" id="'.$input_id.'"'.( $f->width ? ' style="width:'.$f->width.'px;"' : '' ).( $f->deleted ? ' disabled="1"' : '' ).'>';


Are there any reasons not set "$extra" ?
@gem3

Hi,

You are right - there is some inconsistency in the way type 'relation' renders as compared to the other types (it has to do with the fact that type 'relation' can be rendered in no less than 6 different ways).

That said, as I mentioned before, the expected way to add custom classes to a field is by using he 'class' param of the <cms:editable> definition.

And, as I also mentioned before, when Couch renders a field in the admin-panel, the 'class' param we set in cms:editable gets added to a wrapper div and not directly to the field.

So, the correct way for bound fields rendered on the frontend would be to use a similar wrapper div and add the class there.

Hope this answers your query.

Hello KK,

In front-end with most of case,
<cms:input name="name_a" type="bound" class="style_a" />
returns output with class="style_a"(="$extra").
(Believe me, it is.)

So in case of <cms:editable name='name_a' type='relation' />, I would like to have same output with class="style_a"(="$extra").
ex.<select name="f_xxx_chk" id="f_xxx" class="style_a">

Would you please fix this?
12 posts Page 1 of 2