Best Online Calendar

Support

Knowledge Base

Browse knowledge base categories or search with keyword related to your question.

Email Support

Can't find your answer?

Contact Support or Contact Sales
Search:     Advanced search
Browse by category:

How to Adjust the Search Widget Width

Article ID: 157
Last updated: 05 Jul, 2018

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="https://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="https://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
     
Others in this category
document Add a Mini Calendar to a Web Page
document Create more than one Upcoming Events List for a website
document Add an Upcoming Events List to your web page:
document Additional Customization Options for your Upcoming Events List:
document Add a Suggest Event form to a Web Page
document Create a Scrolling Upcoming Events List For A Web Page:
document Using Website Plugins In SharePoint 365
document How can I remove the Upcoming Events List scroll bar?
document Set Upcoming Events List "More..." Link or Header Link to Open in Same Window
document Create a "Featured Events" Upcoming Events List:
document Add Upcoming Events List by URL (without JavaScript)
document NEW FEATURE: Add images to your upcoming events list