Friday, March 8, 2019

paper-dialog-scrollable isn't scrolling

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:p='urn:import:com.vaadin.polymer.paper.widget'>

<div class="server horizontal center-justified layout">
<style>
.serverName {
padding-left: 20px;
font-size: 150%;
font-weight: normal;
}
.serverLeft {
}
.serverCenter {
width: 100%;
}
.serverRight {
}
.serverSpan {
display: inline-block;
width: 100%;
--shadow-elevation-16dp;
}
</style>
<div class="serverSpan">
<paper-icon-item>
<iron-icon icon="hardware:computer" item-icon="" class="serverLeft" />
<div class="serverRight">
<paper-icon-item>
<iron-icon icon="assessment" item-icon="" ui:field="serverAnalyze"/>
</paper-icon-item>
<paper-icon-item>
<iron-icon icon="apps" item-icon="" ui:field="serverApplications"/>
</paper-icon-item>
<paper-icon-item>
<iron-icon icon="file-upload" item-icon="" ui:field="serverLogUpload"/>
</paper-icon-item>
<paper-icon-item>
<iron-icon icon="more-horiz" item-icon="" ui:field="serverMore"/>
</paper-icon-item>
</div>
<div class="serverCenter">
<h4>
<span ui:field="serverName" class='serverName' />
</h4>
<paper-input ui:field="serverHostname" label="Hostname" readonly="true" />
<paper-input ui:field="serverDescription" label="Notes" readonly="true" />
<paper-input ui:field="serverFiles" label="File Location" readonly="true" />
</div>
</paper-icon-item>
</div>
<paper-dialog ui:field="editServerDialog"
entry-animation="fade-in-animation"
class="dialog" modal="">
<h2>Edit Server</h2>
<paper-input ui:field="serverNameInput" label="Name" required=""
auto-validate="" error-message="required input!"/>
<paper-input ui:field="serverHostInput" label="Hostname" required=""
auto-validate="" error-message="required input!"/>
<div class="textarea-container iron-autogrow-textarea">
<paper-textarea ui:field="descriptionInput" label="Notes"/>
</div>
<paper-input ui:field="serverFilesInput" label="File Location" required=""
auto-validate="" error-message="required input!"/>
<paper-dialog-scrollable>
<paper-input ui:field="serverNCpusInput" label="Number of CPUs" required=""
auto-validate="" error-message="required input!"/>
<paper-input ui:field="serverBenchmarkValueInput" label="Benchmark Value" required=""
auto-validate="" error-message="required input!"/>
<paper-input ui:field="serverBenchmarkInput" label="Benchmark Type" required=""
auto-validate="" error-message="required input!"/>
<paper-input ui:field="serverNDisksInput" label="Number of Disks" required=""
auto-validate="" error-message="required input!"/>
<paper-input ui:field="serverDiskPerformanceInput" label="Disk Performance" required=""
auto-validate="" error-message="required input!"/>
</paper-dialog-scrollable>

<div class="server-buttons">
<paper-button dialog-dismiss="">Cancel</paper-button>
<paper-button ui:field="confirmEditButton"
dialog-confirm="">OK</paper-button>
</div>
</paper-dialog>

<paper-dialog ui:field="errorDialog"
entry-animation="fade-in-animation"
class="dialog" modal="">
<h2>Service Error</h2>
<paper-input ui:field="errorMessage" label="Error" readonly="true" />

<div class="buttons">
<paper-button dialog-dismiss="">OK</paper-button>
</div>
</paper-dialog>
</div>
</ui:UiBinder>

Here's the scenario. I have a dialog with some information that looks fine. I want to add a lot more information to the dialog which will make it much too large to fit, so I put the extra information in a scrolling element. The problem is that the scrolling element doesn't scroll, and much of the dialog is inaccessible including the critical OK/Cancel inputs.

No scrolling:

no-scrollable.PNG


With scrolling:


scrollable.PNG



None of the examples I've been able to find show anything required to enable (or even control) scrolling, and there's nothing obvious to me in the code. I've tried everything I can think of with CSS with no useful results, but I'm hardly a CSS expert. The images shown use the stock CSS.

Binder file is attached.

Suggestions?

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment