I have spent almost a week trying to figure out how to display the Radio and Checkbox portions of my form in a two column layout. Right now the Radio and Checkbox displays like a list item.
How do I force the Radio and Checkbox sections to display in two column lists?
I think there is an issue with some of the CSS that's conflicting, but can't find it for the life of me. CSS:
#pardot-form {
max-width: 500px;
width:400px;
padding: 10px 20px;
background:#00AEC7;
margin:10px auto;
border-radius: 8px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
form.form input.text, form.form textarea.standard, form.form input.date {
background-color:rgba(255,255,255,0.8);
border:none;
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
font-size:15px;
color:#000000;
margin: 0;
outline:0;
padding:7px;
width:90%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.03) inset;
box-shadow:0 1px 0 rgha(0,0,0,0.03) inset;
margin-bottom:5px;
}
input.radio {
background:#FF0004 !important;
}
form.form select {
background-color:rgba(255,255,255,0.8);
border:none;
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
font-size:15px;
color:#000000;
margin: 0;
outline:0;
padding:7px;
width:90%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.03) inset;
box-shadow:0 1px 0 rgha(0,0,0,0.03) inset;
margin-bottom:5px;
}
form.form input.text:focus,
form.form textarea.standard:focus,
form.form input.date:focus,
form.form select:focus {
background:#ffffff;
-moz-box-shadow: 0 0 8px #19478C;
-webkit-box-shadow: 0 0 8px #19478C;
box-shadow:0 0 8px #19478C;
border:1px solid #19478C;
}
form.form p label {
font-size:18px;
color:#ffffff !important;
font-weight:bold;
padding-top:0px;
padding-bottom:5px;
font-family: Helvetica, Arial, sans-serif;
float: none;
text-align: left;
width: 75%;
}
.interest {
width:90% !important;
height: 100px !important;
}
form.form p.required label, form.form span.required label {
}
form.form p.required label.field-label:after {
content:"*";
color:#FF0004;
}
form.form p.submit {
margin-left: 5px;
}
form.form p.no-label {
margin-left: 50px;
}
form.form p span.description {
margin-left: 0px;
}
/* SUBMIT BUTTON --------------------*/
form.form p.submit input {
position:relative;
display:block;
padding:10px 15px 12px 15px;
border-radius: 11px;
color:#ffffff;
margin:0 auto;
background:#19478C;
font-size:18px;
text-align: center;
font-style:bold;
width:70%;
border:1px solid #3582F4;
border-width: 1px 1px 5px;
margin-bottom:10px;
}
form.form p.submit input:hover {
background:#0054D4;
}
form.form p.submit {
margin-top:0px;
margin-bottom:0px;
}
/* SUBMIT BUTTON END -----------*/
.pd-radio, .pd-checkbox {
float: left;
width: 98%
}
.value .inline {
width:20%;
display: block;
clear:right;
}
.value {
padding-left: 5px;
width:98%;
display:block;
clear: right;
}
.inline {
width:50%;
display:inline;
clear:right;
}
.value input[type=radio] {
float:left;
display:inline;
}
Here is the HTML
<form action="http://www.website.com" class="form" id="pardot-form">
<p class="form-field first_name pd-text required ">
<label class="field-label" >First </label>
<input type="text" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<div style="display:none"></div>
<p class="form-field last_name pd-text required ">
<label class="field-label" >Last </label>
<input type="text" value="" class="text" size="30" maxlength="80" onchange="" />
</p>
<div style="display:none"></div>
<p class="form-field company pd-text required ">
<label class="field-label" >Company</label>
<input type="text" value="" class="text" size="30" maxlength="255" onchange="" />
</p>
<div style="display:none"></div>
<p class="form-field email pd-text required ">
<label class="field-label" >Email</label>
<input type="text" value="" class="text" size="30" maxlength="255" />
</p>
<div style="display:none"></div>
<p class="form-field country pd-select required form-field-master">
<label class="field-label" >Country</label>
<select class="select" onchange="">
<option value="27007" selected="selected"></option>
<option value="27009">United States</option>
<option value="27011">Canada</option>
<option value="27013">Afghanistan</option>
</select>
</p>
<div style="display:none"></div>
<p class="form-field state pd-select required form-field-slave dependentFieldSlave">
<label class="field-label" >State/Territory</label>
<select class="select" onchange="">
<option value="27493" selected="selected"></option>
<option value="27495">Alabama</option>
<option value="27497">Alaska</option>
<option value="27499">Alberta</option>
<option value="27501">Arizona</option>
<option value="27503">Arkansas</option>
</select>
</p>
<div style="display:none"></div>
<p class="form-field Product_Interest pd-select required ">
<label class="field-label" >Product Interest</label>
<select size="5" multiple="multiple" onchange="" class="interest">
<option value="27623">Choice 1</option>
<option value="27625">Choice 2</option>
<option value="27627">Choice 3</option>
<option value="27629">Choice 4</option>
<option value="27631">Choice 5</option>
<option value="27633">Choice 6</option>
<option value="27635">Choice 7</option>
</select>
</p>
<div style="display:none"></div>
<p class="form-field Customer_Type pd-select required ">
<label class="field-label" >Customer Type</label>
<select class="select" onchange="">
<option value="" selected="selected"></option>
<option value="27657">Value 1</option>
<option value="27659">Value 2</option>
<option value="27661">Value 3</option>
<option value="27663">Value 4</option>
</select>
</p>
<div style="display:none"></div>
<p class="form-field GRG_Member pd-radio required ">
<label class="field-label" >Member</label>
<span class="value"> <span class="" style="">
<input type="radio" value="27665" onchange="" />
<label class="inline" >1 </label>
</span> <span class="" style="">
<input type="radio" value="27667" onchange="" />
<label class="inline" >2</label>
</span><span class="" style="">
<input type="radio" value="27669" onchange="" />
<label class="inline" >3</label>
</span><span class="" style="">
<input type="radio" value="27671" onchange="" />
<label class="inline" >4</label>
</span></span> </p>
<div style="display:none"></div>
<p class="form-field GRG_Professional pd-checkbox required ">
<label class="field-label" >Professional?</label>
<span class="value"><span>
<input type="checkbox" value="27679" onchange="" />
<label class="inline" >Yes</label>
</span><span>
<input type="checkbox" value="27681" onchange="" />
<label class="inline" >No</label>
</span><span>
<input type="checkbox" value="27683" onchange="" />
<label class="inline" >Maybe</label>
</span><span>
<input type="checkbox" value="27685" onchange="" />
<label class="inline" >Don't Know</label>
</span> <span>
<input type="checkbox" value="27687" onchange="" />
</span></span> </p>
<div style="display:none"></div>
<p class="submit">
<input type="submit" accesskey="s" value="SUBMIT" />
</p>
</form>
Aucun commentaire:
Enregistrer un commentaire