This project is read-only.

Search on tablet and mobile views

Nov 26, 2014 at 8:16 AM

There were some requirements from users that they wanted to does not view the ribbon controls on tablet and mobile views and minor modifications. I have able to able to manage using bootstrap 3-custom.css using bootstrap-3.master

But they want search functionality on tablet and mobile views. I have tried several combinations and checked Erik Swenson's blog for mobile devices and tried to modify using bootstrap-3-custom.css.
1) @media only screen and (max-width: 768px) and
2) @media only screen and (max-width: 480px)

I used the following code for tablet and mobile views:
/* Search */
    .ms-mpSearchBox{padding-top: 0px; position: absolute; top: 0px; height: 40px;}
    .ms-mpSearchBox, #searchInputBox{float: none; width: 100%; background-color: #00ccee;}
    #SearchBox{padding: 10px;}
    .ms-srch-sb{width: 100%; display: table; background-color:#FFF;}
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 5px;
        width: 100%;
        background-color: transparent;
        display: table-cell;
        display: table-cell;
However, there is no change when I updated the CSS on the SharePoint Server.
Could someone please advice, how we can display search control on these mobile devices?

Thank you.
Nov 26, 2014 at 5:33 PM

My first concern is that by using max-width media queries, you are working against the mobile first approach of B3. B3 is a mobile first framework that use min-width media queries. That doesn't mean that max-width shouldn't work, but if you view the hidden controls in your browser element selector, you will likely find other styles that are overriding your max width media queries.

In regards to your request regarding search controls, what do you mean by this? You want the search box in the header to show up for tablet/smart phone? Or are you interested in the search results and hover panels?

Nov 27, 2014 at 2:04 AM
Hi Eric,

Thanks for your reply. This is my approach.
I am trying to test with max-width media queries and after I have successfully placed search text box in header of tablet view/mobile view, I would modify the the min-width so it works for users. Is my approach okay?

Users want to have search text-box in the header on Desktop view (i.e. out of the box ) as well as similar function on the tablet and mobile view. Users are not interested in search results and hover panels though. Just plain search box in tablet/mobile views.

Any suggestions would be appreciated?

Nov 27, 2014 at 2:16 AM

I think I see the problem. The issue is that the desktop header is hidden on mobile views and since the search box is in the larger, desktop header, it is hidden as well. You could either add a second search control to the master page and include that in a mobile header that is hidden when viewed on wider viewports, or you could need to change the larger header to only hide components that you do not need, leaving the search box in visible.

Check out what I did for If you look at the source you will see how I have the search box in wide view, then have another search box that is hidden via an icon when in mobile view. With a browser toolbar you should be able to see what I did.