Search jQuery

jQuery Forum

jQuery Mobile

polis123

I get much space between 1st and 2nd column using 1.4.5 ... what to do???

in jQuery Mobile • 3 years ago

<div class="ui-grid-a" id="entry">
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="width:120px;">TYPE:</div></div>
<div class="ui-block-b" id="entryTYPE"><div class="ui-bar ui-bar-a">Block 1,2</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="width:120px;">DESCRIPTION:</div></div>
<div class="ui-block-b" id="entryDESCRIPTION"><div class="ui-bar ui-bar-a">Block 2,2</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="width:120px;">ADDRESS:</div></div>
<div class="ui-block-b" id="entryADDRESS"><div class="ui-bar ui-bar-a">Block 3,2</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="width:120px;">TEL.:</div></div>
<div class="ui-block-b" id="entryTEL"><div class="ui-bar ui-bar-a">Block 4,2</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="width:120px;">Fax/MOBILE:</div></div>
<div class="ui-block-b" id="entryMOBILE"><div class="ui-bar ui-bar-a">Block 5,2</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="width:120px;">EMAIL:</div></div>
<div class="ui-block-b" id="entryEMAIL"><div class="ui-bar ui-bar-a">Block 6,2</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="width:120px;">URL:</div></div>
<div class="ui-block-b" id="entryURL"><div class="ui-bar ui-bar-a">Block 7,2</div></div>
</div>

I get much space between 1st and 2nd column using 1.4.5 ... what to do???

Replies(2)

watusiware

Re: I get much space between 1st and 2nd column using 1.4.5 ... what to do???

3 years ago

Write some CSS overrides.

Your desktop browser's inspection and debug tools will be invaluable to help figure out exactly what CSS to override. You will be able to test your overrides right in the browser before you write your override file!

BTW, inline styles are "bad style". Drop them! Use CSS classes instead and a style sheet instead.

FWIW, I don't find the JQM grid useful at all. I use Flexbox CSS for this sort of thing.

watusiware

Re: I get much space between 1st and 2nd column using 1.4.5 ... what to do???

3 years ago

If you set the width of a block, you will break the grid design.

It's a simple grid system for simple layouts. A blocks get you 50%/50%, B blocks get you 33/33/33, C blocks get you 25/25/25/25.

If you change the width of one block, the widths of the other blocks will NOT adjust. You'll need to set the widths of the adjoining blocks as well.

Plus you are styling in pixels, and the grid system works in percentages!

Top Reply

Response title

Attachments

jQuery Forum

I get much space between 1st and 2nd column using 1.4.5 ... what to do???

Replies(2)

Re: I get much space between 1st and 2nd column using 1.4.5 ... what to do???

Re: I get much space between 1st and 2nd column using 1.4.5 ... what to do???

Statistics

Tags

Actions