With the fixes for #120 and #118, two minor low priority problems have been found.
Problem 1 - inappropriate/excessive wrapping
Let's assume we have a DropDown control with the following selection. We want to add an item between Martin Grom and Pippi (red marker).
As we know, every selected item has an input field to the left and right side as outline below.
If we enter a text value in an item's left side input field, the item "word wraps" like this:
The input field is placed on a "new line", and so is Pippi. Here we can see the problem; why is Pippi on a separate line from Langstrømpe, Anders Very Handsom, etc. ? Not perfect.
The same happens when - and perhaps becomes a bit more obvious, if we use the right side input field of a selected item - in this case the right side input field for Martin Grom:
Both Martin Grom and Pippi wraps to a new line - but at least Langstrømpe, Anders Very Handsome, etc. floats along with Pippi as expected.
The example above is the result of how the DOM is built. If each element was not placed on "a new line", the result would be this:
In this case I have outline the component making up a selected item, and disabled display:block
The input field "word wraps" as expected, but the item remains in place, which is obviously even worse.
Solving the problems described above would probably require a different DOM structure and thereby more or less a rewrite of the control.
Problem 2 - text-overflow disabled when entering text between selected items
Consider the following example where "Michael Pippi Lalala..." is truncated.
When we enter text in an input field related to this item (input field to the left or right side of "Michael Pippi..."), this is the result we get - text is no longer truncated, and element now becomes partially hidden:
The reason this happens, is because we have to disable width:100% for the item while editing a related input field, and instead set it to width:auto which prevents text-overflow from working (it requires a width to be set). We use width:auto to prevent a different problem. In the example below I keep width:100% on the item so that text-overflow is not disabled, but instead we get a very wide item, if the control itself is wide:
So the current solution is the better option of the two, and it's temporary. Text overflow is only disabled while the input field is active, and the fact that the right side input control in the wide item is hidden does not cause problems with TAB navigation, so it's fine.
With the fixes for #120 and #118, two minor low priority problems have been found.
Problem 1 - inappropriate/excessive wrapping
Let's assume we have a DropDown control with the following selection. We want to add an item between Martin Grom and Pippi (red marker).
As we know, every selected item has an input field to the left and right side as outline below.
If we enter a text value in an item's left side input field, the item "word wraps" like this:
The input field is placed on a "new line", and so is Pippi. Here we can see the problem; why is Pippi on a separate line from Langstrømpe, Anders Very Handsom, etc. ? Not perfect.
The same happens when - and perhaps becomes a bit more obvious, if we use the right side input field of a selected item - in this case the right side input field for Martin Grom:
Both Martin Grom and Pippi wraps to a new line - but at least Langstrømpe, Anders Very Handsome, etc. floats along with Pippi as expected.
The example above is the result of how the DOM is built. If each element was not placed on "a new line", the result would be this:
In this case I have outline the component making up a selected item, and disabled display:block The input field "word wraps" as expected, but the item remains in place, which is obviously even worse.
Solving the problems described above would probably require a different DOM structure and thereby more or less a rewrite of the control.
Problem 2 - text-overflow disabled when entering text between selected items
Consider the following example where "Michael Pippi Lalala..." is truncated.
When we enter text in an input field related to this item (input field to the left or right side of "Michael Pippi..."), this is the result we get - text is no longer truncated, and element now becomes partially hidden:
The reason this happens, is because we have to disable width:100% for the item while editing a related input field, and instead set it to width:auto which prevents text-overflow from working (it requires a width to be set). We use width:auto to prevent a different problem. In the example below I keep width:100% on the item so that text-overflow is not disabled, but instead we get a very wide item, if the control itself is wide:
So the current solution is the better option of the two, and it's temporary. Text overflow is only disabled while the input field is active, and the fact that the right side input control in the wide item is hidden does not cause problems with TAB navigation, so it's fine.