On iPhone by some means the enter sort="date" is behaving prefer it has a min-width property, when it does not.
In different phrases, it’s overflowing the mother or father container.
My total related code is the next:
* {
box-sizing: border-box;
}
:root {
--bg-color: #fdf6e3;
--text-color: #1f2933;
--accent-color: #d97706;
}
physique {
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: var(--bg-color);
shade: var(--text-color);
line-height: 1.6;
}
enter[type="text"], enter[type="date"] {
width: 100%;
padding: 0.5rem 0.6rem;
border-radius: 4px;
border: 1px stable #cbd2d9;
font-size: 0.95rem;
shade: var(--text-color);
background-color: #fff;
}
button[type="submit"] {
background-color: var(--accent-color);
shade: #fff;
border: none;
border-radius: 4px;
padding: 0.6rem 1.2rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease-in-out, rework 0.05s ease-in-out;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.form-control {
show: block;
}
.row {
width: 100%;
}
/* suggestion by mplungjan */
enter[type="date"] { show: block !vital; width: 100%; max-width: 100%; min-width: 0; }<div class="row">
<type onsubmit="occasion.preventDefault(); convertAndAnalyzeName();"><br/>
<label for="surname1">Családnév:</label>
<enter sort="textual content" id="surname1" class="form-control mb-3" placeholder="Pl: Nagy" aria-describedby="surname1Help">
<small id="surname1Help">Add meg a családneved.</small>
<br/>
<br/>
<label for="surname2">Második családnév:</label>
<enter sort="textual content" id="surname2" class="form-control mb-3" placeholder="Pl: Kovács" aria-describedby="surname2Help">
<small id="surname2Help">Add meg a második családneved, ha van ilyen.</small>
<br/>
<br/>
<label for="firstname1">Utónév:</label>
<enter sort="textual content" id="firstname1" class="form-control mb-3" placeholder="Pl: Dominik" aria-describedby="firstname1Help">
<small id="firstname1Help">Add meg az utóneved.</small>
<br/>
<br/>
<label for="firstname2">Második utónév:</label>
<enter sort="textual content" id="firstname2" class="form-control mb-3" placeholder="Pl: Olivér" aria-describedby="firstname2Help">
<small id="firstname2Help">Add meg a második utóneved, ha van ilyen.</small>
<br/>
<br/>
<label for="birthdate">Születési dátum:</label>
<enter sort="date" id="birthdate" class="form-control mb-3" aria-describedby="birthdateHelp" max="9999-12-31">
<small id="birthdateHelp">Add meg a születési dátumodat (év.hónap.nap).</small>
<br/>
<br/>
<button sort="submit" onclick="convertAndAnalyzeName()">Átalakít és Elemzés</button><br/>
<small>Az eredmény lentebb (lesz) olvasható.</small><br/><br/>
</type>
</div>The screenshot of what will be seen:
The suggestion of Copilot so as to add this:
@helps (-webkit-touch-callout: none) {
/* iOS-specific tweaks */
enter[type="date"] {
-webkit-appearance: none; /* Cut back native styling impression */
look: none;
}
}
just isn’t a viable answer, as a result of it will take away the date picker UI solely.
Neither does setting this work:
enter[type="date"] {
width: 100%; /* Responsive width */
max-width: 100%; /* Stop overflow */
}
I am utilizing (the newest) iOS 26.2 on Apple iPhone 13 mini.
What CSS can I apply, or what HTML do I want so as to add to repair this? Or there is a JavaScript answer?
On Android and on PC the enter in query is working correctly.
In case you want to see the precise web site in motion: https://www.szammisztika.org/
The screenshot after making use of the prompt CSS by mplungjan on incognito:
