Announcement Announcement Module
Collapse
No announcement yet.
How to add Scroll Bars? Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to add Scroll Bars?

    Hi,

    I am using the petclinic main page as a template. On this page, there is a Table on the right sitting inside a box that has headings..

    I need to add scroll bars (v + h) to the Table. I have not done much UI work and would appreciate if someone can help. I have fiddled with the standard.css file but no deal.

    This is my last resort.

    Please see my sample/testing Table in the attached file. Here is my standard.css file:

    Code:
    body,div,td {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #666;
    }
    
    body {
    	background-color: #fff;
    	background-image: url(../images/newbzinc.png);
    	background-position: top center;
    	background-repeat: no-repeat;
    	text-align: center;
    }
    
    #wrapper {
    	width:800px;
    	min-width: 800px;
    	max-width: 800px;
    	margin-right: auto;
    	margin-left: auto;
    	/* fix max-width incompatibility in IE6 */
    	width:expression(document.body.clientWidth > 800? "800px": "auto" );
    	
    	overflow:auto;   /* scroll */
    	display:block;
    	margin-top: 90px;
    }
    
    /* header and footer elements */
    
    #main {
    	overflow:auto; /*scroll */
    	display:box;
    }
    
    #menu {
        background: #eee;
      	position:relative;
      	float:left;  	
      	left:0px;
      	width:220px;
      	margin-right:15px;
    }
    
    #menu ul{
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    #menu ul li{
    	padding: 0px;
    }
    
    
    #menu a, #menu h2 {
    	display: block;
    	margin: 0;
    	padding: 2px 6px;
    	color:#FFFFFF;
    }
    
    #menu h2 {
    	color: #fff;
    	background: #648C1D;
    	text-transform: uppercase;
    	font-weight:bold;
    	font-size: 12px;
    }
    
    #menu a {
    	color: #666666;
    	background: #efefef;
    	text-decoration: none;
    	padding: 2px 12px;
    }
    
    #menu a:hover {
    	color: #648C1D;
    	background: #fff;
    }
    
    #footer {
    	background:#fff;
    	border:none;
    	margin-top:15px;
    	border-top:1px solid #999999;
    }
    
    #footer .new {
    	float:left;
    }
    
    #footer a:link {color: #7db223;}
    
    label {
    	width:100px;
    	float:left;
    	margin-left: 5px;
    	margin-top: 0px;
    }
    
    input {
    	height:15px;
    }
    
    input, textarea, select {
    	border:1px solid #B3B3B3;
    }
    
    input.image {
    	border: none;
    	height: auto;
    }
    
    submit {
    	height:15px;
    }
    
    div {
    	text-align: left;
    }
    
    div .box {
    	display:block;
    	margin-left:105px;
    }
    
    /* menu elements*/
    
    a.menu, a.menu:link, a.menu:visited {display:block; width:145px; height:15px;} 
    	
    /* text styles */
    
    h1,h2,h3 {
    	font-family: Helvetica, sans-serif;
    	color: #7db223;
    }
    
    h1 {
    	font-size: 18px;
    	line-height: 20px;
    }
    
    h2 {
    	font-size: 16px;
    	line-height: 18px;
    }
    
    h3 {
    	font-size: 14px;
    	line-height: 16px;
    	color:#555;
    }
    
    h4 {
    	font-size: 12px;
    	line-height: 14px;
    }
    
    .errors {
    	color: red;
    	font-weight: bold;
    	display: block;
    	margin-left: 105px;
    }
    
    a {
    	text-decoration: underline;
    	font-size: 10px;
    }
    
    a img {
    	border: 0 none;
    	vertical-align: middle;
    }
    
    tr:nth-child(odd) {
    	background-color: #FFFFFF;
    }
    
    tr:nth-child(even) {
    	background-color: #EFEFEF;
    }
    
    a:link {
    	color: #7db223;
    }
    
    a:hover {
    	color: #456314;
    }
    
    a:active {
    	color: #7db223;
    }
    
    a:visited {
    	color: #7db223;
    }
    
    ul {
    	list-style: disc url(../images/bullet-arrow.png);
    }
    
    li {
    	padding-top: 5px;
    	text-align: left;
    }
    
    li ul {
    	list-style: square url(../images/sub-bullet.gif);
    }
    
    li ul li ul {
    	list-style: circle none;
    }
    
    ul li {
    	margin:0 0 0.25em 0;
    	padding:0;
    }
    /* table elements */
    
    table {
    	background: #EEEEEE;
    	margin: 2px 0 0 0;
    	border: 1px solid #BBBBBB;
    	border-collapse: collapse;
    	width: 100%
    }
    
    table table {
    	margin: -5px 0;
    	border: 0px solid #e0e7d3;
    	width: 100%;
    }
    
    table td,table th {
    	padding: 2px;
    	border: 1px solid #CCCCCC;
    }
    
    table td form {
    	text-align:center;
    	vertical-align: middle;
    	margin: 0px;
    }
    
    table th {
    	font-size: 0.75em;
    	text-align: left;
    	font-weight: bold;
    	color: #FFF;
    	background: #999;
    }
    
    table thead {
    	font-weight: bold;
    	font-style: italic;
    	background-color: #BBBBBB;
    }
    
    table a:link {color: #303030;}
    
    caption {
    	caption-side: top;
    	width: auto;
    	text-align: left;
    	font-size: 10px;
    	color: #848f73;
    	padding-bottom: 4px;
    }
    
    fieldset {
    	background: #e0e7d3;
    	padding: 8px;
    	padding-bottom: 22px;
    	border: none;
    	width: 360px;
    }
    
    fieldset label {
    	width: 50px;
    	float: left;
    	margin-top: 1.7em;
    	margin-left: 20px;
    }
    
    fieldset textfield {
    	margin: 3px;
    	height: 18px;
    	background: #e0e7d3;
    }
    
    fieldset textarea {
    	margin: 3px;
    	height: 120px;
    	background: #e0e7d3;
    }
    
    fieldset input {
    	margin: 3px;
    	height: 18px;
    	background: #e0e7d3;
    }
    
    fieldset table {
    	width: 100%;
    }
    
    fieldset th {
    	padding-left: 25px;
    }
    
    .table-buttons {
    	background-color:#fff;
    	border:none;
    }
    
    .table-buttons td {
    	border:none;
    }
    
    .submit input {
    	border: 1px solid #BBBBBB;
    	color:#777777;
    	padding:2px 7px;
    	font-size:10px;
    	text-transform:uppercase;
    	font-weight:bold;
    	height:20px;
    }
    
    .updated {
    	background:#ecf1e5;
    	font-size:10px;
    	margin-left:2px;
    	border:4px solid #ecf1e5;
    }
    
    .updated td {
    	padding:2px 8px;
    	font-size:10px;
    	color:#888888;
    Please HELP. Many Thanks.
    Last edited by mtam; May 5th, 2010, 02:50 PM.

  • #2
    ROO Spring MVC - Add Horizontal Scrollbar to the Table

    Often, when there are many columns to display or when the
    columns are large due to the size of the data, only a
    part of the Table is displayed and the icons (show, update, delete)
    are out of view and difficult to reach.

    A simple tweak to table.tagx brings automatically an Horizontal Scrollbar
    when needed.

    How ?

    At line 41, just before <spring:eval var="colCounter" expression="1" />
    add the following line:

    <div style="overflow:auto;">

    Do not forget to add a closing tag </div> at the bottom, just after </table>

    I would dare to suggest to add this simple tweak to the MVC plugin

    Comment

    Working...
    X