Skip Navigation

[Resolved] using bootstrap styling on check boxes and radio buttons

This support ticket is created 5 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 7 replies, has 2 voices.

Last updated by MikeT458 5 years, 10 months ago.

Assisted by: Shane.

Author
Posts
#778283

Tell us what you are trying to do? Display check boxes and radio buttons inline. I tried the following code:


	<div class="form-group">
		<label class="radio-inline">Shift</label>
		[cred_field field='shift' value='' urlparam='' output='bootstrap']
	</div>

	<div class="form-group">
		<label class="checkbox-inline">Days Off</label>
		[cred_field field='days-off' value='' urlparam='' output='bootstrap']
	</div>

but it is not working,

Is there any documentation that you are following? Yes: hidden link

Is there a similar example that we can see? on the above-mentioned bootstrap documentation page.

What is the link to your site? n/a

#779041

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Mike,

Thank you for contacting our support forum.

The bootstrap elements should already be applied to your form since the output = 'bootstrap' attribute is there.

If its not working then It could be that bootstrap hasn't been imported.

To import bootstrap what I recommend that you do is to check in Toolset->Settings -> Bootstrap Loading and to ensure that its loading bootstrap 3.

Thanks,
Shane

#823347

Bootstrap is being loaded. See the following excerpt from view page source:

<link rel='stylesheet' id='dashicons-css'  href='<em><u>hidden link</u></em>' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='<em><u>hidden link</u></em>' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='<em><u>hidden link</u></em>' type='text/css' media='screen' />
<link rel='stylesheet' id='mrt_bootstrap-css'  href='<em><u>hidden link</u></em>' type='text/css' media='all' />
<link rel='stylesheet' id='generate-style-grid-css'  href='<em><u>hidden link</u></em>' type='text/css' media='all' />
<link rel='stylesheet' id='generate-style-css'  href='<em><u>hidden link</u></em>' type='text/css' media='all' />
<style id='generate-style-inline-css' type='text/css'>

Checkboxes and Radio buttons take up a lot of real estate when displayed vertically instead of horizontally. Would really appreciate a solution. Thanks.

#843421

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Mike,

Would you mind allowing me to have admin access to the site so that i can check on this further for you ?

The private fields will be enabled for your next response.

Thanks,
Shane

#868248

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Mike

I checked on your form and its already been displayed using the bootstrap styling.

Thanks,
Shane

#876661

Hi Shane. We previously determined that bootstrap was loading. My question was how to make checkboxes and radio button groups appear inline (horizontally) instead of vertically down the form. I tried the bootstrap classes "checkbox-inline" and "radio-inline" (see my initial post) but this was not working. I was able to find a workaround for the radio group but I still seeking a solution for the checkboxes. Thanks again.

#877497

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Screen Shot 2018-05-11 at 2.06.00 PM.png

Hi Mike,

its going to be a bit difficult to display the checkbox inline since it contains nested items See Screenshot

But you can do it using this css.

.checkbox{
display: inline !important;
}

Please let me know if this helps.
Thanks
Shane

#891969

Shane. The bad news is you were looking at the wrong screen. You were looking at editing EVENTS when the problem was in editing TEAM MEMBERS. The good news is your fix worked. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.