googlearchive / paper-dialog

A dialog à la Material Design
19 stars 16 forks source link

Scrolling inside of paper-dialog #11

Closed silenceisgolden closed 9 years ago

silenceisgolden commented 10 years ago

I have quite a large element that causes the paper-dialog to scroll, but the scroll hit area seems to be varied instead of scrolling anywhere on the element. My HTML looks like


<paper-dialog id="paperdialog" transition="paper-dialog-transition-bottom" heading="New Thing">
            <div class="scrollwrap" layout vertical>
                <paper-input label="Stuff" value="{{new.stuff}}" floatingLabel="true"></paper-input>
                <paper-input label="Stuff" value="{{new.stuff}}" floatingLabel="true"></paper-input>
                <paper-input label="Stuff" value="{{new.stuff}}" floatingLabel="true" style="padding-bottom: 400px;"></paper-input>
<!-- style added to force scroll on most screens -->
                <paper-input label="Sort" value="{{new.stuff}}" floatingLabel="true"></paper-input>
                <h4>Live</h4>
                <paper-radio-group selected="{{new.item}}" valueattr="label">
                    <paper-radio-button label="Yes"></paper-radio-button>
                    <paper-radio-button label="No"></paper-radio-button>
                </paper-radio-group>
                <h4>Category</h4>
                <paper-radio-group selected="{{new.item}}" valueattr="label">
                    <paper-radio-button label="Option"></paper-radio-button>
                    <paper-radio-button label="Option"></paper-radio-button>
                    <paper-radio-button label="Option"></paper-radio-button>
                    <paper-radio-button label="Option"></paper-radio-button>
                </paper-radio-group>
            </div>
            <paper-button affirmative label="Cancel"></paper-button>
            <paper-button affirmative label="Add" on-click="{{sendForm}}"></paper-button>
        </paper-dialog>

Content has been scrubbed but hopefully you all can get the picture. This layout ends up with some whitespace at the top right of the dialog, and when I mouse over that whitespace on my screen I cannot get the dialog to scroll.

Edit: clarity and grammar

sorvell commented 9 years ago

Can you explain what scrollwap is doing? That's not clear. A working test case would make this easier to understand if that's feasible.

silenceisgolden commented 9 years ago

Scrollwrap was to not allow the display:inline-block paper-inputs to float next to each other. However I've revisited the code and this seems to be working now, even with the custom CSS I need. Setting display:block in CSS seems to fix the floating in the same manner, which I think is a recent fix somewhere; when I created the issue it would force 100% width on the paper-inputs.

This can be closed, thanks for the response @sorvell.