none
Make Default Search Box Smaller

    Frage

  • Good morning!

    In Sharepoint 2013, the default web part for the Search Box is very tall and wide, but I'd like to style it to be shorter and more narrow like the size I see for the "find an item" search box at the top of a list.  How do I do this?

    Many thanks!

    Mittwoch, 16. Mai 2018 15:46

Alle Antworten

  • Good morning!

    In Sharepoint 2013, the default web part for the Search Box is very tall and wide, but I'd like to style it to be shorter and more narrow like the size I see for the "find an item" search box at the top of a list.  How do I do this?

    Many thanks!

    Mittwoch, 16. Mai 2018 15:02
  • Hello,

    Add CEWP or script editor webpart in the search box  page and include the below script.

    Find the id of your search box and replace it in the below script

    <style>
    #ctl00_ctl45_g_8d3c81ab_972c_4bd5_839f_bdc8c1a4707e_csr_sbox { /* Search Box */
        width:250px;
        height:30px;
    }
    </style>

    Please refer the below article for more details.

    http://www.geekmungus.co.uk/general-it/changesizeofsearchboxwebpart-sharepoint2013


    Ramakrishnan


    Please remember to mark the replies as answers if they helped.


    Mittwoch, 16. Mai 2018 16:14
  • Hello,

    Add CEWP or script editor webpart in the search box  page and include the below script.

    Find the id of your search box and replace it in the below script

    <style>
    #ctl00_ctl45_g_8d3c81ab_972c_4bd5_839f_bdc8c1a4707e_csr_sbox { /* Search Box */
        width:250px;
        height:30px;
    }
    </style>

    Please refer the below article for more details.

    http://www.geekmungus.co.uk/general-it/changesizeofsearchboxwebpart-sharepoint2013


    Ramakrishnan


    Please remember to mark the replies as answers if they helped.


    Ramakrishnan


    Please remember to mark the replies as answers if they helped.

    Mittwoch, 16. Mai 2018 16:15
  • Thank you, but this did not have any effect on my large search box.
    Mittwoch, 16. Mai 2018 16:53
  • Hi,

    Kindly cross check the id once again as it works for me.

    Also, i request you to mark the replies as answers if it helped you.


    Ramakrishnan


    Please remember to mark the replies as answers if they helped.

    Donnerstag, 17. Mai 2018 00:54
  • Hi,

    Can you provide some screenshots about how do you use the code provided by Ramakrishnan?

    Best regards,

    Allen Bai


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Donnerstag, 17. Mai 2018 03:12