CODEWITHSUNDEEP
javascriptjqueryhtmlaccessibility
Labeo
Labeo

Reputation: 6349

How to make a search box visible on a web page in zoom mode when set to focus

When i am in 100% zoom mode and when i set focus to a search box on a web page i am able to see the whole search box with out any issues, but if i am in 200% zoom mode and if i set the focus to the search box then i am seeing only half of the search box. In any zoom mode how to make sure that the whole search box is visible to the user.

Code:

<input id="searchbox" title="SearchBox" height= 100% padding = 0 5px 0 15px width=200px border-style="none">

Above is search box input element code.My search box inside of a webpage where i cant change width and padding as it is overlapping with other elements. Is there any way when it is focused the page is scrolled such that it is shown completely

Upvotes: 0

Views: 305

Answers (3)

Labeo
Labeo

Reputation: 6349

$('.elementClass').get(0).scrollIntoView();

In any zoom mode your element will be focused.

Upvotes: 0

subindas pm
subindas pm

Reputation: 2784

You can can just try CSS hover effects, ie while hovering you can increase the size of the input field

#searchbox:hover{  
  /* Increase size or padding */
}

Upvotes: 0

Kashif Raza
Kashif Raza

Reputation: 84

You need to use the box-sizing and width of the search input field. Here is the code will work for you even at 400% zoom.

.searchbox{  
box-sizing:border-box;
padding:7px 10px;
width:100%;
}

<input id="searchbox" title="SearchBox" class="searchbox" placeholder="Search...">

Upvotes: 1

Related Questions