flex framework is throwing off fit-content and objects sizes

[dvodvo]

Context: Using Zurb foundation CSS framework in XY grid mode which has proved concise and useful.

However, using a browser emulation of mobile terminal (both Chromium and Firefox) the calendar goes off the deep end with

fit-content
Doing a modification to the CSS

.sdp-cal {
  max-width: fit-content;
==>
.sdp-cal {
  max-width: 100%;

now occupies reasonable space. But the dropdowns are now rendering EACH to full-width of div

with the size matching the emulated browser window width

The curiosity here is that there is both a class (that is not in the src file) AND a style whose value is set outside of my control (as I understand it) resulting in the year and forward-reverse buttons being thrown off the useful part of the page.

Note: I have also tried to exclude the div for the calendar entirely from the XY grid, but leading to the same result

With the style forced upon the tag, I cannot see how can this be overcome ?

[airblade]

The <select> element doesn't have any hard-coded width initially:

stimulus-datepicker/src/datepicker.js

Line 216 in b672a0d

<select class="sdp-month" data-datepicker-target="month" data-action="datepicker#redraw">

It's being set by the auto-resizing function:

stimulus-datepicker/src/datepicker.js

Lines 263 to 274 in b672a0d

	// Set select's width to the width of the selected option.
	autoSizeSelect(select) {
	const tempSelect = document.createElement('select')
	const tempOption = document.createElement('option')
	tempOption.textContent = select.options[select.selectedIndex].text
	tempSelect.style.cssText += 'visibility: hidden; position: fixed;'
	tempSelect.appendChild(tempOption)
	select.after(tempSelect)
	const tempSelectWidth = tempSelect.getBoundingClientRect().width
	select.style.width = `${tempSelectWidth}px`
	tempSelect.remove()
	}

By the way, which is the class that is not in the source file?

I don't quite follow the modification you made to the CSS to make the .sdp-cal layout work for you. Did you change the width property to max-width and/or did you change the value from fit-content to 100%?

That line is supposed to make the calendar shrink to fit its content. I'm not familiar with Zurb or its XY grid mode – why do you think fit-content isn't working here?

[dvodvo]

Sorry, that was not crystal clear. The width attribute was changed to max-width: 100%;.

With width: fit-content; it returned the same result as the first image.

None of .sdp-month, sdp-year, sdp-nav-buttons appear as classes in the source css file

[airblade]

Thanks for the clarification.

So max-width: 100% fixes the calendar width for you but doesn't help with the dropdowns' widths?

In order to fix this I'll have to try to reproduce it. Can you give me a JS fiddle which shows the problem please?

Those classes are in the HTML so that you can style them if you want.

[dvodvo]

"So max-width: 100% fixes the calendar width for you but doesn't help with the dropdowns' widths?"
That is correct. In fact, those three classes appear to inherit as the tag is being populated with a width, which happens to be of the viewport size. I sort of forced it upon those divs in the following manner

.sdp-month{
  max-width: 150px;
  display: flex;
}
.sdp-year{
  max-width: 80px;
  display: flex;
}
.sdp-nav-buttons
  max-width: 100px;
  display: flex;
}

but that goes and hits one of the issues you wrote about and closed previously (choosing the third option). It is also not 'clean'. Up to here everything is flex, so should this, yes?

Will write-up a jsfdille later, as lucidity is required with all the different parts...

[airblade]

Up to here everything is flex, so should this, yes?

Yes, that's what I'm aiming for.

Will write-up a jsfdille later, as lucidity is required with all the different parts...

Thanks!

[dvodvo]

I attempt a JS fiddle. https://jsfiddle.net/dvo4/wc786kq2/13/
However, the font awesome icons did not come out. (see line 439) and the link is not firing, even when I set it back to text 'Calendar'
Other stimulus controllers are also not firing, so I have failed to get a proper running jsfiddle... Doing with importmaps & all is above my pay grade ;-) ...

Would an HTML rendering of the exact page with the relative links changed to an ngrok.io address be pertinent for you?

[sorry, wrestling with multiple issues - do you prefer this in a separate posting?]
Also, line 442 attempts to set the date ranges, but I may be doing something wrong there / misreading the ReadME ...

<input data-datepicker-target="input" type="text" name="user[date_of_birth]" data-datepicker-min-value="1932-01-01" data-datepicker-max-value="2006-01-01"'"  />

years seem to default to +/- 10 from Date.today

From running application.

[airblade]

Thanks for the JS fiddle. I'll be able to take a proper look tomorrow.

You're right about the years: they range from 10 before the selected date to 10 after:

stimulus-datepicker/src/datepicker.js

Lines 444 to 445 in b672a0d

	const extent = 10
	for (let y = selected - extent; y <= selected + extent; y++) years.push(y)

It didn't occur to me to base them off the min and max dates – I have been using the date picker to select dates within the next few weeks, rather than many years ago. However I can see that it makes sense to derive the year range from the min and max dates if they are given.

[airblade]

Re the JS fiddle: I'm really after the starting HTML for your date input and a link to the Zurb CSS you're using.

[dvodvo]

date of birthwould end up being a deal-breaker for stimulus-datepicker.
Added issue: navigating years: pulldowns are increasingly excruciating the older one gets - in more ways than one!).
I have seen other slick instances where clicking on the year brings up a grid of 10 years, with arrows to navigate to a second grid of decades (groups of 10 years) => easy targets to hit & fast to reach.

in the js fiddle, the CSS is in its frame.
line 1 starts with the font-awesome classes
line 2389 starts the [data-controller="datepicker"] classes
immediately after
line 2593 start the foundation classes
/**

• Foundation for Sites
• Version 6.6.3