[Resolved] Formatting cred-relationship-role

[Author]

Posts

[felixP-3]

Tell us what you are trying to do?

I am trying to format the select boxes created in cred-relationship-role. I would like to change the width, font color, etc but nothing works.

example: [cred-relationship-role class='change-selectbox' role='parent']

.change-selectbox {
color: red;
width: 400px;
background-color: gray;
}

I also tried adding a style and this also didn't work either.

example: [cred-relationship-role style='width: 400px;' role='parent']

What am I doing wrong?

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share problem URL where you added the relationship form and tell me for what field (parent or child) you want to adjust what width and what font you want t change?

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please tell me what CSS you want to apply exactly where?

Where you want to apply the red color? Do you want to apply red color to the textbox that popup as autocomplete?

[felixP-3]

I need to change the width AND position attributes of the select box.

After I couldn't figure this out, I tried to just change the color, and that didn't work.

I know how to target each part of the select box, but that is a lot of work, and is not a clean solution.

I would prefer to use the class attribute of the cred-relationship-role, IF POSSIBLE.

Please, IF YOU CAN, just show me how, and let me know what select box attributes I can change with the "class" attribute of the cred-relationship-role shortcode (IF ANY) (see: https://toolset.com/documentation/programmer-reference/forms/cred-shortcodes/#cred-relationship-role).

[Minesh]

As you can see with the description provided for both Class and Style attribute:
- class. Optional. For defining additional class names for this selector. Note that this gets applied to the select dropdown behind the select2 instance.
- style. Optional. For defining additional styles for this selector. Note that this gets applied to the select dropdown behind the select2 instance.

The class and style attribute you will apply will have effect on the select dropdown that is rendered behind the select2 so it will not be visible at all as select2 is overriding the current behavior. If you will check the page source you will notice that the class and style you set from form editor is actually applied to select dropdown which is hidden but not to the visual select2.

The only way to target the select2 element which is visual that you should target the element and add your custom CSS accordingly as per your requirement.

[felixP-3]

Can you give me an example using the project I sent you.

For example, can you show me how to set the width and color of the select box in the relationship form in my project?

Thanks.

[Minesh]

You can try to use the following CSS code to display text color in red and to change width to 400px.

.toolset_select2-container {
  width:400px !important;
  color: red !important;
 }

[felixP-3]

The solution you gave me works, but setting the class toolset_select2-container as you defined it sets the select box's properties regardless of whether you use it in the relationship role short code or not.

I got the feeling that setting the class and style parameters do nothing in the cred-relationship-role short code.

Is this correct?

If this is the case, they shouldn't be mentioned in the documentation.