<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<input id="show_imagery_buttons" type="checkbox">
<label for="show_imagery_buttons">
<span data-toggle="tooltip"
title="Check to request an additional image type"><b>Additional Imagery</b>
</span>
</label>
<ul id="imagery_buttons">
<li class="radio">
<label><input type="radio" id="addImgPng" name="imagery"
value="png">PNG</label>
</li>
<li class="radio">
<label><input type="radio" id="addImgJpg"
name="imagery" value="jpg">JPG</label>
</li>
<li class="radio"><label><input type="radio" id="addImgPdf"
name="imagery"
value="pdf">PDF</label>
</li>
</ul>
</div>
<div class="col-md-6 text-center">
<input id="show_dataset_buttons" type="checkbox">
<label for="show_dataset_buttons">
<span data-toggle="tooltip"
title="Check to request another report format"><b>Additional Report Format</b>
</span>
</label>
<ul id="dataset_buttons">
<li class="radio"><label><input type="radio" id="addDataPDF"
name="report"
value="pdf">PDF</label>
</li>
<li class="radio"><label><input type="radio" id="addDataNLatex"
name="report"
value="latex">LaTeX</label></li>
</ul>
</div>
</div>
</div>
I have two stacks of radio buttons that I want to display next to each other. I want to space them so they are in the middle of the row with equal white space on the outer sides of these radio blocks. I've put them on two bootstrap columns and have managed to keep them in the middle of the column using the text-center class (see this fiddle)
While this does keep the buttons in the middle of the bootstrap columns as the window size moves, I'm not able to get the radio buttons to align vertically with each other. I think it's related to using the text-center class, but I'm not sure what to replace it with. Does anyone have any ideas?
You are correct, your text-center class was affecting the alignment of the radio buttons and their labels. You also applied a hide class which was making your second set of radio buttons invisible. Removing those will get you two columns of left-aligned radio buttons. Keep in mind that bootstrap columns will adjust as your screen size adjusts, so you may only see them in two columns on larger screens.
#imagery_buttons, #dataset_buttons {
margin-left: auto;
margin-right: auto;
width: 100px;
}
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<div class="container">
<div class="row">
<div class="col-md-6">
<input id="show_imagery_buttons" type="checkbox">
<label for="show_imagery_buttons">
<span data-toggle="tooltip" title="Check to request an additional image type">
<b>Additional Imagery</b>
</span>
</label>
<ul id="imagery_buttons">
<li class="radio">
<label><input type="radio" id="addImgPng" name="imagery"value="png">PNG</label>
</li>
<li class="radio">
<label><input type="radio" id="addImgJpg" name="imagery" value="jpg">JPG</label>
</li>
<li class="radio">
<label><input type="radio" id="addImgPdf" name="imagery" value="pdf">PDF</label>
</li>
</ul>
</div>
<div class="col-md-6">
<input id="show_dataset_buttons" type="checkbox">
<label for="show_dataset_buttons">
<span data-toggle="tooltip" title="Check to request another report format">
<b>Additional Report Format</b>
</span>
</label>
<ul id="dataset_buttons">
<li class="radio">
<label><input type="radio" id="addDataPDF" name="report" value="pdf">PDF</label>
</li>
<li class="radio">
<label><input type="radio" id="addDataNLatex" name="report" value="latex">LaTeX</label>
</li>
</ul>
</div>
</div>
</div>
Related
Toggle navigation
Toggle navigation
<div class="search-login">
<form method="get" id="header-searchform" action="/">
<input type="search" autocomplete="off" name="s">
<input type="hidden" name="post_type[]" value="portfolio" />
<input type="hidden" name="post_type[]" value="post" />
<input type="hidden" name="post_type[]" value="page" />
<i class="fas fa-search"></i>
</form>
</div>
<div class="menu-main-container">
<ul id="main_menu" class="nav navbar-nav group navbar-collapse collapse">
{{ navigationWidgetPServerCore().menu('default').setPartial('p-server-core/navigation')|raw }}
</ul>
</div>
<div class="clear"></div>
<div id='magic-line'></div>
<div class="clear"></div>
</div><!-- /.navbar-inner -->
</nav>
any help? all works well on pc laptop but on phone bar is auto close.
I am trying to create a contact form similar to the design bellow, but can't seem to get the correct result. I thought I could do this with flex-box, but I am having trouble getting the Text Area to Display correctly. If there is a better way to do this with keeping the HTML structure the same, I am open to suggestions.
CodePen
<form class="flex-container">
<ul>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="right">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li class="text-area">
<textarea placeholder="right"></textarea>
</li>
</ul>
</form>
Maybe there is a more quick solution but you can do that with bootstrap :
<form class="container">
<div class="col-5 row">
<div class="col-6">
<div class = "row">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
</div>
<div class="col-3 ml-3">
<div class = "row">
<input type="text" placeholder="left">
</div>
<div class = "row mt-3 heightCSS">
<textarea placeholder="right"></textarea>
</div>
</div>
</div>
CSS :
.heightCSS{
height: 8em;
width: 14em;
}
First of all I'm not really a web developer, so bear with me.
I'm trying to embed a mailchimp signup form on my site. I have a set check-boxes that I'd like to keep hidden unless a certain radio button is selected.
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
.reveal{
display: none !important;
}
#radio-2:checked ~ .reveal {
display: inline;
}
</style>
<div id="mc_embed_signup">
<form action="n/a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group input-group">
<strong>Radio Buttons</strong>
<ul>
<li><input type="radio" id="radio-1" value="Radio 1" name="MMERGE6" id="mce-MMERGE6-0"><label for="mce-MMERGE6-0">Radio 1</label></li>
<li><input type="radio" id="radio-2" value="Part Time" name="MMERGE6" id="mce-MMERGE6-1"><label for="mce-MMERGE6-1">Part Time</label></li>
</ul>
</div>
<div class="mc-field-group input-group reveal">
<ul>
<li><input type="checkbox" value="1" name="group[18657][1]" id="mce-group[18657]-18657-0"><label for="mce-group[18657]-18657-0">1</label></li>
<li><input type="checkbox" value="2" name="group[18657][2]" id="mce-group[18657]-18657-1"><label for="mce-group[18657]-18657-1">2</label></li>
<li><input type="checkbox" value="4" name="group[18657][4]" id="mce-group[18657]-18657-2"><label for="mce-group[18657]-18657-2">3</label></li>
<li><input type="checkbox" value="8" name="group[18657][8]" id="mce-group[18657]-18657-3"><label for="mce-group[18657]-18657-3">4</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e7f52c90ee3d55370f2c41bac_8ea8200d35" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[6]='MMERGE6';ftypes[6]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
I want the set of checkboxes here to only reveal when the second radio button is selected.
I can get :checked to work when I write my own form, but I can't seem to get it to work within an embedded mailchimp form, and I can't figure out why. Does anyone have any ideas?
There are a few issues here:
A style with the !important rule cannot be overridden with another style that doesn't include !important. You can just remove it from your first style to resolve this.
The ~ sibling CSS selector locates elements with the same parent. Because the radio and .reveal elements don't share the same parent, it doesn't display the .reveal element.
The radio buttons shouldn't have two id attributes. Only the second id is set when more than one exists.
In order to make the sibling selector work, you can remove the <ul> and <li> elements from the radio buttons, and add line breaks before them so they're still on separate lines. Also put the .reveal class <div> inside the first .mc-field-group one. This will make the radio buttons have the same parent as the hidden element.
Here's what the updated code looks like:
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
.reveal {
display: none;
}
#mce-MMERGE6-1:checked ~ .reveal {
display: inline;
}
</style>
<div id="mc_embed_signup">
<form action="n/a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group input-group">
<strong>Radio Buttons</strong>
<br>
<input type="radio" value="Radio 1" name="MMERGE6" id="mce-MMERGE6-0"><label for="mce-MMERGE6-0">Radio 1</label>
<br>
<input type="radio" value="Part Time" name="MMERGE6" id="mce-MMERGE6-1"><label for="mce-MMERGE6-1">Part Time</label>
<div class="reveal">
<ul>
<li><input type="checkbox" value="1" name="group[18657][1]" id="mce-group[18657]-18657-0"><label for="mce-group[18657]-18657-0">1</label></li>
<li><input type="checkbox" value="2" name="group[18657][2]" id="mce-group[18657]-18657-1"><label for="mce-group[18657]-18657-1">2</label></li>
<li><input type="checkbox" value="4" name="group[18657][4]" id="mce-group[18657]-18657-2"><label for="mce-group[18657]-18657-2">3</label></li>
<li><input type="checkbox" value="8" name="group[18657][8]" id="mce-group[18657]-18657-3"><label for="mce-group[18657]-18657-3">4</label></li>
</ul>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e7f52c90ee3d55370f2c41bac_8ea8200d35" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[6]='MMERGE6';ftypes[6]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
Having trouble obtaining the correct css to create a check list in jqm. with the help of Make checkbox larger in Jquery Mobile I was able to get a larger checkbox but the results created new checkbox in undesired location? my label elements seem to be creating extra checkbox where my html doesn't have one. see JSFiddle example.
outer label tag is producing a checkbox and css sizing desired to make box larger is only applied to outer label box (the one that shouldn't even be there).
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" data-theme="b" id="acs">
<div data-role="header">
<h2>Key Performance Indicators</h2>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="b">
<li>
<h1>Assess Cardiac Risk Factors</h1>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>
<label for="checkbox-2b">
<label>
<h3>Age</h3>
</label>
</label>
</label>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>
<label for="checkbox-2b">
<label>
<h3>Diabetes</h3>
</label>
</label>
</label>
</li>
</ul>
</div>
<div data-role="footer">
<div data-role="navbar">
</div>
</div>
<div>
<h4>My Footer</h4>
</div>
</div>
CSS
#checkbox-2b {
-ms-transform: scale(6); /* IE */
-moz-transform: scale(6); /* FF */
-webkit-transform: scale(6); /* Safari and Chrome */
-o-transform: scale(6); /* Opera */
padding: 10px;
}
I have updated your fiddle -> http://jsfiddle.net/xxdrf87q/7/
Looking to the documentation the right way for doing a checkbox with it's label is this:
<label>
<input type="checkbox" name="checkbox-0 ">Check me
</label>
So I changed this part:
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/> Age
</label>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/> Diabetes
</label>
Thanks to jcarrera for the fix, to clarify my final issue here was the resolution to the multiple check boxes unsolicited: The css needed to add z-index: 2; to apply to top layer checkbox and remove id from the label elements. Cleaned up extra code by removing extra label tags not needed.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" data-theme="b" id="acs">
<div data-role="header">
<h2>Key Performance Indicators</h2>
</div>
<div data-role="content">
<ul data-role="listview" data-split-icon="gear" data-theme="c">
<h1>Assess Cardiac Risk Factors</h1>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>
<h3>Age</h3>
</label>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>
<h3>Diabetes</h3>
</label>
</ul>
</div>
<div data-role="footer">
<div data-role="navbar">
</div>
<h4>John Doe</h4>
</div>
</div>
Searched this place and tried the options suggested on different answeres, such as "display: block", float:left etc, but I cant manage to get them on the same line.
Here is the code the plugin have:
<div class="gift-certificate sc_info_box">
<h3>Mottagare av presentkort</h3>
<div class="gift-certificate-show-form">
<p>Vem vill du skicka ditt presentkort till?</p>
<ul class="show_hide_list" style="list-style-type: none;">
<li><input type="radio" id="hide_form" name="is_gift" value="no" checked="checked"> <label for="hide_form">Till mig!</label></li>
<li>
<input type="radio" id="show_form" name="is_gift" value="yes"> <label for="show_form">Till någon annan!</label>
<ul class="single_multi_list" style="list-style-type: none;">
<li><input type="radio" id="send_to_one" name="sc_send_to" value="one" checked="checked"> <label for="send_to_one">Send to one person</label>
<input type="radio" id="send_to_many" name="sc_send_to" value="many"> <label for="send_to_many">Send to different people</label></li>
</ul>
</li>
</ul>
</div>
<div class="gift-certificate-receiver-detail-form">
<div class="clear"></div>
<div id="gift-certificate-receiver-form-multi">
<div class="form_table">
<div class="email_amount">
<div class="amount"><p class="coupon_amount_label"><span class="amount">1,500 kr</span></p></div>
<div class="email"><input class="gift_receiver_email" type="text" placeholder="Email address..." name="gift_receiver_email[9216][]" value=""></div>
</div>
<div class="message_row">
<div class="sc_message"><textarea placeholder="Message..." class="gift_receiver_message" name="gift_receiver_message[9216][]" cols="50" rows="5"></textarea></div>
</div>
</div>
</div>
<div id="gift-certificate-receiver-form-single">
<div class="form_table">
<div class="email_amount">
<div class="amount"><p class="coupon_amount_label"><span class="amount">1,500 kr</span></p></div>
<div class="email"><input class="gift_receiver_email" type="text" placeholder="Mottagarens E-mail..." name="gift_receiver_email[0][0]" value=""></div>
</div>
<div class="message_row">
<div class="message"><textarea placeholder="Ditt meddelande..." class="gift_receiver_message" name="gift_receiver_message[0][0]" cols="50" rows="5"></textarea></div>
</div>
</div>
</div>
</div></div>
This displays:
So question is: How would I go about to get the text next to its button on the 2 rows? I need to work on mobiles aswell if possible.
Make your CSS:
li input[type="radio"], li label {
display: inline-block;
}
Their default layout is display: block which puts them on their own line regardless that you have placed them within one tag.