framework7

Open full view…

Editable select drop-down

jmrd0001
Tue, 14 Nov 2017 06:36:48 GMT

Hi, I'm trying to create an editable drop down list (html select). The user can select from the drop down list, or enter a value that is not in the drop down list. If they select or enter a value that is in the drop down list, then when the list is shown, the value should show as selected in the list. If they enter a value that is not in the drop down list, then no value should show selected in the list. I found the html & css below, which overlays a text field on top of the select. Without F7, it seems to be working as above, but when I use it in F7 there are a couple of issues - the text field is not overlaying the select, and the down arrow is not showing. Instead of this method is the another recommended way with F7 to make an editable select that works as above? If not, how do I ensure the text field overlays the select, and shows the down arrow? There is a nice down arrow that shows on the date selector, that would be fine. Thanks! *Here is the HTML*: <div class="dropdown"> <input type="text" onchange="this.nextElementSibling.value=this.value"/> <sel ect onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()"> <option>ABC</option> <option>DEF</option> <option>XYZ</option> </select> </div> *and the CSS*: .dropdown { position: relative; width: 200px; } .dropdown select { width: 100%; } .dropdown > &#42; { box-sizing: border-box; height: 1.5em; } .dropdown select { } .dropdown input { position: absolute; width: calc(100% - 20px); } *Here is the F7 HTML*: <div class="content-block"> <div class="list-block"> <ul> <li> <div class="item-content"> <div class="item-inner"> <div class="item-input mydropdown"> <input type="text" onchange="this.nextElementSibling.value=this.value"/> <select onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()"> <option>ABC</option> <option>DEF</option> <option>XYZ</option> </select> </div> </div> </div> </li> </ul> </div> </div> *and the F7 CSS*: .mydropdown { position: relative; width: 200px; } .mydropdown select { width: 100%; } .mydropdown > &#42; { box-sizing: border-box; height: 1.5em; } .mydropdown select { } .mydropdown input { position: absolute; width: calc(100% - 20px); }