Calendar re-sizing in navigationbar

[EricKParticipant]

Hello everyone,
Problem with calendar re sizing in height.
I have a calendar that is inside the content area of the first nav bar. and a datatable inside the second content area of the second bar.
Initially, everything work fine. When a date is selected the datatable files with information.
I added a popup window for viewing and editing the details of the datatable record. Works great.

Now the problem is when I open the popup window and then close it. I then select the first nav bar with the calendar in it. It shows half the height of the original calendar. The navigationbar is still showing the correct height in the content area. It seems like the calendar resized itself for no reason. If I change to a different month the calendar re sizes itself back the correct height.

I sent an example to support.

If anyone could help me with this it would be greatly appreciated.
Thanks
EricK

[EricKParticipant]

Additional comments.
I have discovered the size of the calendar is slightly higher, which produces a scroll bar in the content area.

How does the navigation bar handle content area as far as sizing. I assumed if you created the navigation bar with a specific height and filled the content area with a widget that is smaller the content area would not re-size.
So, apparently the navigation bar will re-size…….based on the size of the content.

Sorry this is so confusing…

[DimitarParticipant]

​Hello EricK,

Please try initializing the calendar (and data table) in the navigation bar’s initContent callback function. This is the correct way of initializing widgets in a navigation bar’s content. Here is a small example on the matter: http://jsfiddle.net/Dimitar_jQWidgets/upK7s/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[EricKParticipant]

Dimitar,

Thank you for your response.
I wanted to let you know that the problem was in the html of the navigation bar section.
Not sure why…..
Had this:

<div id='navigationbar'>
        <div><h4 style ="margin-top:2px; margin-bottom:2px;">Sales Calendar</h4></div>
       	<div id="calendar"></div>  <***************
       	<div><label id="act">Activity</label><input type="button" style="margin-left:20px" id="Add" value="Add" /></div>       	
      	<div id="events"></div>
 </div>

Changed it to:

<div id='navigationbar'>
	<div><h4 style ="margin-top:2px; margin-bottom:2px;">Sales Calendar</h4></div>
       	<div><div id="calendar"></div></div>
       	<div><label id="act">Activity</label><input type="button" style="margin-left:20px" id="Add" value="Add" /></div>       	
       	<div id="events"></div>
 </div>

This works correctly, but not sure why I had to add an extra <div> for the calendar.
By the way, if I add an extra <div> for the event. Then event table does not show.

Thanks,
Eric

[DimitarParticipant]

Hi Eric,

The reason is that you should put your widgets inside the content div and not initialize them from it. Otherwise, unexpected behaviour may follow.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts