Fine tuning CF7 for Iphone – IOS

When I use the code the field is smaller. Not quit visible.

Ismael, I had a chat with Chatgpt and we came up with this code.

// Voegt een custom calender icoon aan een data veld
 function ava_custom_calendar_icon_script() {
    ?>
    <style>
        .custom-date-wrapper {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .custom-date-wrapper input[type="date"] {
            width: 100%;
            padding-right: 40px; /* ruimte voor het icoon */
            position: relative;
            z-index: 2;
            background-color: #fff;
        }

        .custom-date-wrapper::after {
            content: "📅";
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            font-size: 20px;
            color: #888;
            z-index: 3;
        }
    </style>

    <script>
        function addCalendarIconToDateInputs(context = document) {
            context.querySelectorAll('input[type="date"]:not(.calendar-styled)').forEach(function (input) {
                if (input.closest('.custom-date-wrapper')) return;

                var wrapper = document.createElement('span');
                wrapper.className = 'custom-date-wrapper';

                input.classList.add('calendar-styled');

                input.parentNode.insertBefore(wrapper, input);
                wrapper.appendChild(input);
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            addCalendarIconToDateInputs();

            // Contact Form 7 AJAX support
            document.addEventListener('wpcf7invalid', function (event) {
                addCalendarIconToDateInputs(event.target);
            });
            document.addEventListener('wpcf7submit', function (event) {
                addCalendarIconToDateInputs(event.target);
            });

            // Extra: hoogte instellen voor mobile
            if (window.matchMedia("(max-width: 768px)").matches) {
                document.querySelectorAll('input[type="date"]').forEach(function(input) {
                    input.style.height = '40px';
                    input.style.lineHeight = '40px'; // mooi gecentreerd
                });
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_calendar_icon_script', 9999); 

For now the height is the same as my other fields, and I have a calendar icon on my iphone.
The width of the field doens’t seem adapable.

• This reply was modified 1 week, 6 days ago by Chris mssn.

Ismael,
I tested it on my pc and on my iphone. And the message came through.
I tried adjusting the width but the the iphone is very stubborn.
Well , it can’t be all perfect.

Thanks for your help.

Kind regards
Chris

• This reply was modified 1 week, 5 days ago by Chris mssn.

Thanks for helping out.
You can close this thread.

Kind regards,

Chris