Padding in table rows too large

GoogleCodeExporter commented 9 years ago

When using tables, and viewing on a mobile device, the default templates add 
too much padding, leaving lots of white space left of the data.

Suggest changing the css from;
input {
    box-sizing: border-box;
    width: 100%;
    margin: 6px 0 0 0;
    padding: 6px 6px 6px 44px;
    font-size: 16px;
    font-weight: normal;
}

to;
input {
    box-sizing: border-box;
    width: 100%;
    margin: 6px 0 0 0;
    padding: 6px 6px 6px 4px;
    font-size: 16px;
    font-weight: normal;
}

Original issue reported on code.google.com by vinoma...@gmail.com on 8 Jan 2012 at 9:01

GoogleCodeExporter commented 9 years ago

@vinomarky, what version of iUI are you using?

Remi, can you take a look at this?

Original comment by msgilli...@gmail.com on 9 Jan 2012 at 6:30

GoogleCodeExporter commented 9 years ago

Doh - juust realized, its actually related to input blocks inside rows
I'm using 4.0 Beta 1, but it also occurs with 4.0 Alpha 1 and 3.1

Example code snippet;

<table id="table1">
  <tr>
    <th>Result Property</th>
    <th>Value</th>
  </tr>
    <tr>Z:</td>
    <td><input name="z" size="7" value="100000000"></td></tr>
</table>

I find that when on mobile screens there is a lot of white space to the left of 
tthe Z value, and often the actually number is truncated to the right

Original comment by vinoma...@gmail.com on 9 Jan 2012 at 8:09

GoogleCodeExporter commented 9 years ago

Well, it first seems issue is related to the factu you forgot a <td> in your 
table structur (based on what you sent in the mailing-list). Then, input styles 
hasen't been made to work inside a table but prefixed with a label element.

See example here:
http://we-are-gurus.com/labs/iui/issues/321/

First one is the missing td one you have
Second one is the same with td as it should be
Third one is the same situation using label + input

iUI theme comes as, so feel free to add your custom CSS statements. The make 
your code easier to update, keep them in a seperate CSS file or add them at the 
end of the css theme file.
In this case, if you want to remove left padding on text inputs inside a table, 
add the following code:
.row td > input:not([type|="radio"]):not([type|="checkbox"]) {
    padding-left:   6px;
}

Original comment by remi.gru...@gmail.com on 9 Jan 2012 at 9:06

Changed state: Closed

GoogleCodeExporter commented 9 years ago

Well, it seems to be more a project specific code issue than iUI related.
See issue #321 on Google Code to get feedback.
http://code.google.com/p/iui/issues/detail?id=321

For the record, see example page here:
http://we-are-gurus.com/labs/iui/issues/321/

Note that you can test with previous versions of iUI using ?v=
http://we-are-gurus.com/labs/iui/issues/321/?v=0.4a1 (same as none
specify since latest)
http://we-are-gurus.com/labs/iui/issues/321/?v=0.4d3
http://we-are-gurus.com/labs/iui/issues/321/?v=0.4d2
http://we-are-gurus.com/labs/iui/issues/321/?v=0.4d1
http://we-are-gurus.com/labs/iui/issues/321/?v=0.31
http://we-are-gurus.com/labs/iui/issues/321/?v=0.3

Remi

Original comment by remi.gru...@gmail.com on 9 Jan 2012 at 9:34

waxmiguelito / iui

Padding in table rows too large #321