locked
Load HTML page with Horizontal scroll in IFrame windows store apps

    Question

  •  I am using IFrame as control to load local HTML in Windows 8 apps using HTML/JavaScript.     

           <iframe id="IframeHor" src="split.html" style="background-color: white; ; left: -4px; top: 68px;"></iframe>
    Right now I am loading from my Solution explorer.
    It is looking good. My intention is to load with Horizontal scrolling(Disable vartical Scroll). I tried with changing Style properties like `overflow-y:scroll;` & `scrolling="yes" horizontalscrolling="no" verticalscrolling="yes" ` Here some of the properties are not working with WinJS library.

     So, any one help me to start on this. Thanks

    devendra

    Tuesday, October 15, 2013 1:36 PM

Answers

  • Hi GEVENDRAK,

    Yes, you are right, I create an iframe with 400px width, I firstly tried with www.microsoft.com and the page displayed without vertical scroll bar, but when using another page such as http://msdn.microsoft.com/en-US/windows/apps/, the scroll bar appears and seems to ignore the setting. You could also try these two links and find out what's the difference.

    I don't think there is any way to turn off the scrolling completely with the overflow property, not only in store app but also in your browser. But I noticed that you are using a local page, which provide a chance to disable vertical scroll bar by styling your page, like www.microsoft.com does.

    Iframe scrollbar might be an issue for HTML5, by setting "overflow-x:hidden;overflow-y:scroll;" might not solve your problem .

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.



    Wednesday, October 16, 2013 11:20 AM
    Moderator

All replies

  • Hi GDEVENDRAK,

    To enable Horizontal scrolling and to disable vertical scrolling, you could try following code:

    overflow-x:hidden;
    overflow-y:scroll;

    If the height of the page less than the height of the iframe, the scrollbar would not display, to enable it enforcement you could try following code

    overflow:scroll;

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, October 16, 2013 2:56 AM
    Moderator

  • @Jamles Hez



    I tried with 
    overflow-x:hidden;overflow-y:scroll;
     not working me. Can you check it.

    Thanks,

    devendra

    Wednesday, October 16, 2013 9:20 AM
  • Hi GEVENDRAK,

    Yes, you are right, I create an iframe with 400px width, I firstly tried with www.microsoft.com and the page displayed without vertical scroll bar, but when using another page such as http://msdn.microsoft.com/en-US/windows/apps/, the scroll bar appears and seems to ignore the setting. You could also try these two links and find out what's the difference.

    I don't think there is any way to turn off the scrolling completely with the overflow property, not only in store app but also in your browser. But I noticed that you are using a local page, which provide a chance to disable vertical scroll bar by styling your page, like www.microsoft.com does.

    Iframe scrollbar might be an issue for HTML5, by setting "overflow-x:hidden;overflow-y:scroll;" might not solve your problem .

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.



    Wednesday, October 16, 2013 11:20 AM
    Moderator
  • @Jamles Hez
    Hi
    It is looking fine while using local File. Right now I am out of that one. If I face anything wrong I will get back to You.
    Thanks for replies. 

    devendra

    Friday, October 18, 2013 1:21 PM