Service Portal - search bar is not showing on Mobile view

reginabautista
Kilo Sage

Hi guys,

 

I've noticed that the search bar is missing when I change my view port to mobile size. Would you guys have any idea why? 

 

find_real_file.png

 

HTML:

<div id="homepage-search" class="hidden-xs wrapper-xl">
<div class="wrapper-xl">
<h3 class="text-center text-3x m-b-lg sp-tagline-color dropshadow-bg" ng-bind="options.title"></h3>
<h4 ng-if="options.short_description" class="text-center m-b-lg sp-tagline-color" ng-bind="options.short_description"></h4>
<sp-widget widget="data.typeAheadSearch" />
</div>

<!--Regina removed this as the Contact us has now it's own widget
<br><a style="text-decoration: underline" href="mailto:{{data.portal_email}}?Subject=Portal Feedback" target="_top"> Email </a> us or message us on <a style="text-decoration: underline" href={{data.slack_url}} target="_blank">Slack</a>
-->
<div class="feedback-text">
We are working hard to improve this portal please help by sending feedback.
<sp-widget widget="data.contactUs" />
</div>

</div>

 

Server Script

var fName = gs.getUser().getFirstName();
options.title = 'Hi ' + fName + ', how can we help?' ;
data.contactUs = $sp.getWidget('ssp_contact_us', '');
data.typeAheadSearch = $sp.getWidget('ssp_typeahead_search', options.typeahead_search);
data.slack_url = options.slack_url;
data.slack_channel = options.slack_channel;
data.portal_email = options.portal_email;
//data.typeAheadSearch = $sp.getWidget('typeahead-search', options.typeahead_search);

 

 

1 ACCEPTED SOLUTION

Nia McCash
Mega Sage
Mega Sage

class=hidden-xs means that in extra small screens, the element is hidden which is why you don't see it in mobile view.

View solution in original post

3 REPLIES 3

Mike Patel
Tera Sage

just remove class from <div id="homepage-search" class="hidden-xs wrapper-xl">

Nia McCash
Mega Sage
Mega Sage

class=hidden-xs means that in extra small screens, the element is hidden which is why you don't see it in mobile view.

reginabautista
Kilo Sage

thanks guys removing the xs-hidden (not including wrapper-xl) does resolve the issue. Thanks for the help!