We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Calculation Difference between FF and Chrome


When making a calendar with fixed height item boxes, there seems to be a difference in the calculation for FireFox browser vs the Chrome Browser. 

The FF Browser seems to come up with a height that is 10px too short as far as the template is concerned.

Using this template for the appointment the height of the boxes is set to 75px. In chrome that makes the holding container 75px, but in FF it makes the holding container 65px which cuts off the bottom part of the box. If you need more data please let me know and I can upload more of the scripts data. Or I can send screen shots if needed.  Thanks

<script id="apptTemplate" type="text/x-jsrender">
{{if published === 'Y'}}
<div style="width=100%; height:75px !important; padding:3px; border-top: 4px solid #4fd647; color:{{>appointtextcolor}}; background:{{>appointbackcolor}};">
{{else}}
<div style="width:100%; height:75px !important; padding:3px; border-top: 4px solid #cc4542; color:{{>appointtextcolor}}; background:{{>appointbackcolor}};">
{{/if}}
{{if called === 'Y'}}
<div class="apptCallYN text-green ttip" title="Called on {{:calldate}} by {{:callby}}"><i class="icon icon-phone2"></i></div>
{{else}}
<div class="apptCallYN text-red ttip" title="Not Called"><i class="icon icon-phone-slash"></i></div>
{{/if}}
<div class="apptListName">
{{:schname}}<br/>({{>enroll}})
{{if schcode}}({{>schcode}}-{{>evtcode}}){{/if}}<br/>
{{if evtimg !== ''}}<img class="apptEVTImg ttip" src="{{:evtimg}}" alt="" title="{{:evttyp}}"/>{{/if}}
{{if idinfo !== '' && idinfo !== 'NONE'}}<i class="icon icon-price-tag2 ttip" title="{{:idinfo}}"></i>{{/if}}
{{if grps !== 'N'}}<i class="icon icon-users ttip" title="{{:grpinfo}}"></i>{{/if}}
</div>
{{if confirmed === 'Y'}}
<div class="apptConfYN text-green ttip" title="Confirmed on {{:confdate}} by {{:confby}}"><i class="icon icon-thumbs-up3"></i></div>
{{else}}
<div class="apptConfYN text-red ttip" title="Not Confirmed"><i class="icon icon-thumbs-down3"></i></div>
{{/if}}
</div>
</script>

3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team August 3, 2017 10:44 AM UTC

Hi David,  
 
Thank you for contacting Syncfusion support. 
 
We have checked the below appointment template sample and height is same in both the browsers. We request you to try to reproduce the error in a sample and revert it back to us. Or else you can share your code example/runnable sample (if possible)/image/video demo of the issue to proceed further.   
 
Regards, 
Karthigeyan 




DB David Barrett August 4, 2017 12:04 AM UTC

Ill have to try and work up a way for you to get to a test calendar of mine so you can see it. Mine are built so differently from yours and data is loaded through a promise so its hard to try and replicate on your playground. Seeing as I can easily get around it, its not a big issue but if I can get something built for testing I will reply again. 


Thanks for looking into it



KK Karthigeyan Krishnamurthi Syncfusion Team August 4, 2017 06:44 AM UTC

Hi David, 
 
Thanks for your update. 
 
We will way to hear from you. 
 
Regards, 
Karthigeyan 




Loader.
Live Chat Icon For mobile
Up arrow icon