Issue: [4.1 Alpha 3] Wiki search widget input obscured by filter button + possible styling suggestion

Issue Tools
- View Changes

April 17, 2019 10:57 AM
ACL

Regular Member
[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");

Issue Details

Issue Number 5712

Issue Type Bug

Project VaultWiki 4.x Series

Category Styling / CSS

Status Fixed

Priority 5 - Minor Bugs / Small Tweaks

Affected Version 4.1.0 Alpha 3

Fixed Version 4.1.0 Beta 2

Milestone (none)

Software DependencyXenForo 2.x

License TypePaid

Users able to reproduce bug 0

Users unable to reproduce bug 0

Attachments 1

Assigned Users (none)

Tags (none)

May 30, 2019 2:50 PM

pegasus

VaultWiki Team

Tweaked in the next release. Inputs and controls are now separately wrapped with "inputGroup inputGroup--joined buttonGroup" to achieve the desired look. The buttons themselves now use "button--link" which is the closest style to the prior style.

Reply

+ Reply

All times are GMT -4. The time now is 7:58 AM.

This site uses cookies to help personalize content, to tailor your experience, and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Learn more… Accept Remind me later

Welcome to VaultWiki.org, home of the wiki add-on for vBulletin and XenForo!

Issue: [4.1 Alpha 3] Wiki search widget input obscured by filter button + possible styling suggestion

Issue Tools