Help coderanch get a
new server
by contributing to the fundraiser
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Display Tag css issues in IE and FF

 
Ranch Hand
Posts: 110
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator


The display tag http://sourceforge.net/projects/displaytag/ allows us to create dynamic tables in jsp. The above CSS is a modified version of the CSS obtained from http://sourceforge.net/forum/forum.php?thread_id=1651503&forum_id=249318

The above CSS fixes two issues:
1.) Issue when table goes beyond page width?
I extended the css a little beyond by creating a frame (see displayTableFrame above) as the table width often goes beyond the page width. This does an ok job however, there are many issues that the frame does not work in Internet Explorer at all.

.displayTableFrame {
background-color: white;
overflow-x: scroll;
height: 320px;
width: 100%;
}
As again I have no clue how we can control the height based on all other data in a page so that it fits exactly in the single page. I am working on fixing the CSS to get the height automatically adjusted soon. Currently the height is based on the actual display table height which is also fixed as you can see in the .dataTable CSS

2.) The vertical scroll bar appearing on the right hand side of the display table creates a horizontal scroll bar in the bottom in all browsers.
.dataTable tbody {
height: 230px;
overflow-x: hidden;
}
The overflow-x:hidden removes that ugly horizontal scrollbar. The frame in itself gets you a horizontal scrollbar only when the table goes beyond the page width. All of this was tested in FireFox.

A quick tip add an extra column at the end of all columns to move the vertical scrollbar a little further to the right as you can see the scrollbar hiding/overlapping some of the text of the last column.
<display:column title="">    
</display:column>

Having been said this. I am still stuck with getting this working in IE. I need some good help/input on the frame can also be fixed in Internet Explorer as well. How do we create a scrollable table body in both IE 5.5+ and FF? Unfortunately, I do not how to access the display table <tr> and <td> fields as they are created dynamically when you create a table in the JSP as follows.

JSP
---------

Appreciate any suggests/comments to make this work in IE.

-Cheers
Krishna

[ April 20, 2008: Message edited by: Rama Krishna ]

[ April 20, 2008: Message edited by: Rama Krishna ]
[ April 20, 2008: Message edited by: Rama Krishna ]
 
Not so fast naughty spawn! I want you to know about
We need your help - Coderanch server fundraiser
https://coderanch.com/t/782867/Coderanch-server-fundraiser
reply
    Bookmark Topic Watch Topic
  • New Topic