Topic on Skin talk:Pivot/Flow

Search autocomplete not working on mobile - how to add additional icon to top bar

1
Summary by Felix Englisch

Suggestions for the improvement of the search box on small screens and how to do it by yourself. See results.

Felix Englisch (talkcontribs)

I love this skin and it fits perfectly to the city week I am configuring. Yet, the search box is very small and difficult to find in the off-canvas side menu and autocomplete was not working on mobile like it does on a large screen. I tried editing pivot.skin.php and changed autocomplete="off" to "on" in lines 122 and 167 as described here, but nothing changed.


What I did instead: I added a search icon to the top bar which only appears on small screens. The icon links to Special:Search, where autocomplete is working also on mobile. Then, I deleted the search box from the off-canvas sidebar.

To add the icon, open your pivot.skin.php and look for <section id="middle-nav" class="middle tab-bar-section"> (somewhere around line 100). Directly below this line, add the following snippet:

<section id="middle-nav" class="right-small show-for-small">

<a href="/wiki/Special:Search" class="search"><span id="search-icon"><i class="fa fa-search fa-lg"></i></span></a>

</section>

The path to your Special:Search given at href="..." will vary, if your are not using short URLs with the same structure as me. This should work. If not, you can try to find a solution with the "Inspect Element" function of your browser and then copy the outer HTML to your pivot.skin.php.


To remove the search box from your off-canvas side menu on mobile only, find the following code snippet in your pivot.skin.php and delete it.

<li class="has-form">

<form action="<?php $this->text( 'wgScript' ); ?>" id="searchform" class="mw-search">

<div class="row collapse">

<div class="small-12 columns">

<input type="search" name="search" placeholder="<?php echo wfMessage( 'search' )->text() ?>" title="Search [alt-shift-f]" accesskey="f" id="searchInput-offcanvas" autocomplete="on">

</div>

</div>

</form>

</li>


Alternatively, you can add the following to your Mediawiki:Pivot.css:

.row.collapse > .column, .row.collapse > .columns {

display: none;

}


I hope this helps and works for you, too. Getting a proper solution for the search box issue in the pivot skin (hard to find, too small and no autocomplete) would nevertheless be great.

Reply to "Search autocomplete not working on mobile - how to add additional icon to top bar"