Menu
I am using the latest bootstrap.
I have a form (class="form-horizontal") and inside I am adding a div with the class "form-group", and the result gives a horizontal scroll bar.
I have created an example in JSfiddle using the same code from Bootstrap website. You can see it here better: http://jsfiddle.net/SergioKastro/q4pq08rc/
How do I stop showing the horizontal scroll bar?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>
568
For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.
To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.
To make a form horizontal, add class=”form-horizontal” in the <form> element. If you're using the <label> element then you must use class=”control-label”. Also, remember that you can use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
Put your code inside a <div class="container"> or <div class="container-fluid">.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>
</div>Everything inside your body should be enclosed inside a <div class="container"> or <div class="container-fluid">.
"container" has a fixed width depending on your screen size while "container-fluid" scales directly with the width of the browser.
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
