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:
- 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>
- 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>
- 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>
- 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