CODEWITHSUNDEEP
javascripthtmlcss
Isaac Levin
Isaac Levin

Reputation: 21

Stack Input fields on top of eachother

I have two input fields (a textbox and select) that I would like to get stacked on top of eachother. In my js, I will check the value of something and set on the of the elements style to hidden. When I use the following code, the select and textbox are both completely visible (this is before I mark one as hidden). Is there a CSS property that I can set to make them be directly on top of eachother, so that when one is hidden, it seems like only one is there. Thanks for the help.

<div>
   <div id="agencyAccountDropDownDiv">
     <select id="AgencyAccountSelect">
     </select>
    </div>
    <div id="agencyAccountInputDiv">
     <input id="Text1" type="text" />
    </div>
</div>

Upvotes: 1

Views: 4102

Answers (4)

hitautodestruct
hitautodestruct

Reputation: 20820

What your looking for is a stacking technique.

1) Make your container div relatively positioned: #agencyAccountDropDownDiv{position:relative;}

This is so the containing div's stay positioned absolutely according to their container.

2) Next give both your input containing div's a position of absolute:

#agencyAccountDropDownDiv, #agencyAccountInputDiv{position:absolute;}

The above means that the browser will stack the div's like a pile of cards.

3) Hide and show the div's you want using javascript.

var div1 = document.getElementById('agencyAccountDropDownDiv');
var div2 = document.getElementById('agencyAccountInputDiv');
div1.style.display = 'block';
div2.style.display = 'none';

Or as g.d.d.c mentioned, with jquery:

$("#agencyAccountDropDownDiv").show();
$("#agencyAccountInputDiv").hide();

Upvotes: 1

epascarello
epascarello

Reputation: 207501

The basic idea:

<div style="position:relative">
    <select style="width:150px" onchange="document.getElementById('aaa').value = this.options[this.selectedIndex].text">
        <option>hey hey hey hey 1</option>
        <option>hey hey hey hey 2</option>
        <option>hey hey hey hey 3</option>
    </select>
    <input id="aaa" type="text" style="position:absolute;left:0px;width:132px;border-right:0px;">
</div>

Probably better ways of doing it

Upvotes: 0

g.d.d.c
g.d.d.c

Reputation: 47988

You can position them in the same place using css like this:

#agencyAccountDropDownDiv, #agencyAccountInputDiv { position: fixed; top: 10; left: 10; }

That's going to fix them relative to the window. You'll want to look into the DOM Box Model and Absolute vs. Relative Positioning for other approaches. Generally though, what you probably want is something that will Show or Hide the container div dynamically. jQuery would make that extremely easy:

$('#agencyAccountDropDownDiv').show()
$('#agencyAccountDropDownDiv').hide()

When one or the other is shown or hidden it will be removed from the flow, allowing both of them to 'take up the same space'.

Upvotes: 0

Jhong
Jhong

Reputation: 2752

The way to do it is set the first (background) element to be absolutely positioned. This will stop it from taking up space, and the following element will appear on top of it.

In this case, it is

#agencyAccountDropDownDiv {
    position: absolute;
}

BTW you don't need the divs for this simple example. You could position the select directly.

Upvotes: 0

Related Questions