CODEWITHSUNDEEP
htmlcss
DanCouper
DanCouper

Reputation: 850

Laying out input elements using display:table-cell

I'm trying to write a CSS class that allows me to sit form elements (mixed button and text inputs) in a line so that they abut. I'm using display:table on a parent, and wrapping each element in a container with display:table-cell, and it works fine except for one bug that I can't figure out a way around.

So for example, parent is control-group, the element wrappers are control-group-item, and the elements themselves are control-group-input.

.control-group
  .control-group-item
    .control-group-input{type: "text"}
  .control-group-item
    .control-group-input{type: "submit"}

CSS of this (I've normalized font size/line height/padding/browser weirdness and all form elements are inline-blocked etc.):

.control-group {
    display: table;

.control-group-item {
    display:table-cell;
}

gives this, which is OK:

Autosized inputs

However, I ideally need it to fill a grid column of undetermined size, rather than the browser deciding how big my elements should be. If apply width:100% on .control-group, this happens:

Extra space I can't get rid of

The orange is a background colour applied to the table cell control-group-item. The issue seems to be with the 'submit' input: the submit stays the size it should be but browsers universally add extra space next to it within the table cell. So if I apply width:100% to each .control-group-input, I get this:

enter image description here

Which is OK, but stretches the ‘submit’ button. I can live with that, but is there any way to get it like the second image (but without the random space) using my current approach, or should I sack that off & try something different?

Edit I do not know the sizes of the inputs in advance: I can't set a width on them, which effectively rules out most inline block/float methods. I ideally need IE 8/9 support, which is why display:table was tried.

Edit 2: here are versions on Codepen: http://codepen.io/DanielCouper/pen/knDmC After rewriting the code there, I realise my question is: how is the width of the table cells being calculated? It's specifically the cell with the submit button that has the extra space. The extra space seems random.

Upvotes: 1

Views: 485

Answers (2)

DanCouper
DanCouper

Reputation: 850

nm, spoke too soon. Thought I had solved it, hadn't, was getting effects from some other CSS.

Upvotes: 0

mrmcgreg
mrmcgreg

Reputation: 2816

Here's a working version in codepen: http://codepen.io/mkleene/pen/ldqDH

The summary is that you need to remove the width: 100% on the submit button and then give the second table cell element width: 100%. You also need to make the textbox take up its entire parent with a 100% width.

You also need to make sure that the table element is using an auto table layout.

Upvotes: 1

Related Questions