Situation:
I have a table that shows some simple data with help of various input fields and gives user the ability to change them.
First column of the table is a bit too wide. In other columns width adjusts as you change the width of input field. So if i want to change column size I can edit the width property of input field.
the website i'm working on wasn't made by me and I'm not fully aware of all the inner workings of the system but this particular table seems to be identical to other one that work just fine.
Problem:
For some reason first column is not proprtional to input field size nor it responds to it's width being changed. Browser just assigns width value of 207 and that is that.
Things I tried:
1) Setting width property to <td> and/or <th> tag of the column in question.
2) Changing text in header fields (hoping that text length in header row is causing this)
Maybe someone could suggest a few things that could be causing this and/or how to fix it?
I'm very much used to working with Desktop apps and this endless overlapping of properties is so frustrating.
ok, so i did a few experiments with the code and it seems that the "name" property that is affecting the width of the column.
basically rows are being created with data that is retrieved using jquery and then it loops through them and creates row for each.. well.. row . And every input field has name that matches the column name that will be used as value in that text field/textearea
or whatever else it might be.
Found out this site that says that "visibility: hidden" only hides the field but it still affects layout while display:none does not. Changing this actually helped.
I wish I knew why the column is much wider thant text field inside it even though in other columns width is just as big to accommodate the text field that is in cell.
Marked as answer by BU XI - MSFT on Jul 10, 2012 06:58 AM
randylikesle...
0 Points
4 Posts
Why is browser assigning some random number as column width
Jul 04, 2012 10:11 AM|LINK
Hi
Situation:
I have a table that shows some simple data with help of various input fields and gives user the ability to change them.
First column of the table is a bit too wide. In other columns width adjusts as you change the width of input field. So if i want to change column size I can edit the width property of input field.
the website i'm working on wasn't made by me and I'm not fully aware of all the inner workings of the system but this particular table seems to be identical to other one that work just fine.
Problem:
For some reason first column is not proprtional to input field size nor it responds to it's width being changed. Browser just assigns width value of 207 and that is that.
Things I tried:
1) Setting width property to <td> and/or <th> tag of the column in question.
2) Changing text in header fields (hoping that text length in header row is causing this)
Maybe someone could suggest a few things that could be causing this and/or how to fix it?
I'm very much used to working with Desktop apps and this endless overlapping of properties is so frustrating.
Randy
randylikesle...
0 Points
4 Posts
Re: Why is browser assigning some random number as column width
Jul 04, 2012 11:04 AM|LINK
ok, so i did a few experiments with the code and it seems that the "name" property that is affecting the width of the column.
basically rows are being created with data that is retrieved using jquery and then it loops through them and creates row for each.. well.. row . And every input field has name that matches the column name that will be used as value in that text field/textearea or whatever else it might be.
And if I change name the width issue dissapears.
This is the line that is not working:
<td><input type="text" name="SUMETN_CODE" id="SUMETN_CODE-${SUMETD_ID_Uzdevums}" class="data xAdvTotal" style="width:70px" value="${SUMETN_CODE}" onchange="required_input(this)" onfocus="save_val(this)"/></td>
And this works just fine:
<td><input type="text" name="SUMETN_CODE2" id="SUMETN_CODE-${SUMETD_ID_Uzdevums}" class="data xAdvTotal" style="width:70px" value="${SUMETN_CODE}" onchange="required_input(this)" onfocus="save_val(this)"/></td>
Still have no clue what is causing it though :(
randylikesle...
0 Points
4 Posts
Re: Why is browser assigning some random number as column width
Jul 04, 2012 11:39 AM|LINK
Finally found the line that actually is causing the (no matter what the name is):
$("input[name='SUMETN_CODE']", this).attr("style", "visibility: hidden");
All this line is supposed to do is hide the input field for certain rows. Why is this affecting the column size at all?
randylikesle...
0 Points
4 Posts
Re: Why is browser assigning some random number as column width
Jul 04, 2012 12:12 PM|LINK
Found out this site that says that "visibility: hidden" only hides the field but it still affects layout while display:none does not. Changing this actually helped.
I wish I knew why the column is much wider thant text field inside it even though in other columns width is just as big to accommodate the text field that is in cell.