• From: Glasgow, Scotland
  • Registered: 2008-08-22
  • Posts: 114

Topic: Damn css, can someone throw me a bone

Okay I've got a nice little table full of inputs with width set to 100% so they nicely fill each cell but i've got a bit of an issue. The table is inserted into the html via ajax after this is done i convert the date fields in jquery-ui datepicker fields which adds a button after the input. Because the width is 100% the button gets pushed to the next line which is fugly.

What can i do so that the input and button fill 100% of their containing cell?

happs74's Website

  • Vi.
  • Ticketholder
  • Offline
  • From: Muğla
  • Registered: 2010-02-06
  • Posts: 5

Re: Damn css, can someone throw me a bone

Can you write table code so we can test it.

You can use css to change 'width'. I can test / fix after you write table code.

/* This will effect submit type field */
.table_class input[type=submit] 
{
    width:20%;
}

/* This will effect text type field */
.table_class input[type=text] 
{
    width:60%;
}
  • From: Glasgow, Scotland
  • Registered: 2008-08-22
  • Posts: 114

Re: Damn css, can someone throw me a bone

Yeah i understand that,

<table class="list">
  <tr>
     <td><input type="text" name="forename" value="Elmer" /></td>
     <td><input type="text" name="surname" value="Fudd" /></td>
     <td><input class="datepicker" type="text" name="date" value="01/02/2010" /></td>
  <tr>
</table>

This is an example of the html i get back from the ajax call to insert on my page.

The css would be

.list { width:100%; }
.list input { width:100%;}

This will display the inputs filling their table cells.

The problem is that that after i've inserted the table i run this

jQuery('.datepicker').datepicker(); to add the jquery-ui calendar pop up (http://jqueryui.com/demos/datepicker/), as part of this it adds a button to the right of the input (which is now 100% of the cell) so the button get pushed down a line. 

<table class="list">
  <tr>
     <td><input type="text" name="forename" value="Elmer" /></td>
     <td><input type="text" name="surname" value="Fudd" /></td>
     <td>
        <input class="datepicker" type="text" name="date" value="01/02/2010" />
        <button type="button" class="ui-datepicker-trigger">...</button>
     </td>
  <tr>
</table>

I can alter the html and css after the datepicker has done it's stuff but i'm unsure of the css to use to set the input to be 100% of the container minus the width of the button.

Cheers for replying and I hope that makes sense.

happs74's Website

  • Vi.
  • Ticketholder
  • Offline
  • From: Muğla
  • Registered: 2010-02-06
  • Posts: 5

Re: Damn css, can someone throw me a bone

Try adding this CSS code to your style;

.list td button {
  width:10%;
}
.list .datepicker {
  width:80%;
}

You don't need button, you can add trigger to input fields for date picking If you want. If button is required, you can set different width jQuery. There are more than one solution but simplest solution is first (adding css code).

  • From: Glasgow, Scotland
  • Registered: 2008-08-22
  • Posts: 114

Re: Damn css, can someone throw me a bone

Cheers i'll give that a try.

happs74's Website