CODEWITHSUNDEEP
css
Pavan Kumar
Pavan Kumar

Reputation: 1686

How to avoid horizontal scrollbar

Can anybody please look into my code 

<html>
    <div class="box">
        <div class="txtFld">
            <input type="text"/>
        </div>
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </div>
</html>

CSS code:

ul{margin:0;padding:0}
ul li{border-bottom:1px solid #f1f1f1;padding:5px}
.box{width:160px;overflow:auto;border:1px solid #ccc;height:150px}
.txtFld{-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box}
.txtFld input{width:100%;}

Horizontal scrollbar is appearing in chrome and ie browsers. where did i make mistake ?

Upvotes: 0

Views: 2936

Answers (6)

Apolo
Apolo

Reputation: 4050

I know the question is old but the answer is :

You have to set the box-sizing:border-box property on the text input (and not on his parent div like you did).

It will work just fine, see it in the JSFiddle : http://jsfiddle.net/rE6xW/2/

This is because the text input has padding(2px) and border(1px) by default and when you set it's width to 100%, it is 100%+2*[padding+border] so you get an horizontal scroll bar because it is 6px wider than it's parent. When you set the box-sizing:border-box property, then your width:100%property will be interpreted as :

100% = innerWidth + padding + border

I hope this will help someone.

.

Upvotes: 2

Sven
Sven

Reputation: 1540

Simply set the width of .txtFld to auto:

.txtFld input {
  width:auto;
}

Upvotes: 0

DaCrota
DaCrota

Reputation: 21

Is your text box width being overridden somewhere else in the your project?

.txtFld input{
  width:100%;
}

When this is removed from your provided code it appears to have a horizontal bar only in IE and Chrome but works fine in Firefox. Maybe double check your CSS document and HTML.

Upvotes: 0

dthagard
dthagard

Reputation: 853

Assuming that you don't want a scroll bar on any element with a class of "box", you'll need to set overflow to hidden.

.box {
  border: 1px solid #CCC;
  height: 15px;
  overflow: hidden;
  width: 150px;
}

If you only want to disable the horizontal scroll bar, then set overflow-x to hidden.

overflow-x: hidden;

If you don't want the entire page to have a horizontal scroll bar, then you'll want to set overflow-x on the body tag.

body { overflow-x: hidden; }

Upvotes: 0

Guanlun
Guanlun

Reputation: 1608

If you need to hide the scroll bar only, use

.box::-webkit-scrollbar {
    display: none;                                                          
}

for Chrome

Upvotes: 0

topcat3
topcat3

Reputation: 2642

Its because

.txtFld input{width:100%;}

Change to 

.txtFld input{width:50%;}

or whatever suits

Upvotes: 0

Related Questions