search

fooloomanzoo / datetime-picker

A minimal picker for date and time for Polymer, that can use the native input
MIT License
78 stars 18 forks source link

styling/positioning issues with overlay #37

Closed jjarrell56 closed 6 years ago

jjarrell56 commented 6 years ago

two problems. 1) is that when the overlay drops over another element, the overlay isn't the topmost image. I see in the docs that there is an alwaysOnTop property but I can't seem to get it set, as Angular is name mangling the property names. I've tried alwaysontop, always-on-top, alwayson-top and always-ontop. Gear still showing through.

 <overlay-date-picker id="lodate" class="customDatePicker" [date]="params.lodate"
                       (date-changed)="params.lodate=$event.detail.value"
                       auto-confirm="true"
                       always-on-top="true"
  ></overlay-date-picker>

image

The other problem is how to move the overlay over when it is on the right side. I don't know what to do to set the right css properties in the shadow dom.

image

2) When

fooloomanzoo commented 6 years ago
jjarrell56 commented 6 years ago

1) I tried setting the z-index on both the underlying components (a low zindex) and on the overlay-date-picker (a high zindex). Same difference.

2) I don't have any other elements at this time that use the Iron-Overlay-Component.

On Fri, Feb 23, 2018 at 12:01 PM, fooloomanzoo notifications@github.com wrote:

-

problem 1: Is on the icon, that is shining through, by css a z-index set?

problem 2: Do you see the same problem with other elements that also depend on polymer's IronOverlayBehaviour https://github.com/PolymerElements/iron-overlay-behavior?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fooloomanzoo/datetime-picker/issues/37#issuecomment-368070830, or mute the thread https://github.com/notifications/unsubscribe-auth/AZCeb_yRQRuepxUoU63a_eE6wyu1g6HSks5tXu7zgaJpZM4SQAZ1 .

fooloomanzoo commented 6 years ago

the problem might be that the z-index is set on that icon-button at all, and you might have to unset it, because IronOverlayBehavior is working with that property. The other problems might be related to IronOverlayBehavior itself. One thing about the styling the ShadowDom: you won't be able to style it from outside, because that's the reason for having a ShadowDom. If I can reproduce your problem and know about how to fix it I let you know.

fooloomanzoo commented 6 years ago

@jjarrell56 In the newst version I made some changes on the iron-overlay-implementation. Could you please check, if this solves your problem? If it doesn't could please post an example how to recreate this issue?

jjarrell56 commented 6 years ago

I pulled down the latest code and

  1. Sliding the drop down to the left when picker is tight to the right side of the browser is working.
  2. I took the z-index off the gear and the problem still remains.
  3. I lost my custom styling. I'll go back to this.
  4. When you have two overlay-date-pickers close together there is a bit of awkwardness as the overlay from the first drop down, will be close to the 2nd date. I'll try some z stuff and see how it goes.

I would like to get this in your hands, i'm sure it'd be easier for you to diagnose. Simplest thing would be for you would be for me to open up my repo. It's not a big app and for this part, it's only the client part you'd need to see. Let me know if you'd just prefer a demo repo. I love the work your doing.

image

image

fooloomanzoo commented 6 years ago

The problem I have is that I can not reproduce the issue. And if it has something to do with IronOverlayBehaviour I can not fix it, because thats not my project. If you could make a jsfiddle or modify this codepen so that I could guess what is up, that could help.

jjarrell56 commented 6 years ago

I started to use the codepen, but I wasn't able to get the needed references to paper-icon-button and I wasn't able to figure it out right away.

I've got to take up a couple of other tasks but I will get back to this shortly.

Thank you for your help.

On Mon, Feb 26, 2018 at 8:59 PM, fooloomanzoo notifications@github.com wrote:

The problem I have is that I can not reproduce the issue

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fooloomanzoo/datetime-picker/issues/37#issuecomment-368719801, or mute the thread https://github.com/notifications/unsubscribe-auth/AZCeb7ECda7mKDjddrj3Uh8ZyNFfvdQCks5tY2GGgaJpZM4SQAZ1 .

fooloomanzoo commented 6 years ago

I made a small update to fix some sizing issues. In the codepen there are now paper-icon-buttons included, so it would be nice if try to find an example where the issue occures.

jjarrell56 commented 6 years ago

I can't get to this for a couple of days, but one of my colleagues exposed the client site at https://stg-portal.pcamerica.com

It doesn't have any database connected to it, so the app doesn't actually work but you can see what is happening, see pickers in top right. Depending on how wide your browser will affect if the date time drop down get's over a gear.

Maybe, looking at it in Chrome/Devtools can give you some insight.

I'll get back to the codepen as soon as I can.

On Wed, Feb 28, 2018 at 5:07 PM, fooloomanzoo notifications@github.com wrote:

I made a small update to fix some sizing issues. In the codepen https://codepen.io/fooloomanzoo/pen/RxqNOb there are now paper-icon-buttons included, so it would be nice if try to find an example where the issue occures.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fooloomanzoo/datetime-picker/issues/37#issuecomment-369400194, or mute the thread https://github.com/notifications/unsubscribe-auth/AZCeb6V3dEAQHwjaDBodWbnVEoTp2Q9Pks5tZc43gaJpZM4SQAZ1 .

fooloomanzoo commented 6 years ago

Hi, I could solve your problem by setting for one of the outer divs the z-index to 1:

image

It must have something to to that these divs are separating your title-area from the content-part and so relatively seen the layers are separated. paper-icon-button has by default an z-index set and maybe that is conflicting with the given z-index from the iron-overlay-behavior. You could do it like in the screenshot, but I would give the advice to rethink the layout itself, bring toolbar and content together and don't use so many divs as containers. You could use polymer's app-header-layout also with a scrolling region for your content? app-header-layou#scrolling-region And if you are using the flexbox-layout extensively that could slow down the performance drastically, especially if don't really use it what it is good for, to fit your content in another frame. Maybe that would also solve that issue and it would be cleaner, than setting to each layer the z-index.

The codepen is now updated, with a demo in an app-header-layout and plenty of paper-icon-buttons and datetime-pickers (modification of one of the demos of app-header-layout):

image

jjarrell56 commented 6 years ago

Thank you for the advice. I was able able to fix the problem related to the gear showing through.

Yes, I do use too many divs, but some of what you are seeing angular putting in even more divs. I have found that working with the flexbox I've had to use divs in some contexts to actually just to it to work.

I take it that your not an advocate of flexbox, what do you suggest as an alternative... CSS Grid? I've continued to work with flexbox because that's kind of what I know. I'm open minded. I'm a far better developer than designer.

On Thu, Mar 1, 2018 at 3:14 PM, fooloomanzoo notifications@github.com wrote:

Hi, I could solve your problem by setting for one of the outer divs the z-index to 1: [image: image] https://user-images.githubusercontent.com/9318952/36866362-5d3071bc-1d92-11e8-9880-de45cc40a623.png It must have something to to that these divs are separating your title-area from the content-part and so relatively seen the layers are separated. paper-icon-button has by default an z-index set and maybe that is conflicting with the given z-index from the iron-overlay-behavior. You could do it like in the screenshot, but I would give the advice to rethink the layout itself, bring toolbar and content together and don't use so many divs as containers. You could use polymer's app-header-layout also with a scrolling region for your content? app-header-layou#scrolling-region https://www.webcomponents.org/element/PolymerElements/app-layout/demo/app-header-layout/demo/scrolling-region.html And if you are using the flexbox-layout extensively that could slow down the performance drastically, especially if don't really use it what it is good for, to fit your content in another frame. Maybe that would also solve that issue and it would be cleaner, than setting to each layer the z-index.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fooloomanzoo/datetime-picker/issues/37#issuecomment-369716632, or mute the thread https://github.com/notifications/unsubscribe-auth/AZCeb8wjGJZKmi9y9P0kp7hxIuY4lguaks5taFaagaJpZM4SQAZ1 .

fooloomanzoo commented 6 years ago

flexbox is very good for styling. I just meant that the amount of nodes in a website can slow down your website. On your site you could achieve the same with far less containers. You also don't use the full advantages of flexbox, for example to make it responsable to the view width or the view height. You could achieve that by flex-wrap and taking advantage of flex-base. For a header of a node, sometimes positioning it absolutely could be easier than positioning it statically if you want to make the header stay above the content field. When you are already using polymer's app-layout you could have a look at the shop app how they realize a mostly compatible grid-layout in combination with toolbars and drawers and so on.