Customising the search widget position in a SharePoint 2016 custom master page

Iron Contributor

Hi

 

In a custom master .apsx  page; without a nice HTML  shadow design page,  I have re-added the search dropdown widget.  At runtime this control gets a load of extra markup which you can't really style when editing the master page in designer:

 

search widget.png

 

I want this to 'float" to the right of the top menu and one option, it to  to just  inject a few additional  CSS class declarations  at page render time.  The full set is shown here:

 

div class=”ms-srch-sb  ms-floatRight ms-verticalAlignTop ms-srch-sb-border

 

So rather than do this with  jquery

document.getElementById('idOfElement').classList.add('newClassName');

 

I wondered if I couldm't use a script action via one othe PnP commandlets. Even this works, I am convinced that must be a better way given   humungous ID attribute  shown above looks autogenerated by SharePoint.

 

 

 

 

 

0 Replies