How to Adjust the Search Widget Width

You can adjust the width of the Search Widget by using some jQuery and a timeout function on your web page.  This approach will work for both the Tall and Wide Search Widget Layouts.  Here are the steps to adjust the width:
  1. Insert the Search Widget Code into your web page.  It will be in the following form - be sure to insert your unique calendar identifier into the link below:

    <script type="text/javascript" src="http://www.calendarwiz.com/cwsearch/cwsearch.js?crd=yourcalendaridentifier&srtheme=Master%20Theme"></script>

  2. If you do not already have jQuery loaded on your web page,  please insert the following code into the head of your web page:

    <!-- jQuery -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  3. Add the following javascript code to the bottom of your web page's <body> tag and adjust the '300px' to be your desired width:

    <script type="text/javascript">
    $(document).ready(function(){
        setTimeout(function(){$("[id^='cw_search_widget_']").css({'width' : '300px'});},1500);
    });
    </script>

  4. Depending on your desired width, you may need to adjust font sizes of the text fields, labels, etc via the Admin Menu -> Search Widget -> Form and Widget Tabs -> Save Changes



Article ID: 157
Last updated: 01 Oct, 2012
Revision: 1
Website Plugins -> How to Adjust the Search Widget Width
https://www.calendarwiz.com/knowledgebase/entry/157/