CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Ali Zia
Ali Zia

Reputation: 3875

Div not positioning right according to my need

I have a button, on clicking it, a div appears that is hidden right below it. My issue is that the div is not scaling on large and small screens. The hidden div should be right below the image but it scatters along right and left.

This is my 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>

This is my 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;}

And this is my 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";
        }
    }
}

Also the MORE COLORS should appear at the bottom of div. Any help would be much appreciated. Please see the attached image.

enter image description here

You can check the LIVE SITE at here.

Upvotes: 0

Views: 84

Answers (3)

Krishna Rana
Krishna Rana

Reputation: 379

#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;
}

I have just added left:50%; and margin-left: -85px; It will work for you.

Upvotes: 1

Hajrullah islami
Hajrullah islami

Reputation: 411

If you want the color-picker box to be display right under the #colorbtn link. You should use 

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

#cel-screen on display:block getting full width of parent element

#cel-screen on display:inline-block getting only child element width + margin: 10px

I hope this answer will help you.

Upvotes: 1

Marcus Rommel
Marcus Rommel

Reputation: 1294

Try to remove the "position: absolute" from the #color-lib-x elements and add a margin-top of 5 or 10 pixels instead. This should center the color-lib-x elements under the image.

Upvotes: 0

Related Questions