Define Search Bar size only for mobile

[utente]

Hi All,

I need to shot the Seach-Bar (like in on desktop view ) also in mobile phone.

The Widget that call the Search Bar have a following HTML:

<div id="help-search" class="wrapper-xl">
   <div class="wrapper-xl">
   <h1 class="text-center text-4x m-b-lg sp-tagline-color"> Help Search </h1>
   <h4 class="text-center m-b-lg sp-tagline-color">   </h4>
   <sp-widget widget="data.typeHelpSearch" />
   </div>
</div>

<div id="help-search" class="wrapper-xl">

  <div class="wrapper-xl">

  <h1 class="text-center text-4x m-b-lg sp-tagline-color"> Help Search </h1>

  <h4 class="text-center m-b-lg sp-tagline-color">   </h4>

  <sp-widget widget="data.typeHelpSearch" />

  </div>

</div>

And, the result that I have is the follow:

The search bar have a big space around and is too small.

After some research in HTML page,

I have noticed that the problem was related with the class class="wrapper-xl"

indicated on the first DIV and in the second DIV

It's possible to specify an condition that apply the class only in desktop enviropment ?

Regards

Vincenzo

[iDNS]

Hi,

You can probably use the @media screen CSS & set it up accordingly. 

Regards,
Dalvi N S 

[mandle · Accepted solution]

@vingenzo

You have a few options. These 2 are the best. The latter (#2) is what I would do:

1. Clone the "Homepage Search" widget and modify the HTML Template to not include the "wrapper-xl" class in favor of as @iDNS mentioned some custom, non-Bootstrap CSS, and media queries https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
   
   I'm thinking you already did clone "Homepage Search" since your HTML above does not include "hidden-xs" class on the #homepage-search DIV. It is unfortunate that ServiceNow hardcoded that bootstrap class into the widget. See #2 which could offer you the opportunity to stop using your cloned version in favor of the OOTB.
   
   
   
2. Override the "wrapper-xl" and "hidden-xs" bootstrap classes in the "Homepage Search" Widget Instance as follows:
   Add the CSS below to the "CSS" field on the Widget Instance. See screenshot 3 for final result
   
   

   .hidden-xs {
     display: block !important;
   }
   
   @media (max-width: 600px) {
     .wrapper-xl {
     	padding: 0px !important;
     }
     #homepage-search {
     	padding: 10px 10px 30px 10px !important;
     }
     h1 {
       font-size: 2em !important;
     }
   }​

   
   
   
3. • You also need to remove the "hidden-xs" from the outer container (sp_container, you may have done this already)
     https://YOURINSTANCE.service-now.com/sp_config?id=page_edit&p=index&table=sp_container&sys_id=be98a8...
   • You also need to remove the "visible-xs" class from the outer container of that additional "Typeahead Search" widget instance on the "index" page and add "hidden" class and deactivate the widget instance (or simply remove the sp_container altogether). See screenshot 2 below.

Screenshot 1 (remove "hidden-xs" from the Parent Class field)

Screenshot 2 (replace "visible-xs" with "hidden" in the Parent Class field)

Screenshot 3 (final result on mobile device)