Move an element to next line using CSS, if it doesn't fit in the available area width

Question

I have a View created using ExtJS, composed of a Autocompleting Textbox (bound to a store) and a custom templated DataView (again, bound to another store). And the view looks like below.

Here's how it works.

• User searches for a Tag in a searchbox, and selects the matching tag from dropdown. Once selected, it is automatically added to dataview right below, which appears like a Tag Cloud (though not exactly).
• Tag item added to DataView is custom styled, and has "remove" link next to label to remove it from DataView.

Now, here's a problem:

• The available width of DataView is fixed, so if a tag item text is longer, you can see that it gets broken and remaining part of tag appears on next line.

What I want is something like this:

As you can see that if Tag item is not small enough to fit available area, it gets into next line, but if space is available, it will be on the same line.

Any way to attain it with CSS? or need to write JS logic for this?

Note that for CSS solution, I'm bound to support evil IE7/8.

Answer 1

Yes you can do something similar in the CSS, Do you have a sample code you can post online somewhere? so we can give advice on your actual code?

But to achieve this, each input field needs to have a css style of

display: inline-block;

so if it fits in the provided width, it will remain in the same line, but if the text box is too large, it will goto next line.

Looking at your example, it seems you have some kind div container with "overflow: hidden". In this senario, you either remove the overflow: hidden OR you can wrap the input text boxes with another div and set the width there.

EDIT

Here's the example

http://jsfiddle.net/Raver0124/7X2h3/

Answer 2

you can also do this using max-inline-size property:

.x-tagfield-input  {
  max-inline-size: size in px;
}