Min-width causes an extra space vertically on Android screen in portrait mode in HTML/CSS -

-

recently, met issue android chrome browser, in portrait mode (in landscape looks fine) when using following html code , css code.

i use bootstrap framework

body {      min-width: 900px;    }    #test div {      max-height: 400px;      overflow: auto;    }    #test table {      margin-bottom: 0;    }    #test table tr td {      width: 25%;      padding-right: 5px;    }    #test table tr th {      width: 25%;    }
<div class="col-xs-12 col-sm-10 col-sm-offset-1" id="test">    <table class="table table-bordered">      <thead>        <tr>          <th>name</th>          <th>size</th>          <th>modification</th>          <th>action</th>        </tr>      </thead>    </table>      <div>      <table class="table table-bordered">        <tbody>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>          <tr>            <td>sdad asdadsasdas</td>            <td>asdasdasdasd</td>            <td>asdasd asd asd</td>            <td>adsasd adsasdasd</td>          </tr>        </tbody>      </table>    </div>  </div>    <div class="clearfix"></div>

or better, jsfiddle document: http://jsfiddle.net/32lg9ddf/

now, please simulate in android device in portrait mode , you'll see appear space (height bigger not visible in inspect element in chrome) @ bottom of page when scrolling.

that's strange because on other devices ios , windows phone looks , no space (or bigger height) shown.

see screen recording see problem: http://i.imgur.com/q0oavt2.gif used remote debugging using nexus 7 tablet 7" screen.

what did wrong ?

how want display on smaller screen sizes 900px? can handle using responsive css media queries, there many examples online.

for example, when screensize 600 900px reduce font size or alter min-width (and possibly increase max-height). can apply min-width of 900px larger screen sizes , use width:auto rest.

setting overflow property 'scroll' in css show horizontal scrollbar instead of space underneath, when screen size used small. overflow set hidden cut out not fit without giving space underneath (if data fixed , fits in can use or reduce min-width size).

this can done adding css file:

body { overflow:scroll;}

this scroll horizontally and/or vertically. alternatively can apply table tag.

responsive html examples, including bootstrap popular tool handling you. http://www.w3schools.com/html/html_responsive.asp


Comments

Post a Comment

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

-
i have problem namespace of spring security on xhtml page. don't understand why can't load uri, , have following issue: whitelabel error page application has no explicit mapping /error, seeing fallback. tue jul 21 16:58:12 utc 2015 there unexpected error (type=not found, status=404). please need help! possible uri has been changed? best regards you using incorrect namespace url. correct url http://www.springframework.org/schema/security the error page seeing spring source website since not recognize url. try visiting http://www.springsource.org/security/tags in browser update : spring security tags used in jsp page correct tag lib declaration is: <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
Read more

sql - MySQL query optimization using coalesce -

-
can explain me why second query faster first? (first 1 takes around 40 seconds, second 1 less 0.1) select releases.feature_code, releases.platform_id, version, release_date, general_available, uri, filesize, display_name, feature_name.full_name, if ((select exists(select 1 release_exceptions releases.feature_code = release_exceptions.feature_code , releases.platform_id = release_exceptions.platform_id , releases.version = release_exceptions.version) = 1), 1, 0) release_exceptions releases left outer join platform using(platform_id) left outer join feature_name using(feature_code) order version desc; ~~~ query 2 ------------------ ~~~ select feature_code, version, release_date, general_available, platform_id, uri, filesize, display_name, feature_name.full_name, coalesce(release_exceptions, 0) release_exceptions mus.releases left outer join ( select distinct feature_code, version, platform_id, 1 release_exceptions mus.release_exceptions ) release_exceptions using ...
Read more

unity3d - Unity local avoidance in user created world -

-
i'm using unity3d networked multiplayer online game have large complex 3d terrain scene forest, trees, cliff, hills, mountains, bounders, etc. players can build structures sort of minecraft, , put them anywhere in scene, or move them around anytime. aside human controlled players, there automated ai players , objects animals roaming around scene following path. the problem how make these automated ai players , animals, able navigate around static , dynamic player created structures, because path follow can blocked player created structures, or other players , other ai objects, cliffs etc. have find away around them or on track if tumble down off high cliff example. so made navmesh , used navagents, takes care of static, non moving objects, how make ai players navigate around each other , dynamic structures created players can number in hundreds? i thought of adding navmeshobstacle everything, result in being attached hundreds of objects since user created structures b...
Read more