I’m trying to align all the input text fields to the left. For example, First Name, Last Name etc already on the left side as shown in the following JS Fiddle. But I want the input text box and everything similar to this on the left side as well. For example, the textbox should be near to the First Name. The CSS that’s included in the JSFiddle can’t be modified so I need to write something to override the existing CSS. But I’m wondering if it’s even possible since the input textbox seems to be occupying its own space inside the table element?
If you want the ‘th’ element with the label to only be as wide as its text then you could do something like this.
#newAccountForm table th {
width: 1%;
white-space: nowrap;
}
1 Like
Thanks. After making the changes you suggested, it is looking like this now
Since its width seemed to be too long for me, I also added the following:
#newAccountForm input, textarea,select {
width:60%
}
That reduced the width of the text boxes it looks like but disturbed the radio buttons in the end as shown in the latest fiddle here. Did I do anything wrong?
Exclude them from the rule.
e.g.
#newAccountForm input[type="text"],
#newAccountForm textarea,
#newAccountForm select {
width:60%
}
Remember comma separated lists must have the full path for each (you missed them out on the textarea and select and would have styled all textareas and selects over your whole site).
Thanks. That worked. Coming back to the original answer.
Just wanted to describe this in my own words: Does this means that whatever the default space that th element introduces, won’t be introduced and whatever comes next after the label text, will be right next to it?
The above solution works perfectly fine. I was curious , If I want to follow some other approach where I want to move the input text element towards the left, then is there any other option you could think of?
Table cells generally distribute themselves equally across the table row unless content is greater in one cell and needs more room than has been allocated.
In your original example you basically get two cells of 50% width each. Therefore I set the first cell to be 1% only which allowed the second cell to span the remaining width.
Widths on table cells are treated as a suggestion in the auto layout algorithm which means the cell becomes as small as possible yet expands enough to hold its content. This effectively gives a shrink to fit where the longest content determines the whole column width.
It’s an old table trick from the late 90s when all we had was tables 
You could give an exact percentage width to the first cell if you wanted but then you’d need the fixed table layout algorithm and also lose the nowrap. However that may result in content being cut off as it would no longer take note of its content.
Thanks for the detailed explanation. Appreciated.
Could I have also lost the responsiveness factor here with a fixed table layout?
Not necessarily. In some cases they are more responsive because percentage widths are obeyed. If the content in the cell doesn’t break or wrap then the cell still gets smaller and the content overflows. In the auto layout algorithm the cell only goes as small as its content thus pushing the rest of the page wide.
It all depends on situation but generally the auto layout is best.
This is how part of your form would now look on a small smartphone 320 pixels wide (CSS pixels):
This is how it would have appreared in your first Fiddle:
I therefore suggest you just add to the original code:
label{
text-align: right;
}
2 Likes
Good point and thanks for reminding me. 
I should have mentioned that something needs to be done for smaller screen.
Your label alignment to the right is a good easy fix but maybe a media query could make this a little neater.
e.g.
/* additional css */
#newAccountForm table th {
width: 1%;
white-space: nowrap;
}
#newAccountForm input[type="text"],
#newAccountForm textarea,
#newAccountForm select {
width: 100%;
max-width: 600px;
}
@media screen and (max-width: 600px) {
#newAccountForm table th {
width: auto;
white-space: normal;
}
}
@media screen and (max-width: 480px) {
#newAccountForm table th,
#newAccountForm table td {
width: auto;
display: block;
}
}
Then we get three relatively nice layouts.
Obviously they can be tweaked as required but I do prefer the linear layout on smart phones as they are easier to use.
[off-topic]
How did you hear about the us?
Should that be “How did you hear about us?”
[/off-topic]
2 Likes
Thanks @Archibald and @PaulOB for discussing on this topic. I was actually gonna test it on mobile mode and after including Paul changes, it seems to be working on all sorts of devices listed on the Developer tools of Chrome.
Few questions:
- Is it good to assume that we can put
max-width : 600pxis a good number to use whenever I make any changes anywhere? I mean are all devices smaller than desktop going to be less than 600px and smaller? And next width to use is480pxalways, just like you have used?
Q2:
Initially, I just used width:60% here during my testing, so is it mandatory to define max-width:600px here, or let’s say if we don’t define it and define the media queries with different max-width, just like you did (one with 600px and another with 480px), would be enough?
The issue was that you used 60% and on a 2000px wide screen that’s going to be an input of 1200px wide which is much to big. Then when on a small screen your 60% is going to be too small.
On a smaller screen you can let it be 100% width.
On a larger screen it is still 100% width but has a max-width of 600px. I chose 600px as an arbitrary number and it could be anything reasonable. There is no need to change it for smaller screens as they will get the width:100% automatically when that element is less than the 600px max-width.
Thank you. Could you also explain these two things here as well? Why two different max-width here? I was wondering if everything couldn’t go inside @media screen and (max-width: 600px) { block?
quote=“Jack_Tauson_Sr, post:13, topic:413179”]
Why two different max-width here?
[/quote]
The 480px max-width is for when the screen is quite small puts each cell on its own line (my first screenshot in the post above). There is no need to do that at a larger size as side by side works fine (second screenshot).
In the end it’s up to you but you can’t nest media queries if that’s what you were asking.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.