Wrap text behavior of listgrid

16 April, 2008 - 08:35 — akamble

Hi,

I am displaying HTML table in my listgrid column. But the problem that I am experiencing is the text inside table wraps nicely inside IE 7 browser, but inside Firefox 2 this text is overlapped (hide) by content in adjacent column. I am using backbase struts connector.

Here is my listgrid code -

<div style="height:100%;width:100%;">

                        <tb:tbListGrid id="flightsGrid" dataSource="flightDataSource" rowClasses="rowClass1, rowClass2" 

                        readonly="true" rows='10'  width="100%" height="100%"  sortable="false" xmlns:tb="http://www.example.com/mynamespace">

                                <b:listGridCol select="flights" label="Trip" />

                                <b:listGridCol select="tripDeptTime" label="Departure Time" />

                                <b:listGridCol select="tripDeptTimeMillis" display="none" /> 

                                <b:listGridCol select="tripArrTime" label="Arrival Time" /> 

                                <b:listGridCol select="tripArrTimeMillis" display="none" />

                                <b:listGridCol select="noOfStops" label="No Of Stops" /> 

                                <b:listGridCol select="depNoOfStops" display="none" />

                                <b:listGridCol select="totalfee" label="Total Fee" />

                                <b:listGridCol select="book-it" label="Book this flight" />

                        </tb:tbListGrid>

                <b:pagerBar>

                        <b:pager for="id('flightsGrid')">

                                <b:pagerButton type="First" />

                                <b:pagerButton type="Previous" />

                                <b:pagerSeparator />

                                <b:pagerJumper />

                                <b:pagerSeparator />

                                <b:pagerButton type="Next" />

                                <b:pagerButton type="Last" />

                        </b:pager>

                </b:pagerBar> 

                </div>

Here is one sample HTML that is mapped to first column of listgrid ...

 <flights>

        <table>

                <tr>

                        <td style="font-weight:bold;">Departure</td>

                </tr>

                <tr>

                                <td>

                                        <img vspace="10" src="/rapidfares/images/BA.gif" />

                                        <br />

                                        British Airways                                   

                                </td>

                                <td>

                                        <span style="font-weight:bold;">Depart:</span>                                                                                          

                                        2:10 am

                                        &nbsp;

                                        Delhi

                                        <br />

                                        <span style="font-weight:bold;">Arrive:</span>                                                                                          

                                        6:55 am

                                        &nbsp;

                                        London

                                </td>

                </tr>

                <tr>

                                <td>

                                        <img vspace="10" src="/rapidfares/images/BA.gif" />

                                        <br />

                                        British Airways                                   

                                </td>

                                <td>

                                        <span style="font-weight:bold;">Depart:</span>                                                                                          

                                        11:25 am

                                        &nbsp;

                                        London

                                        <br />

                                        <span style="font-weight:bold;">Arrive:</span>                                                                                          

                                        2:15 pm

                                        &nbsp;

                                        San Francisco

                                </td>

                </tr>

                <tr>

                        <td style="font-weight:bold;">Return</td>

                </tr>

                <tr>

                                <td>

                                        <img vspace="10" src="/rapidfares/images/BA.gif" />

                                        <br />

                                        British Airways                                   

                                </td>

                                <td>

                                        <span style="font-weight:bold;">Depart:</span>                                                                                          

                                        4:50 pm

                                        &nbsp;

                                        San Francisco

                                        <br />

                                        <span style="font-weight:bold;">Arrive:</span>                                                                                          

                                        11:00 am

                                        &nbsp;

                                        London

                                </td>

                </tr>

                <tr>

                                <td>

                                        <img vspace="10" src="/rapidfares/images/BA.gif" />

                                        <br />

                                        British Airways                                   

                                </td>

                                <td>

                                        <span style="font-weight:bold;">Depart:</span>                                                                                          

                                        5:20 pm

                                        &nbsp;

                                        London

                                        <br />

                                        <span style="font-weight:bold;">Arrive:</span>                                                                                          

                                        6:15 am

                                        &nbsp;

                                        Delhi

                                </td>

                </tr>

        </table>

</flights>

Let me know how to achieve proper wrapping in both browsers. Also, please write if there is any way to restrict column resizing. I would like to use wrapping and restrict column resizing for listgrid.

Regards,
Ajay

Add a style

16 April, 2008 - 11:38 — Dave

Ajay:

What you're actually encountering is actually a bug in IE, if you can believe it. IE ignores inherited block styles when it hits a table tag while in quirks mode. Since we use quirks mode, you're simply falling into the bug that causes TD elements in your embedded table to lose the white-space: nowrap style we apply to the grid rows.

You can get around this, if you choose, by either creating a custom CSS style to apply to the TD elements in your table something like this:

.mytd {

  white-space: normal;

}

And then on each of the TD elements in your embedded table, add a class="mytd" to the element.

Alternatively, you can create a cascade that cascades to the TD elements within your table based on the BTL class of the table. Something like this would work and wouldn't require reworking your existing Struts code:

.btl-grid-cell div table tbody tr td {

  white-space: normal;

}

I'll post later about the column resizing. I was playing around with it and it wasn't being cooperative. :)

Dave

Wrap behavior

16 April, 2008 - 13:12 — akamble

Hi Dave,

Thanks for your quick reply.

I tried your css code and also used,

 .btl-grid-cell-content:first-child {

    white-space: normal;

  }

for other cells of listgrid.
One behavior I observed is, if we keep on minimizing all columns (by shifting them to left one by one), then column headers and the cells below them begin to mismatch.
I think I need some way to restrict resizing or control resizing as per our requirements.

Waiting for your solution ... :)

Regards,
Ajay

Here's a decent solution

16 April, 2008 - 14:57 — Dave

The listGrid has an attribute associated with it called columnResizing that's a boolean. Set it to false and columns can't be resized. However, if you have columns with display="false" within your column definitions, it won't adhere to resizing request you tell it and will always allow columns to be resized. This is presumably in case you want to unhide the hidden columns. When they're unhidden, a reflow occurs and they're displayed.

The trick is for any column you want to use the data in but don't want to display, set the width="0px" and visibility="hidden". Setting the visibility="hidden" allows the column space to be rendered within the block they're in within the flow, but setting their width to 0px gives them no horizontal space. By doing this, you're basically defining elements with no width, so the columns all render nicely. I stuck mine at the end of my column definitions, but I tested with them at the beginning as well as spread out through my column definitions and it worked nicely. Column resizing was off and I could still reference the data in the view like I wanted to.

It should look something like this for you:

<tb:tbListGrid id="flightsGrid" dataSource="flightDataSource" rowClasses="rowClass1, rowClass2" readonly="true" rows='10'  width="100%" height="100%" sortable="false" columnResizing="false" xmlns:tb="http://www.example.com/mynamespace">

  <b:listGridCol select="flights" label="Trip" />

  <b:listGridCol select="tripDeptTime" label="Departure Time" />

  <b:listGridCol select="tripDeptTimeMillis" width="0px" visibility="hidden" />

  <b:listGridCol select="tripArrTime" label="Arrival Time" />

  <b:listGridCol select="tripArrTimeMillis" width="0px" visibility="hidden" />

  <b:listGridCol select="noOfStops" label="No Of Stops" />

  <b:listGridCol select="depNoOfStops" width="0px" visibility="hidden" />

  <b:listGridCol select="totalfee" label="Total Fee" />

  <b:listGridCol select="book-it" label="Book this flight" />

</tb:tbListGrid>

As for the column resizing to minimal sizes, it's really going to be a limitation of the browser that causes those types of problems. It's trying to render blocks with space within blocks that don't have space. Even with overflow set to hidden, it's still trying to lay it out, and many browsers really want to put stuff out on the screen. Some break down pretty badly when crunched so small that they don't know what to do with the contents, as most smart phone users with older web browsers (and even some newer browsers!) can surely attest to. :)

Let's see where this gets you. If you run into problems, let me know.

Dave

Client Framework