Calculation Difference between FF and Chrome

[David Barrett]

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>

[Karthigeyan Krishnamurthi]

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.   

http://jsplayground.syncfusion.com/fr3pbedk 

 

Regards, 

Karthigeyan 

[David Barrett]

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

[Karthigeyan Krishnamurthi]

Hi David, 

 

Thanks for your update. 

 

We will way to hear from you. 

 

Regards, 

Karthigeyan