Page 1 of 1

Align Fields Horizontally in table

Posted: 05 Jul 2015
by Kim Jeim
Hi,


We are trying to create a table in a SharePoint list with all the field names collapsed. Everything is in one table, but the date fields seem to be slightly lower (not in line) with the other fields in the table:



I tried to use css to

1) Push the other boxes down slightly (using the margin property in css)

2) Maintain the date fields at 0 margin.



This seems to have worked (picture attached) but then the read only fields do not seem to follow the css I put in (I tried putting extra lines of css just for the .cost class without specifying input type but that does not seem to work either). Here is my CSS:


.cost input[type="text"], .cost select{

width:125px;

margin-top:4px;

}


.date input[type="text"] {

margin-top:0px;

}

What can I do to get everything aligned? Thanks in advance.

Re: Align Fields Horizontally in table

Posted: 06 Jul 2015
by rostislav
Please define a css class for each of your date fields and paste the following css into the css editor (substituting 'className' for your class name)

Code: Select all

.className .ms-dtinput
{
        vertical-align: top;
}

Re: Align Fields Horizontally in table

Posted: 15 Jul 2015
by Kim Jeim
Thanks that works