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

[Author]

Posts

[MikeT458]

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

[Shane]

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

[MikeT458]

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.

[Shane]

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

[Shane]

Hi Mike

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

Thanks,
Shane

[MikeT458]

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.

[Shane]

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

[MikeT458]

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!