Vertical scrollbar in popup always showing

GregoryBologna — Fri, 30 Jun 2023 14:04:13 GMT

Using Popup in version 4.27.

Is it possible to hide vertical scrollbar when nothing to scroll?

In 4.27 samples, vertical scrollbar and nothing to scroll.

Nothing to scroll here.

Same popup item above and no vertical scrollbar in 4.26

Re: Vertical scrollbar in popup always showing

LaurenBoyd — Fri, 30 Jun 2023 16:55:07 GMT

Hi @GregoryBologna -

Thanks for reporting this issue! We had fixed this issue at the 4.27 release but seems that the fix didn't work for Windows machines on Google Chrome and Edge. This issue isn't reproducing in Google Chrome, Firefox, and Safari on macOS nor in Firefox on Windows for me. Would you be able to try it out to confirm you're unable to see this issue with your application in Firefox?

We will work on fixing this for the next release. If you'd like to track the issue, feel free to open a Technical Support case to get a BUG number.

Re: Vertical scrollbar in popup always showing

GregoryBologna — Fri, 30 Jun 2023 18:23:43 GMT

Thanks. Sounds good. I did try on Safari mobile and Firefox win10 (barely get Firefox to load, thinking no longer supporting it, so bad)

https://developers.arcgis.com/javascript/latest/sample-code/popup-actions no vertical scroll either.

Re: Vertical scrollbar in popup always showing

JoelBennett — Fri, 07 Jul 2023 23:08:12 GMT

The problem occurs in the Calcite Panel component rendered on the popup, and the scrollbar appears as a result of the "content-wrapper" class, which is defined this way: .content-wrapper{overflow:auto}

I've found that adding a bottom padding of 3px to the class definition prevents the scrollbar from appearing unnecessarily. However, since the panel is rendered within a shadow DOM, altering its style is not a simple matter of just overriding the class definition within a style tag.

If you're using a local copy of the API, and loading modules via AMD, you can make the following change in esri/chunks/Panel.js:

Search for: .content-wrapper{overflow:auto}

Replace with: .content-wrapper{overflow:auto;padding-bottom:3px}

If that's not an option, a much uglier hack is to alter the style definition at runtime. Just add the following near where your application starts up:

require(["esri/chunks/panel"], (panel) => { Object.defineProperty(panel.Panel, "style", {get:function(){return "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3);--calcite-panel-footer-padding:0.5rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.container{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}.container[hidden]{display:none}.header{border-block-end:1px solid;z-index:var(--calcite-app-z-index-header);inline-size:100%;align-items:stretch;justify-content:flex-start;background-color:var(--calcite-ui-foreground-1);border-block-end-color:var(--calcite-ui-border-3);flex:0 0 auto}.action-bar-container{border-block-end:1px solid;z-index:var(--calcite-app-z-index-header);inline-size:100%;border-block-end-color:var(--calcite-ui-border-3)}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}.header-content .heading,.header-content .description{display:block;overflow-wrap:break-word;padding:0px}.header-content .heading{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}.header-actions--end{margin-inline-start:auto}.content-wrapper{overflow:auto;padding-bottom:3px}.content-height{block-size:100%}.content-container{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;background-color:var(--calcite-ui-background)}.footer{border-block-start:1px solid;display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);border-block-start-color:var(--calcite-ui-border-3);flex:0 0 auto;padding:var(--calcite-panel-footer-padding)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-app-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}[hidden]{display:none}";}}); });

(The only effective change is the inclusion of the text ";padding-bottom:3px").

topic Re: Vertical scrollbar in popup always showing in ArcGIS JavaScript Maps SDK Questions

Vertical scrollbar in popup always showing

Re: Vertical scrollbar in popup always showing

Re: Vertical scrollbar in popup always showing

Re: Vertical scrollbar in popup always showing