CODEWITHSUNDEEP
htmlcssinput
Andrey Tsarev
Andrey Tsarev

Reputation: 779

CSS strange thing happening when scaling

this is my first post here. I don't know how to explain my problem because I don't really know what is causing my CSS code to break. It would be easier to show you in a photo.

So I have a div tag and input and div child elements inslide. One of the div is static 32px x 32px and I am calculating its width with calc(100% - 32px), but when scaling some pixels aren't filled with the input.

Here's a photo of the problem: https://i.sstatic.net/3HwaG.jpg

This occurs when the zoom is not divisible by 100. For example it breaks on 110%, 150% and 175%. But it is right when the zoom is 100%, 200%, 300%...

Heres my code:

<div class="search">
    <input type="text" value="Search" class="search-text" />
    <div class="search-icon" ></div>
</div>

CSS:

.search {
    height: 32px;
    width: 250px;
}
.search-text{
    float:left;
    width: calc(100% - 55px) !important;
    display: inline-block !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin: 0;width: 196px;
}
.search-icon{
    display: inline-block !important;
    background-color: #ACB6BE;
    height: 30px;
    width: 31px;
    float:right;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    border: 1px solid #acb6be;
}
input[type=text] {
   border-radius: 5px;
   border: 1px solid #acb6be;
   min-width: 180px;
   color: #acb6be;
   padding: 0 10px;
   height: 30px;
   background-color: #fff;
   font-weight: 600;
}

Or jsfiddle: http://jsfiddle.net/39VDR/1/

Upvotes: 0

Views: 111

Answers (1)

Andrei
Andrei

Reputation: 3106

The problem happens because when you zoom, your values will not be integer anymore. This means that rounding will take place and the outer container (.search) will be 1px larger than you would expect.

You can remove the float:right on the .search-icon and it will work ok.

You can see it here:

http://jsfiddle.net/39VDR/4/

.search-icon{
    display: inline-block;
    background-color: #ACB6BE;
    height: 30px;
    width: 31px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    border: 1px solid #acb6be;
    font-size:12px;
    vertical-align: top;
}

Still, as mentioned, you can remove the !important if you just add more specificity to your selectors.

Upvotes: 1

Related Questions