I have created a lightbox in my HTML page with the following structure:
<div id="container">
<input type="text" id="user_1" name="user_1" value="user_1"/><br>
<input type="text" id="user_2" name="user_2" value="user_2"/><br>
<input type="text" id="user_3" name="user_3" value="user_3"/><br>
<label onclick="add_input();"><img alt="add_other" src="add.png"></label>
</div>
When the image inside the lightbox is clicked, I want to add and display a new input field. To achieve this, I have written the following JavaScript function:
function add_input(){
var div = document.getElementById('container');
var input = '<input style="width:300px;" type="text" id="user" name="user" value=""/>'
div.innerHTML+= input;
}
Although the input field gets added upon clicking the image, it appears outside the lightbox because the CSS of #container has set height to auto. Is there a different approach that can be used to keep the input field within the lightbox?