how to align Type ahead Widget to center on Portal

Mrman · ‎02-04-2020

Hi,

I am a beginner in Service portal configuration .

Could you please let me know how can I move my Search box to the center of the homepage as pointed in the image below .

Below is the HTML from Widget :

<form ng-submit="c.submitSearch()">
  <input type="hidden" name="id" value="search"/>
  <input type="hidden" name="t" value="{{c.searchType}}"/>
  <div class="input-group input-group-{{::c.options.size}}">
    <!-- uses ui.bootstrap.typeahead -->
    <input ng-if="c.showSuggestions"
           name="q" type="text" placeholder="{{::c.options.title}}" ng-model="c.searchTerm"
           autocomplete="off"
           uib-typeahead="item as item.term for item in c.getSearchSuggestions($viewValue)"
           typeahead-wait-ms="250"
           typeahead-min-length="1"
           typeahead-focus-first="false"
           typeahead-on-select="c.onSelect($item, $model, $label)"
           typeahead-template-url="sp-typeahead.html"
           typeahead-popup-template-url="sp-typeahead-popup.html"
           class="form-control input-typeahead"
           role="textbox"
           aria-label="{{::c.options.title}}" tabindex="0" aria-haspopup="true">
    <input ng-if="!c.showSuggestions"
           name="q" type="text" placeholder="{{::c.options.title}}" ng-model="c.searchTerm"
           autocomplete="off"
           uib-typeahead="item as item.primary for item in c.getResults($viewValue)"
           typeahead-wait-ms="250"
           typeahead-min-length="2"
           typeahead-focus-first="false"
           typeahead-on-select="c.onSelect($item, $model, $label)"
           typeahead-template-url="sp-typeahead.html"
           typeahead-popup-template-url="sp-typeahead-popup.html"
           class="form-control input-typeahead"
           role="textbox"
           aria-label="{{::c.options.title}}" tabindex="0" aria-haspopup="true">
    <span class="input-group-btn">
      <button name="search" type="submit" class="btn btn-{{::c.options.color}}"
              title="{{::c.data.searchMsg}}" aria-label="{{::c.data.searchMsg}}">
    	<i ng-if="::c.options.glyph" class="fa fa-{{::c.options.glyph}}"></i>
      </button>
    </span>
  </div>
</form>
<div class="pull-right">
  </div>

Sandhya3 · ‎02-04-2020

Hi ramamr,

You can achieve this through "Designer".

Steps to follow

1. select "service portal configuration" and select "Designer"

2.After clicking "Designer" ,select the page that you want alter and you can make the configuration by simple drag and drop method.

If you find it helpful please do mark it as correct and helpful.

Thanks and Regards

S Sandhya

Sumanth16 · ‎02-04-2020

Hi ,

Open page designer in portal and add container and add widget in that container. Add Typehead serach and add it to container.

In container properties select below options;

I think you selected "Move to Header" checkbox.Disable that option and try it.

Please mark it as helpful (or) correct if it fixes your issue.

Thanks,

Sumanth