Scrolling div inside ModalView

2 posts, 0 answers
  1. Kelly
    Kelly avatar
    28 posts
    Member since:
    Oct 2012

    Posted 14 Jun 2013 Link to this post

    I have the following div on my page:
    <div data-role="modalview" id="MessageBeforeEnteringWebRes" style="padding:0.25em 1em 1em 1em;min-height:5em;max-height:20em;height:auto;">
            <div data-role="header" style="border-bottom:1px solid #ccc" class="marginbottom1"><span>@Model.CurrentContext.Club.ClubName</span></div>
            <div style="overflow:scroll; -webkit-overflow-scrolling:touch; max-height:8em;" class="marginbottom1">
                @MvcHtmlString.Create(Model.CurrentContext.Club.MessagesSettings.MessageBeforeEnteringWebRes)
            </div>
             
            @if (Model.CurrentContext.Club.MessagesSettings.AllowUserToDisableMessagesBeforeEnteringWebRes.ToString().ToLower() == "true")
            {
                <div id="UserEditDisableMessage" style="padding-left:0.5em;" class="marginbottom1">
                    <label for="DoNotDisplayMessage"><input type="checkbox" id="DoNotDisplayMessage" style="padding-right: 0.5em"/>Disable messages for future visits.</label>
                </div>
            }
             
            <div class="center marginbottom1"><input value="OK" id="btnDoNotDisplayMessage" onclick="onOKDoNotDisplayMessage()" class="button button1" type="button" style="width:5em"/></div>
        </div>
    Everything works fine except this scrolling piece (the created string contains paragraph tags but a generic string causes the same problem to occur):
    <div style="overflow:scroll; -webkit-overflow-scrolling:touch; max-height:8em;" class="marginbottom1">
                @MvcHtmlString.Create(Model.CurrentContext.Club.MessagesSettings.MessageBeforeEnteringWebRes)
    </div>


    The weird part is that I use similar code on a different page but in a template and that works fine. Is there something that the modalview does to prevent scrolling in this matter? I notice if I remove the max-height part on the scrolling div the whole modalview will scroll.
  2. Kelly
    Kelly avatar
    28 posts
    Member since:
    Oct 2012

    Posted 14 Jun 2013 Link to this post

    Nevermind, I was able to get this to work using the mobile scroller.
  3. Kendo UI is VS 2017 Ready
Back to Top