Question posted in 
I am trying to code this HTML form with CSS to look nicer.
I have done well but am looking to just remove this horizontal scrollbar but I’m not sure where it came from.
It should not be in 2 columns so I have placed it in an iFrame in Wix and reduced the width to make it a vertical list of fields but increasing the widths keeps the scroll bar there.
Thanks for any help! Code below
It currently looks like this: Screenshot
<META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <FORM> element to your page. -->
<!-- ---------------------------------------------------------------------- -->
<style>
/*.inpcls{
border-radius: 0;
font: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
background-color: rgba(255, 255, 255, 0.95);
box-sizing: border-box !important;
color: #000000;
border: 2px solid rgba(145, 145, 145, 1);
padding: 3px;
margin: 0;
max-width: 100%;
min-width: 100%;
min-height: 100%;
text-overflow: ellipsis;
}*/
.inplft{
padding-left: 14px;
font: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
}
.inprht{
padding-right: 0px;
font: normal normal normal px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
}
.div1{
/*left: 119px;*/
width: 350px;
position: absolute;
/*top: 264px;*/
/*height: 379px;*/
}
.d2{
/*left: 58px;*/
position: absolute;
/*top: 23px;*/
height: 42px;
width: 30px;
}
.mrglft{
margin-left: -%;
}
.a{
border-radius: 0;
font: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
background-color: rgba(255, 255, 255, 0.95);
box-sizing: border-box !important;
color: #000000;
border: 2px solid rgba(145, 145, 145, 1);
padding: px;
margin-top: 2%;
height: 42px;
width: 302px;
text-overflow: ellipsis;
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" >
<!-- <div class="div1"> -->
<form action="https://test.example.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00D5E0000000UJe">
<input type=hidden name="retURL" value="https://example.com/">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="[email protected]"> -->
<!-- ---------------------------------------------------------------------- -->
<div class="row">
<div class="col-md-3" >
<input class="inplft a" id="first_name" maxlength="40" name="first_name" size="20" type="text" placeholder="Name" required=true/>
</div>
<div class="col-md-3" >
<input class="inplft a mrglft" id="00N5E000000rknN" name="00N5E000000rknN" size="12" placeholder="Date of Birth" type="text" /></span><br>
</div>
</div>
<div class="row">
<div class="col-md-3" >
<input class="inplft a" id="email" maxlength="80" name="email" size="20" type="text" placeholder="Email Address" required=true />
</div>
<div class="col-md-3" >
<input class="inplft a mrglft" id="mobile" maxlength="40" name="mobile" size="20" placeholder="Telephone Number" type="text" required=true/><br>
</div>
</div>
<div class="row">
<div class="col-md-3" >
<input class="inplft a" id="city" maxlength="40" name="city" size="20" type="text" placeholder="Town or City" />
</div>
<div class="col-md-3" >
<select class="inprht a mrglft" id="country_code" name="country_code" >
<option value disabled selected style="display: none;" >Country</option>
<option value="BH">Bahrain</option>
<option value="EG">Egypt</option>
<option value="JO">Jordan</option>
<option value="KW">Kuwait</option>
<option value="LB">Lebanon</option>
<option value="MA">Morocco</option>
<option value="OM">Oman</option>
<option value="OTHER">Other</option>
<option value="QA">Qatar</option>
<option value="SA">Saudi Arabia</option>
<option value="CH">Switzerland</option>
<option value="SYR">Syria</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
</select><br>
</div>
</div>
<div class="row">
<div class="col-md-3" >
<input class="inplft a" id="00N5E000000rwVf" maxlength="100" name="00N5E000000rwVf" size="20" type="text" placeholder="Current School/University" />
</div>
<div class="col-md-3" >
<input class="inplft a mrglft" id="00N5E000000rkdr" maxlength="255" name="00N5E000000rkdr" size="20" type="text" placeholder="Desired Course" /><br>
</div>
</div>
<div class="row">
<div class="col-md-1" ></div>
<div class="col-md-3" >
<select class="inprht a" id="lead_source" name="lead_source" >
<option value disabled selected style="display: none;" >How did you hear about us?</option>
<option value="Ahmed Al-Ajmi">Ahmed Al-Ajmi</option>
<option value="British Council">British Council</option>
<option value="Career day">Career day</option>
<option value="Deferred">Deferred</option>
<option value="Egypt_School_Tour">Egypt_School_Tour</option>
<option value="Facebook">Facebook</option>
<option value="Fair Alexandria">Fair Alexandria</option>
<option value="Fair Cairo">Fair Cairo</option>
<option value="Fair Lebanon">Fair Lebanon</option>
<option value="Flier / Poster">Flier / Poster</option>
<option value="Google">Google</option>
<option value="GSUK Alumni">GSUK Alumni</option>
<option value="GSUK_Website">GSUK_Website</option>
<option value="Gulf Tour">Gulf Tour</option>
<option value="Hamra Walk-In">Hamra Walk-In</option>
<option value="Info Session Bahrain">Info Session Bahrain</option>
<option value="Info Session Kuwait">Info Session Kuwait</option>
<option value="Info Session Oman">Info Session Oman</option>
<option value="Info Session Qatar">Info Session Qatar</option>
<option value="Info Session UAE">Info Session UAE</option>
<option value="Instagram">Instagram</option>
<option value="Kuwait Fair">Kuwait Fair</option>
<option value="Lebanon_School_Tour">Lebanon_School_Tour</option>
<option value="Morocco School Tour">Morocco School Tour</option>
<option value="Other_(Please specify)">Other_(Please specify)</option>
<option value="Referral_(Please specify)">Referral_(Please specify)</option>
<option value="School Counsellor_(Please specify)">School Counsellor_(Please specify)</option>
<option value="School Presentation">School Presentation</option>
<option value="School Tour">School Tour</option>
<option value="Twitter">Twitter</option>
<option value="University Website_(Please specify)">University Website_(Please specify)</option>
<option value="Web">Web</option>
</select><br>
</div>
</div>
<div class="row">
<div class="col-md-1" ></div>
<div class="col-md-3" >
<input class="inprht a" type="submit" name="submit">
</div>
</div>
</form>
3
Answers
Just add
to wrapping element. Moreover check wrapping elemnt width and inside elemnts padding/margin so maybe that let You to use overflow-x
your .row has a marign: 0 -15px; therefore it gets 30px wider than 100%
quickfix: give parent a padding: 0 15px;
There are a couple of issues with the way you’re doing this that you need to address.
First, you need to load Bootstrap prior to your own CSS. Otherwise you will have no way to overwrite the styling that Bootstrap places on your elements. The order in which resources are loaded is important. External libraries and frameworks give you a foundation to work on, but you always want your code to have the last ‘say’ in what happens.
Second, you’re issue with the horizontal scroll is that something is overflowing the bounds of your page. @NetPax’s answer will get rid of the horizontal scroll, but it creates potential to have portions of your elements ‘off page’ at some widths. In this specific case, the thing that is overflowing the bounds of your page are all of your
<div class="row">tags. Divs are block element and take up the full width that they are given. Therowclass from Bootstrap comes with a negative 15px margin on both sides and is meant to be used in conjunction with another of their classes, thecontainerclass, which provides 15px of padding.So you need to either use something other than
row, or need to add acontainerwrapper around therowelements.I have done that in the code below, as well as move Bootstrap to load before your CSS. Let me know if you have any questions.