I am currently working on a project that involves creating multiple cards using Bootstrap. Each card consists of a header, body, and footer. When a card is clicked on, I want an input field to appear in the header, footer, and body sections, overlaying the current text content. Although I have successfully toggled the class, I am facing challenges in aligning the input fields over the text.
Below is the HTML structure:
`<div class='card-deck col-3' id='deck'>
<div class='card grow'>
<div class='card-header par'>
<h3 class='target'>${tasks.task}</h3>
<input id='updateTask' placeholder='Task'>
</div>
<div class='card-body par'>
<h6 class='target'>Due by: ${newDate}</h6>
<input id='updateDate' placeholder='Date'>
</div>
<div class='card-footer par'>
<h6 class='target'> Priority: ${tasks.priority}</h6>
<input class='update' id='updatePriority' placeholder='Priority'>
</div>
</div>
</div>`
Here is the JavaScript code used to toggle classes:
let card = $(this)
card.children('.par').children('.update').toggleClass('hidden');
card.children('.target').toggleClass('remove');
Lastly, here is my current CSS styling:
.par{
position: relative;
}
#updateTask, #updateDate, #updatePriority{
position: relative;
z-index: 999;
}
.hidden{
display: none;
z-index: -999;
}
In setting the 'par' class for each input and text set to relative positioning, I then positioned the input fields as absolute. Despite trying different combinations of positioning and restructuring divs, I have not been able to stack the input fields over their respective text successfully.
Unfortunately, the JSfiddle does not work due to my usage of bootstrap in this project.