problems with overlap elements

Question

problems with overlap elements

Navigation

#1 by (0 votes)

0

I have a web page with a <select> of about 20 items and under it I have 6 or 7 <textbox> .

The fact is that, by default, the browser shows all <option> of <select> possible depending on the screen resolution and if you can not see all shows a horizontal scroll. If I leave it as is, when I display the <select> the <options> , they are above the textbox , which is normal, but if I do this:

    <!DOCTYPE html>
    <html>
    <head>
    <body>
	<div id="Contenedor_select1"  style="z-index:10; width:200px">
		<select id="select1" 
			onchange="this.size=1; this.blur();" 
			onblur="this.size=1;" 
			onfocus="this.size=6;" 
			style="width:200px; text-indent:0px; z-index:10;">
				<option  style="z-index:10" value="01" selected="">Opcion1</option>
				<option  style="z-index:10" value="02" selected="">Opcion2</option>
				<option  style="z-index:10" value="03" selected="">Opcion3</option>
				<option  style="z-index:10" value="04" selected="">Opcion4</option>
				<option  style="z-index:10" value="05" selected="">Opcion5</option>
				<option  style="z-index:10" value="06" selected="">Opcion6</option>
				<option  style="z-index:10" value="07" selected="">Opcion7</option>
				<option  style="z-index:10" value="08" selected="">Opcion8</option>
				<option  style="z-index:10" value="09" selected="">Opcion9</option>
				<option  style="z-index:10" value="10" selected="">Opcion10</option>
				<option  style="z-index:10" value="11" selected="">Opcion11</option>
				<option  style="z-index:10" value="12" selected="">Opcion12</option>
				<option  style="z-index:10" value="13" selected="">Opcion13</option>
				<option  style="z-index:10" value="14" selected="">Opcion14</option>
		</select>
	</div>

	<div  style="z-index:0">
		<div  style="z-index:0">
			Number Box:
		</div>
		<input 
			onfocus="Keyboard(this.id,0,3,null)" 
			style="width:150px; z-index:0" 
			value="0" 
			maxlength="3" 
			id="Nbox" 
			type="text">
	</div>
</body>
</head>
</html>

So that when the <option> are displayed, only 6 options are displayed and show the scroll for the rest, the <option> remain below the textbox and are not seen.

I tried to solve it with z-index , but there's no way.

Any idea why in doing this the <option> are below the textbox ?

html css

asked by Quarkbite 20.10.2017 в 08:18

source

1 answer

Get data from an array with LINQ Selecting data from the database with Mysql

score 0 · Accepted Answer

One solution could be to give height to <div> that contains <select> to move the rest of the elements down the height of it.

The <select> would have to be instructed to use an absolute position. When doing so, its size would no longer affect the size of the <div> that contains it and could go beyond the limits of it without causing overflow:

<div>
    <div>Number Box:</div>
    <input style="width: 150px;" value="0" maxlength="3" id="Nbox" type="text">
</div>
<div id="Contenedor_select1" style="width: 200px; height: 25px;">
    <select id="select1"
            onchange="this.size=1; this.blur();"
            onblur="this.size = 1;"
            onfocus="this.size = 6;"
            style="width: 200px; text-indent: 0px; position: absolute;">
        <option value="01" selected="">Opcion1</option>
        <option value="02" selected="">Opcion2</option>
        <option value="03" selected="">Opcion3</option>
        <option value="04" selected="">Opcion4</option>
        <option value="05" selected="">Opcion5</option>
        <option value="06" selected="">Opcion6</option>
        <option value="07" selected="">Opcion7</option>
        <option value="08" selected="">Opcion8</option>
        <option value="09" selected="">Opcion9</option>
        <option value="10" selected="">Opcion10</option>
        <option value="11" selected="">Opcion11</option>
        <option value="12" selected="">Opcion12</option>
        <option value="13" selected="">Opcion13</option>
        <option value="14" selected="">Opcion14</option>
    </select>
</div>

<div>
    <div>Number Box:</div>
    <input style="width: 150px;" value="0" maxlength="3" id="Nbox" type="text">
</div>
<div>
    <div>Number Box:</div>
    <input style="width: 150px;" value="0" maxlength="3" id="Nbox" type="text">
</div>
<div>
    <div>Number Box:</div>
    <input style="width: 150px;" value="0" maxlength="3" id="Nbox" type="text">
</div>
<div>
    <div>Number Box:</div>
    <input style="width: 150px;" value="0" maxlength="3" id="Nbox" type="text">
</div>

From the mozilla documentation :

absolute

Does not leave space for the element. Instead, it positions it at certain coordinates relative to the closest position of its parent element or the initial container block.