[Gelöst] adding CRED form to a page shift the page menus to the left

[Author]

Artikel

[davidZ-4]

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

[Nigel Supporter Languages: Englisch (English ) Spanisch (Español ) Timezone: Europe/London (GMT+01:00)]

It would be helpful to see an example of the page working and the page not-working side by side to compare the markup and applied styles.

Could you include the form on one page and provide a similar page without the form where the menus are correctly aligned for comparison?

[Nigel Supporter Languages: Englisch (English ) Spanisch (Español ) Timezone: Europe/London (GMT+01:00)]

Sorry, I realised I could probably just look at another page, which I did.

I see that the menu is added inside a div.container, and that on the problem page you have added custom styles for .container that sets the margin to 0.

But the .container class (which is part of Bootstrap) needs left and right margins of auto to centre the div.

You need to remove your CSS that changes the margin of .container.

[davidZ-4]

Thanks Nigel,

is it possible to just change the custom .container css and call it .containerblk for example athen update the elements class that need to call this css?

David

[Nigel Supporter Languages: Englisch (English ) Spanisch (Español ) Timezone: Europe/London (GMT+01:00)]

Sorry, the queue is too busy at the moment for me to take a close look at how and where your CSS is generated, but you are changing the styles for one .container and it is spilling over to affect another.

Taking a quick look at your page source I confirmed that there are 4 or 5 different elements on the page that use the .container class, so you will have to look at the markup of the section you were initially targeting with your custom CSS and either come up with a more specific selector (so that it only affects that specific .container element) or modify the markup if that is possible so that you can use a different, more specific class.

[davidZ-4]

Thanks Nigel,
Yes, i see the issue and was able to change the selector for the container to solve this issue.

Thanks,

David