Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    51
    Vote Rating
    2
    tyladurdan is on a distinguished road

      0  

    Default Youtube iFrame height bug when using sethtml

    Youtube iFrame height bug when using sethtml


    REQUIRED INFORMATIONExt version tested:
    • Sencha Touch 2.0.1
    Browser versions tested against:[LIST][*]Safari 5.1.1 Windows/Mac[*]Chrome 20.0.1132.57 m Windows/Mac[*]DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:
    • There is a bug in the setHtml method when dealing with Youtube videos in an iframe. The same method works corectly in Chrome,and it also works when setting a height for the iframe in pixels. When setting a height to 100% it works in Chrome but in Safari when you inspect the DOM it shows a height of 0.
    Steps to reproduce the problem:
    • Calling Youtube to display in a split view, with videos on the left hand side. When clicking an item it displays the video in the detail panel. It does this using the 'id' parameter for the video.
    The result that was expected:
    • Correct height of Youtube video
    The result that occurs instead:
    • Height of zero in Safari, but correct height in Chrome. Works if setting a fixed height in pixels like this:See attached pictures.
    Test Case:

    Not working:

    Code:
    onListDisclose: function(list, record, target, index, e, options) {
    var src = record.get('id');
    <iframe width="100%" height="100%" src="http://www.youtube.com/embed/'+src+'" frameborder="0" allowfullscreen></iframe>
    This is working:
    Code:
    onListDisclose: function(list, record, target, index, e, options) {
    var src = record.get('id');
    <iframe width="100%" height="500px" src="http://www.youtube.com/embed/'+src+'" frameborder="0" allowfullscreen></iframe>


    Possible fix:
    • set a height of the video in pixels instead of %
    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)
    Operating System:
    • ________
    • WinXP Pro
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Layouts are CSS based and setHtml just inserts the html into the DOM and does zero height calculation so this is due to your CSS and browser.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    51
    Vote Rating
    2
    tyladurdan is on a distinguished road

      0  

    Default Strange...

    Strange...


    Oh so perhaps a bug with Safari? The weird thing is it works when the splitview and setHtml is by itself in a container, and even when placed in a tabpanel (when setting the height to 100%). It stops working when I set the tabpanel inside a container and I have to set a fixed height......so it lead me to think it was Sencha Touch.

    Is this still a Safari bug?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I don't really think it's a safari bug, I think the styles on the parent are causing it to have a zero height.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread