Another date selection option missing from the available choices

I stumbled upon this template: . I am facing an issue where the second div I added does not display the dates, months, and years when duplicated. Here's a snippet of the script:

<div class="form-date">
    <label for="birth_date" class="form-label">Date d'entrée</label>
    <div class="form-date-group">
        <div class="form-date-item">
            <select id="birth_month" name="birth_month"></select>
            <span class="text-input">MM</span>
        </div>
        <div class="form-date-item">
            <select id="birth_date" name="birth_date"></select>
            <span class="text-input">DD</span>
        </div>
        <div class="form-date-item">
            <select id="birth_year" name="birth_year"></select>
            <span class="text-input">YYYY</span>
        </div>
    </div>
</div>

Upon adding another div for the second date:

<div class="form-date">
    <label for="birth_date" class="form-label">Date de sortie</label>
    <div class="form-date-group">
        <div class="form-date-item">
            <select id="birth_month" name="birth_month"></select>
            <span class="text-input">MM</span>
        </div>
        <div class="form-date-item">
            <select id="birth_date" name="birth_date"></select>
            <span class="text-input">DD</span>
        </div>
        <div class="form-date-item">
            <select id="birth_year" name="birth_year"></select>
            <span class="text-input">YYYY</span>
        </div>
    </div>
</div>

I suspect it might be a CSS issue, but I'm unsure what changes I need to make in the CSS for this template. Any help would be appreciated.

Thank you in advance!

Answer №1

https://i.sstatic.net/GEUHU.png

If you are unable to view it, one possible explanation could be attributed to @Professor Abronsius. Additionally, as pointed out in a comment, the issue might be associated with the ids. In order to resolve this, consider multiplexing the form-data div to observe the desired output.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve an HTML form

I have designed an HTML form that submits data to addstuds.php for inserting records into a MySQL database. <form name="formcheck" method="post" action="addstuds.php"> <td width="30" height="35"><font size="3">*ID Number:</td> < ...

attempting to shift course, but finding no success

I'm attempting to include dir=rtl or direction: rtl in the CSS, but it doesn't seem to have any effect on the browser and the content still displays left to right. What steps can I take to fix this? This template is pre-made from Colorlib. It&ap ...

Card carousel rotation

Apologies for the vague title, I'm unsure how to properly label my issue. I have a section set up with cards, but I'm aiming to create something resembling a menu that functions like a carousel. Essentially, I want to include right and left arro ...

What is the best way to link the value of a mat-slider to an input field in a reactive form?

Is there a way to synchronize the min and max values of a ranged mat-slider with corresponding input fields? Currently, when I set numbers in the input fields, the slider updates correctly. However, when I use the slider to change the value of the input fi ...

How can I use Angular to automatically check a checkbox while a page is loading?

I have a list of checkboxes, and based on the selected checkbox, offers are displayed. Everything is working fine as expected. Below is the code snippet I have implemented: function Test1Controller($scope) { var serverData = ["Samsung Galaxy Note ...

Is there a way to keep the middle div at a fixed width while the left and right divs adjust their size as the screen gets smaller in a row with 3 divs?

Having 3 divs in a single row can be quite challenging. <div id="left"></div> <div id="middle"></div> <div id="right"></div> This layout requires the middle div to have a fixed width, while the left and right divs adju ...

Is using window.postMessage(...) a viable option for facilitating cross domain file uploads?

I'm wondering if there is a way to achieve cross domain file upload using window.postMessage(...) or any other technique. Can anyone help with this? ...

Incorporate a glyphicon into a webpage design that wasn't originally built with bootstrap while maintaining the original layout

Looking to jazz up my vintage website with some cool glyphicons on a specific page. Don't want to mess up the entire look of my site by installing bootstrap. Is there a way to add just the "glyphicons functionality" without changing everything else? ...

Floating with Bootstrap Utility

Have you ever wondered about the proper usage of bootstrap float utility? Check out this example: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class=" ...

Update the content of a div element without having to fetch an external file

I have a question regarding using JQuery with PHP and MySQL. Here's the situation: I have a div that displays a user's points, but the points change due to various actions on the website. I've come across many scripts that use external file ...

Is it necessary for nested Bootstrap 3 rows to be enclosed within a col-sm-*?

Is it necessary for nested Bootstrap 3 rows to be within a col-sm-* or can they also be nested within a col-md-, col-xs-, etc? The documentation specifies col-sm-* but does not clearly state if nesting within other col sizes is not allowed. http://getboo ...

Challenges arise when trying to load CSS on an EJS page in conjunction with using res.redirect()

When using Express with EJS, my base route is set as follows: router.get("/", productsData.getProducts); The "productsData" is sourced from my controllers page and the code snippet within that page is as follows: exports.getProducts = (req, res, next) => ...

What could be the reason for my jQuery script not functioning properly?

<script> var currentLevel = 0; $(document).ready(function(){ $("#tolevel_" + (currentLevel+1) ).click(function(){ $("#level_" + currentLevel).hide(500,'swing', function(){ $("#level ...

What strategies can flex-shrink use to triumph over padding in the battle for space

I am facing an issue with a flex-box tag cloud where the sizing is controlled from the outside. I need the tags inside to be collapsible all the way down to zero if necessary, but currently they only collapse up to 2 times their padding. https://i.sstatic ...

Having trouble adding Bootstrap to Angular with Webpack? You might come across the error message: "File to import not found or unreadable: ../bootstrap/sc

I have decided to incorporate Bootstrap into my project. My attempt at installation involved using "bootstrap": "^4.0.0-alpha.5" I followed a tutorial found at https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass- ...

The Angular overlay panel remains open consistently

I recently developed an Angular component similar to p-overlaypanel, but I'm facing an issue where it remains open for every item I click. What I actually want is for only one overlay panel to be clicked and shown at a time - if I click on another ove ...

Using a PHP variable to trigger the jQuery .show() function

I'm attempting to trigger jQuery .show() events based on PHP variables. Below is my PHP code (retrieved from a form submission on another page): $last_pic_displayed = trim($_POST["last_pic_displayed"]); if (strlen($last_pic_displayed) <= ...

Tips for creating unique Styles for H1, H2, and H3 with MaterialCSS by utilizing createTheme

In my application built with NextJS and styled with MaterialCSS, I have created two themes: a dark theme and a light theme using the following code: import { createTheme } from '@mui/material/styles'; export const darkTheme = createTheme({ pal ...

Retrieve the chosen option from a dropdown menu and transfer it to the submit button in PHP

I have a unique situation where I need to extract and store selected values from two separate drop-down menus generated from arrays. The goal is to pass these selected values in the submit button link. For example, if a user selects "123" for email and "t ...

Transmitting messages from a cross-domain iframe to the parent window

In my parent component, I am embedding an iframe from a different domain. The iframe contains a button that when clicked, I need to capture the event and pass it back to the parent component. I have experimented with using window.postMessage and window.ad ...