CODEWITHSUNDEEP
javascriptonsen-ui2
scatman
scatman

Reputation: 14555

Is there a way to create a scrollable dialog in onsen

Is there a way to create a scrollable dialog in onsen?

problematic code: https://codepen.io/anon/pen/pWaQwB

<ons-page>
  <ons-list>
    <ons-list-item tappable onclick="document.getElementById('dialog-1').show()">Simple dialog</ons-list-item>
      </ons-list>
</ons-page>

<ons-dialog id="dialog-1">
  <div style="text-align: center; padding: 10px;">
    <p>
      This is a dialog.
      <p>
        <p>
      This is a dialog.
      <p>
        <p>
      This is a dialog.
      <p>
        <p>
      This is a dialog.
      <p>
        <p>
      This is a dialog.
      <p>
        <p>
      This is a dialog.
      <p>
        <p>
      This is a dialog.
      <p>
        <p>
      This is a dialog.
      <p>
        <p>
      This is a dialog.
      <p>
        <p>
      This is a dialog.
      <p>
        <p>
          <ons-button onclick="document.getElementById('dialog-1').hide()">Close</ons-button>
        </p>
  </div>
</ons-dialog>

Upvotes: 2

Views: 460

Answers (1)

Charitha Goonewardena
Charitha Goonewardena

Reputation: 4724

What if you set a fixed height to the div and add overflow-y: auto ? For an instance, 

<div style="text-align: center; padding: 10px; overflow-y: auto; height: 200px;">
    <p>
        This is a dialog.
    </p>
    <p>
        whatever the content you want
    </p>
</div>

Upvotes: 1

Related Questions