On iPhone, for some purpose, the enter sort="date" is rendered in a different way than on PC and Android, and so it’s overflowing the mother or father container.
How can the code be modified to realize the same look to that on PC and Android?
My complete 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 strong #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 !necessary; 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 might 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; /* Scale back native styling influence */
look: none;
}
}
shouldn’t be a viable answer, as a result of it could take away the date picker UI fully.
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 would like 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 the event you want to see the precise web site in motion: https://www.szammisztika.org/
The screenshot after making use of the steered CSS by mplungjan on incognito:
Is there a solution to repair it with out utilizing Bootstrap?
The screenshot of the output of: https://jsfiddle.web/mplungjan/jypnrb0L/3/ might be seen under:
