Icon position shifts when using date picker between HTML <details> tags

[satraMark]

Hi.

I am using your excellent date picker (1.9.14) in a reporting interface for a very simple form to select a date range, using the bootstrap theme. Your work is much appreciated.

It works very well placed directly in the page, but if I place the form inside a HTML <details> element the icon display is badly positioned. This problem appears in Firefox, Chrome and Edge (latest versions).

I made a simple form with just a single date picker input so I could be reasonably sure nothing else was interfering with it, and I have attached an image to demonstrate, grabbed in Firefox, showing two identical forms with one inside a <details> element. No CSS is applied to the <details> element in the screenshot.

I tried to fix it with CSS, but the problem is caused by the top position specified in the style attribute on the button, which I can't override.

In page: <button type="button" class="Zebra_DatePicker_Icon Zebra_DatePicker_Icon_Inside" style="top: 6px; left: 235px;">Pick a date</button>

In <details>: <button type="button" class="Zebra_DatePicker_Icon Zebra_DatePicker_Icon_Inside" style="top: -2px; left: 235px;">Pick a date</button>

It seems to me that being inside the <details> element is messing with the calculation for icon positioning, but my js "skills" are not up to finding it and submitting a patch, sorry.

If you could find the time to take a look at this I'd be grateful.

[stefangabos]

One thing that comes to mind - as I am unable to test now - is setting something like

details .Zebra_DatePicker_Icon {
    margin-top: 5px 
}

other possible solution might be setting position: relative to details I will test some solutions later on today and see why this is happening and what is the optimal solution

[satraMark]

That works great (although I needed 8px to get it looking the same). Turns out my CSS skills are lacking too :/

Thank you very much indeed for your help!