Support fluid / responsive layouts (avoid hardcoded widths and heights)

[kwando]

I really do like this plugin, and it works like a charm! I use it do display a inline calendar with the always_visible option.

The hardcoded heights and widths combined with a responsive layout does not work that great when resizing a browser window though =/ I have to refresh the browser for it to recalculate the widths/heights. I know there is a update method, but I do not wanna resort to window.resize or use some black magic to watch mediaqueries.

[blessanm86]

👍 If we have our input field hidden with display:none, the icon position is not correct and I will have to call update to recalculate. It would be good if the icon position was a css solution.

[jeffisowens]

I'm running into this same issue. I would love to be able to set the width of the calendar to a percentage or even to just have an option to let it fill its container.

[LukeMcLachlan]

have you tried making the width a percentage? I have a fixed width of 200px and it works great.

[jeffisowens]

You mean within the js code? Because if I set it via CSS, the js overrides
it.

On Tue, Jun 30, 2015 at 6:15 AM Luke McLachlan notifications@github.com
wrote:

have you tried making the width a percentage? I have a fixed width of
200px and it works great.

—
Reply to this email directly or view it on GitHub
#19 (comment)
.

[imranzahid01]

Just my 2 cents
I am using Bootstrap4 and if my date-field is hidden then I am having the above issue. What I did was after initialization I remove the calculated width like:

$('.datepicker').Zebra_DatePicker({
  format: 'M d, Y',
  show_week_number: 'Wk'
});
$('.Zebra_DatePicker_Icon_Wrapper').each(function() {
  $(this).css('width', '');
});

[ppazos]

Just found this issue, I have a container div that is hidden by default then it's shown and contains some pickers, the pickers container span has width: 0px on it making it's width and the calendar icon to be broken.

With @imranzahid01 solution:

[stefangabos]

the fix from @imranzahid01 made its way into the plugin's code - thank you!