How to resize the search box

[shaik_irfan]

Hi,

On the Service portal homepage we wnat to reduce the length of the type ahead widget

Can anyone please help me how to do this ?

[Harsh Vardhan]

update the transform value 

transform: translate(-50%, -30%);

[Shanice Mckenzi]

Hello, 

I am not seeing the .input-group. Is there another place to edit the width of this?

[Priyanka Chandr]

Hi,

you can try this in your widget.

<div id="homepage-search" class="hidden-xs wrapper-xl">
<div class="wrapper-xl" style="margin-top:10px">
<h1 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="options.title"></h1>
<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>
</div>

 you can set margin-top as per requirement

Please mark it correct and helpful.

Thanks,

[Rachel Gomez]

Steps are given below-

Right-click in any blank space in the task bar (or in the search box itself).

The active items have a check mark next to them—click the ones you don't want. You may have to repeat these steps for each one you want to remove/add. 

Next was the Search box.

Regards,

Rachel Gomez

[BiancaK]

hover over the widget and click control - right click 

then select Instance in Page Editor 

Select your cloned Homepage Search widget

Scroll down to CSS field 

Add:

.hidden-xs{
width: 600px;
}

Save 

NB: Set the pixels as per your requirement and the widget should appear smaller

See this thread as well - it advised on how to adjust the height, but I tweaked the CSS to adjust the width: https://www.servicenow.com/community/now-platform-forum/reduce-the-height-of-homepage-search-widget/...