Question

I’m trying to accomplish something specific around platform constraints I’m under.

I created a somewhat self-explanatory jsfiddle of the problem at http://jsfiddle.net/MrV5M/4/

The specific problem:

• On Chrome, the right border of the input box is cut off.
• On Safari, the width of the content class cell exceeds the container so it spills over the border.
• On IE9, the label doesn’t float to the left of the content div

The main reason I care about Safari is because I’m working on a JQuery Mobile/PhoneGap app which is also a web app. I’m only supporting modern browsers, but this is driving me nuts. Normally I’d just use a table for the container, but the text-overflow: ellipsis styles on the content div don’t work when inside a table. (Basically, I’m trying to keep the content to a single line and have ellipsis without enforcing a fixed width or calculating a width with Javascript)

Anyone have the l33t CSS skills to make this work? I sure don’t… 🙂

Answer 1

There are many ways to do what you are trying to do, but if you insist on using ‘flex’ stuff which is largely un-supported (even in the majors see here), you’ll need to add the vendor prefixes to flex.

e.g… -webkit-flex, -moz-flex

Also, I don’t think you need to be setting widths on elements that have the flex property.. not positive though.

So your browser issues:

-IE doesn’t support flex at all so you’re label won’t float unless you use a float.

-The reason your input/content is spilling over the container and getting cut off is not really anything to do with flex.. but the way css works.. setting an element to 100% width means setting it to the width of its parent. But by default, css doesn’t count the padding/border-width as part of that width. So you end up getting 100% width plus the L/R padding and border. But, since you are only supporting modern browsers.. box-sizing:border-box; to the rescue. Google it for details, but putting it on your input element should do the trick.