Tengo un botón, al hacer clic en él, aparece un div que está oculto justo debajo de él. Mi problema es que el div no está escalando en pantallas grandes y pequeñas. El div oculto debe estar justo debajo de la imagen, pero se dispersa a derecha e izquierda.

Este es mi HTML

<div class="col-lg-4">
    <div id="cel-screen"> <a href="javascript:void(0)" onclick="showhide()" id="colorbt"><img src="images/colors.png" height="50" width="100" /></a>
      <div id="color-lib-1">
        <div class="row" style="margin: 5px 0 5px 0;">BASIC</div>
        <div class="col-sm-12" style="text-align:center !important;">
        <div class="pick col-sm-4" style="background-color:rgb(150, 0, 0);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(0, 0, 152);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(0, 151, 0);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(255, 0, 5);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(255, 255, 0);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(0, 255, 255);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(255, 0, 255);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(255, 150, 0);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(255, 0, 150);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(0, 255, 150);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(150, 0, 255);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(0, 150, 255);" onclick="hello(this.style.backgroundColor,1);"></div>
        </div>
        <div class="col-sm-12"><a href="javascript:void(0)" onclick="call5()"><img src="images/previous.png" width="20" height="20" /></a>&nbsp;More Colors&nbsp;<a href="javascript:void(0)" onclick="call2()"><img src="images/next.png" width="20" height="20" /></a></div>
      </div>
</div>

Este es mi CSS

#cel-screen {height:50px; position:relative; float:right;}
#colorbt {position:relative; bottom:0; right:0; margin:10px;}
#color-lib-1 {background-color:white;width:165px; height:300px; top:55px; display:none;border:1px solid black;position:absolute;}

Y este es mi Javascript

function showhide() {
    if (pressed == 0){
        document.getElementById('color-lib-1').style.display = "block";
        pressed = 1;
    } else if (pressed==1){
        if (document.getElementById('color-lib-1').style.display == "none"){
            document.getElementById('color-lib-1').style.display = "block";
        } else {
            document.getElementById('color-lib-1').style.display = "none";
        }
    }
}

También los MÁS COLORES deberían aparecer en la parte inferior de div. Cualquier ayuda sería muy apreciada. Por favor, vea la imagen adjunta.

enter image description here

Puede consultar el SITIO EN VIVO en aquí.

0
Ali Zia 11 may. 2016 a las 10:26

3 respuestas

La mejor respuesta
#color-lib-1 {
background-color: white;
width: 165px;
height: auto;
top: 55px;
display: none;
border: 1px solid black;
position: absolute;
left: 50%;
margin-left: -85px;
}

Acabo de agregar a la izquierda: 50%; y margen izquierdo: -85px; Funcionará para ti.

1
Krishna Rana 11 may. 2016 a las 09:41

Intente eliminar la "posición: absoluta" de los elementos # color-lib-x y agregue un margen superior de 5 o 10 píxeles en su lugar. Esto debería centrar los elementos color-lib-x debajo de la imagen.

0
Marcus Rommel 11 may. 2016 a las 08:04

Si desea que el cuadro del selector de color se muestre justo debajo del enlace #colorbtn. Deberías usar

#cel-screen{
    display:inline-block;
}
#colorbt{
    margin:0px;
}

# cel-screen en la pantalla: el bloque obtiene el ancho completo del elemento padre

# cel-screen en la pantalla: bloque en línea obteniendo solo el ancho del elemento hijo + margen: 10px

Espero que esta respuesta te ayude.

0
Hajrullah islami 11 may. 2016 a las 09:03