I am trying to: align page menus to the center of the page after adding a ccred from
Link to a page where the issue can be seen: hidden link
I expected to see: the menus (top and bottom) are aligned as other pages on the site
Instead, I got: all menus on the page are aligned to the left
when i remove the cred form short-code from the page the menus are back in the correct location
I use the following form structure:
[credform class='cred-form cred-keep-original']
[cred_field field='form_messages' value='' class='alert alert-warning']
<div class="form-group row column_3 imgcenter hideradio">
<h2> Select Bike Type</h2>
[cred_field field='bike-type' post='rider-profile' value='' urlparam='' class='container flex item flex-item' output='bootstrap']
</div>
<div class="row" style="margin-top:50px;">
[cred_show_group if="($(bike-type) eq '1' )" mode='fade']
<div class="form-group row column_4 hideradio second-tier">
[cred_field field='road-bike-sub-cat' post='rider-profile' value='' urlparam='' output='bootstrap']
</div>
[/cred_show_group]
[cred_show_group if="($(bike-type) eq '2' )" mode='fade-slide']
<div class="form-group row column_4 hideradio second-tier">
[cred_field field='mountain-bikes-sub-cat' post='rider-profile' value='' urlparam='' output='bootstrap']
</div>
[/cred_show_group]
[cred_show_group if="($(bike-type) eq '3' )" mode='fade-slide']
<div class="form-group row column_4 hideradio second-tier">
[cred_field field='cityurbn-bikes-sub-cat' post='rider-profile' value='' urlparam='' output='bootstrap']
</div>
[/cred_show_group]
</div>
<div class="row">
<div class="form-group col-md-4 third-tier">
<label>[wpml-string context='cred-form-My Rider Profile-86' name='I plan to ride']I plan to ride[/wpml-string]</label>
[cred_field field='i-plan-to-ride' post='rider-profile' value='' urlparam='' select_text='--- not set ---' class='form-control' output='bootstrap']
</div>
[cred_show_group if="($(i-plan-to-ride) ne '' )" mode='fade-slide']
<div class="form-group col-md-4">
<label>[wpml-string context='cred-form-My Rider Profile-86' name='My fitness level is']My fitness level is[/wpml-string]</label>
[cred_field field='my-fitness-level-is' post='rider-profile' value='' urlparam='' select_text='--- not set ---' class='form-control' output='bootstrap']
</div>
[/cred_show_group]
[cred_show_group if="($(my-fitness-level-is) ne '' )" mode='fade-slide']
<div class="form-group col-md-4">
<label>[wpml-string context='cred-form-My Rider Profile-86' name='My technical riding skill is']My technical riding skill is[/wpml-string]</label>
[cred_field field='my-tech-rdng-skill' post='rider-profile' value='' urlparam='' select_text='--- not set ---' class='form-control' output='bootstrap']
</div>
[/cred_show_group]
</div>
<div class="row">
[cred_show_group if="($(my-tech-rdng-skill) ne '' )" mode='fade-slide']
<div class="form-group col-md-4">
<label>[wpml-string context='cred-form-My Rider Profile-86' name='Age group']Age group[/wpml-string]</label>
[cred_field field='age-group' post='rider-profile' value='' urlparam='' select_text='--- not set ---' class='form-control' output='bootstrap']
</div>
[/cred_show_group]
[cred_show_group if="($(age-group) ne '' )" mode='fade-slide']
<div class="form-group col-md-4">
<label>[wpml-string context='cred-form-My Rider Profile-86' name='Height']Height[/wpml-string]</label>
[cred_field field='height' post='rider-profile' value='' urlparam='' select_text='--- not set ---' class='form-control' output='bootstrap']
</div>
[/cred_show_group]
[cred_show_group if="($(height) ne '' )" mode='fade-slide']
<div class="form-group col-md-4">
<label>[wpml-string context='cred-form-My Rider Profile-86' name='Weight']Weight[/wpml-string]</label>
[cred_field field='weight' post='rider-profile' value='' urlparam='' select_text='--- not set ---' class='form-control' output='bootstrap']
</div>
[/cred_show_group]
</div>
<div class="row">
[cred_show_group if="($(weight) ne '' )" mode='fade-slide']
<div class="form-group col-md-4 column_2 hideradio">
[cred_field field='sex' post='rider-profile' value='' urlparam='' output='bootstrap']
</div>
[/cred_show_group]
[cred_show_group if="($(sex) ne '' )" mode='fade-slide']
<div class="form-group col-md-4" id="yrs">
<label>[wpml-string context='cred-form-My Rider Profile-86' name='Years of riding']Years of riding[/wpml-string]</label>
<div class="flexContainer">
[cred_field field='years-of-riding' post='rider-profile' placeholder='12' value='' urlparam='' class='form-control inputField' output='bootstrap']
<a href="#bdg" class="btn btn-info glyphicon glyphicon-arrow-right nextbtn" role="button"></a>
</div>
</div>
[/cred_show_group]
[cred_show_group if="($(years-of-riding) ne '' )" mode='fade-slide']
<div class="form-group col-md-4" id="bdg">
<label>[wpml-string context='cred-form-My Rider Profile-86' name='My Budget is']My Budget is up to[/wpml-string]</label>
<div class="flexContainer">
[cred_field field='my-budget-is' post='rider-profile' placeholder='3500' value='' urlparam='' class='form-control inputField' output='bootstrap']
<a href="#src" class="btn btn-info glyphicon glyphicon-arrow-right nextbtn" role="button"></a>
</div>
</div>
[/cred_show_group]
</div>
[cred_show_group if="($(my-budget-is) ne '' )" mode='fade-slide']
<div class ="row" id="src">
[cred_field field='form_submit' value='Find the best bike for me' urlparam='' class='btn btn-primary btn-lg btn-block' output='bootstrap']
</div>
[/cred_show_group]
[/credform]
with the following CSS on the page:
/*** FIELD STYLING ***/
input[type=text],
textarea {
background: #eee;
border: none;
border-radius: 0;
color: #999 !important;
padding: 15px !important;
}
/* Checkboxes and radio buttons */
input[type="checkbox"], input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type="radio"] {
margin: 4px 0 0;
line-height: normal;
}
input[type="checkbox"] {
margin: 6px 0 0;
line-height: normal;
}*
/* Labels */
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
/* Form layout */
.form-group {
margin-bottom: 15px;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555555;
background-color: #eee;
background-image: none;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
/* horrizontal checkbox */
.column_2{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
.imgcenter {
text-align: center;
padding: 10px;
position: relative;
}
/* Hide radio button icon */
.cred-form .hideradio input[type="radio"].radio {
display: none;
}
/* highlight selected button*/
.cred-form input[type="radio"]:checked+label {
background-color: rgba(73,33,122,0.4);
border-radius: 15px;
padding: 10px;
margin: 10px;
box-shadow: 5px 5px 5px gray;
}
/* arranging radio buttons in flex using js */
.container {
list-style:none;
margin: 0;
padding: 0;
}
.item {
padding: 5px;
width: 200px;
height: 230px;
margin: 20px;
line-height: 250px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.flex {
padding: 0;
margin: 10px;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
/* set li in spacific radio buttons*/
.wpt-form-set-radios-wpcf-road-bike-sub-cat li {
display:inline-block;
width:12em;
}
.wpt-form-set-radios-wpcf-mountain-bikes-sub-cat li {
display:inline-block;
width:12em;
}
.wpt-form-set-radios-wpcf-cityurbn-bikes-sub-cat li {
display:inline-block;
width:12em;
}
/*button inside field*/
.flexContainer {
display: flex;
}
.inputField {
flex: 1;
height: 32px;
}
.nextbtn {
height: 30px;
}
and Javascript
jQuery('.wpt-form-set-radios-wpcf-bike-type').addClass('container flex');
jQuery('.wpt-form-set-radios-wpcf-bike-type > li').addClass('item flex-iem');
( function( $ ) {
$( document ).ready( function(){
// Initially hide the final choice
$(".third-tier").hide();
// Add change event listeners to second tier
$(".second-tier input").change( function(e){
$(".third-tier").show();
});
});
})( jQuery );
Please advise,
thanks,
David