[4.1 Alpha 3] Wiki search widget input obscured by filter button + possible styling suggestion
On XF2.x, the "Wiki: Live search" widget textbox runs underneath the filter button (when present). This causes the last 4 or so characters of the search string to be obscured.
---
Before fixing this issue: perhaps you might like to consider whether the following dilemma is worth addressing (which would fix the reported issue). Currently, the wiki live search button looks more like the default browser styling and seems to bypass much of the XenForo styling.
For consistency, I'm wondering whether it could be worth applying a more XF2 approach, with a containing inputGroup inputGroup--joined div. For reference, you could view how XenForo renders number inputs with +/- buttons (such as ICQ in Account details). I believe this would fix the bug that is identified at start of this issue post, as the display method changes to flex.
What I am suggesting is a hierarchy of something along the lines of the following example. To highlight where an inputGroup might fit into it all, this example code is significantly trimmed (incomplete).
Code:
<xf:form class="vw-search-form" .... >
<div class="inputGroup inputGroup--joined vw-search-container">
<xf:textbox class="vw-search-textbox".... />
<xf:if is="{$can.filter}">
<xf:button name="filter_active" .... />
</xf:if>
<xf:button name="sbutton" type="submit" .... />
</div>
<div class="vw-search-results" style="display: none"></div>
</xf:form>
Some tweaks to vw-search-results would be necessary to retain the correct width. I think the div would need to be positioned outside of the inputGroup flex container. This change caused javascript errors from my testing, so search.js this.results would need edits to point to its new location. This seems to do:
Code:
this.results = this.form.one(".vw-search-results");