On Thursday, November 4, 2021 at 12:31:14 PM UTC-7 Télumire wrote: > Here's the code to push the dropdown in the proper place : >
There are layout problems with this solution. To see the issues, try putting "before" and "after" text surrounding the "combobox" span: > *BEFORE*<span class="combobox"> > <$select field=selection class="select-btn" > > <option value='cities'>A Tale of Two Cities</option> > <option value='science'>A New Kind of Science</option> > <option value='dice'>The Dice Man</option> > </$select> > <$edit-text field=selection placeholder="type or select"/> > </span>*AFTER* and compare this with the result of showing only an $edit-text widget: *BEFORE*<$edit-text field=selection placeholder="type or select"/>*AFTER* For the simple inline $edit-text widget, the BEFORE/AFTER text appears as you would expect: immediately preceding/following the input element and vertically aligned with the middle of the text However, note the placement and vertical alignment of the "combobox" elements: The edit input/select elements appear vertically aligned *below the baseline *of the surrounding BEFORE/AFTER text, and the AFTER text is immediately following the input element, rather than following the select element. The CSS you provided also assumes that the width of the select element's downarrow button will always a fixed width of "20px", which may not be the case depending upon which browser you are using. Also, there is also a slight difference in the height of the select element vs the edit element (testing with Chrome), so that the bottom border of the select element, which is behind the edit element, is visible, creating the appearance of a double-thick bottom border on the edit element -e -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c20438a8-7107-4db4-adca-c5044a6638acn%40googlegroups.com.
