[Resolved] Style the generic_field same as the cred_field

[Author]

Posts

[kelvinL-2]

Dear Sir/Madam,

I want to style the cred_generic_field same as the cred_field, refer to the screenshot, how can I style both select field same as the status select field, below is code I make the form

<div class="form-group">
      <div class="col-md-6 col-12">
		<label for="%%FORM_ID%%_@member-application.parent">[cred_i18n name='@member-application.parent-label']Applicant[/cred_i18n]</label>
		[cred_field field='@member-application.parent' class='form-control' output='bootstrap' select_text='--- not set ---' required='false' urlparam='mid'  readonly='readonly']
      </div>
</div>
...
<div class="form-group row">
      <div class="col-md-6 col-12">
		<label for="%%FORM_ID%%_app-proposed-tablet">[cred_i18n name='app-proposed-tablet-label']Select Tablet Number[/cred_i18n]</label>
        [cred_generic_field type='select' field='wpcf-app-proposed-tablet']
        {
          "required":1,
          "options":[ [get_tablet] ]
        }
		[/cred_generic_field]
      </div>
</div>
...
<div class="form-group row">
      <div class="col-md-4 col-12">
		<label for="%%FORM_ID%%_app-status">[cred_i18n name='app-status-label']Status[/cred_i18n]</label>
		[cred_field field='app-status' force_type='field' class='form-control' output='bootstrap']
      </div>
</div>

[Shane]

Hi Kelvin,

Can you provide me with a link to the page so that I can provide the appropriate css code for this ?

Also when you say styling the select fields are you referring in terms of their width ?

Please let me know.

Thanks,
Shane

[kelvinL-2]

Dear Shane,

I fixed it by styling the select tag with below style but not sure whether it is the best solution, regarding to the height and padding to the toolset_select2-selection, I have to manually find the value from inspector, is there any better way to calculate the value and all generic select field must be named as span.toolset_select2-selection.toolset_select2-selection--single?

.toolset_select2-selection {
  width: 100% !important;
}

span.toolset_select2-selection.toolset_select2-selection--single {
  height: 38px;
  padding-top: 3px;
  padding-left: 10px;
}

I add below script to enable the default select to select2

jQuery(document).ready(function() {
    jQuery('select[name="wpcf-custom-field-slug"]').toolset_select2();
});

[Shane]

Hi Kelvin,

Usually this what is done to find what the exact class of the element is.

I'm not aware of any way to automatically determine what the classes will be.
all generic select field must be named as span.toolset_select2-selection.toolset_select2-selection--single?

For this I cannot say yes or no to based on my previous statement. The classes are dynamically generated and may contain variances from one instance to another so the best thing to do is to inspect the page element to find the correct class name.

Thanks,
Shane