Set maximum height and exact position of a button in a DIV on the page

Asked

Viewed 599 times

1

I would like to know how to put the red X button on top of the div

how are:

inserir a descrição da imagem aqui

how I want it to stay: inserir a descrição da imagem aqui

currently the class of my boot is like this:

position: absolute;
top: 9%;
right: 2%;

by putting this class:

top: -9%;
right: 2%;

width: 24px;
height: 24px;
background-color: #f00;
position: absolute;
z-index: 9;
border-radius: 10px;

happens this:

inserir a descrição da imagem aqui

CSS CODE:

.janela{


  margin-top: 1000px;
  margin-left: 40%;
  position:absolute; 
  max-height: 200px;
  min-width: 40%;
  z-index: 1;
  overflow-y: auto;
  background-color: rgba(190,190,190, 0.6);
  }

  .btnclose{

/*position: absolute;*/
top: -9%;
right: 2%;

width: 24px;
height: 24px;
background-color: #f00;
position: absolute;
z-index: 2;
border-radius: 10px;

}

HTML CODE 

<div class="col-md-5 col-md-offset-3 janela" id="divDataJson"></div>

CODIGO JS 

$('#divDataJson').append(
"<div class'row' id='btns"+i+"' style='margin-top: 10px; margin-bottom: 15px;' >" +
    "<div class='col-md-2'>"+
        "<button type='button' class='btn btn-primary thbtn' onclick='add(\""+retorno[i][0]+"\")'><b><span class='glyphicon glyphicon-plus-sign'></span></b></button>"+
        //"<button type='button' onclick='esconder(\"camada\","+numero_de_camadas+","+i+",\"btns"+i+"\",\"null\")' class='btn btn-success thbtn' ><b><span class='glyphicon glyphicon-chevron-down'></span></button></b>"+
    "</div>"+
    "<div class='col-md-10'style='text-align:left;' onclick='esconder(\"camada\","+numero_de_camadas+","+i+",\"btns"+i+"\",\"null\")'>"+
        "<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+
            "<img src='img/sistema3.png' width='26' height='26' />" +
            "<b> "+retorno[i][0]+" </b>"+
        "</p>"+
    "</div>"+
"</div>");
javascript html jquery css twitter-bootstrap
  • 1

    Try to put a maximum width to div in px even, if using the Bootstrap Col it will resize according to screen size. Post your full HTML / CSS code will look better to give you an accurate answer.

  • put position as Absolute and the height in px and it worked, now I want to put the boot x out of the div type up on the right side know how?

  • Julio Publish a Reply with Snippet, execute him and see if he answers you or if he has any questions. It does not use Bootstrap classes because pq has fixed sizes. I only used % to not let it pasted in the Browser window, but you can reset Right and Bottom in Css.

  • @hugocsl left as it was in your code and my button disappeared rsr I will post a photo to understand better

  • how is the html structure?

  • @Magichat only a div even if it is being filled with elements using the jQuery function. append() <button type='button' class='btn btn-Danger btnclose' title='close' onclick='escond_div("divDataJson")'>X</button>

  • Put the full code there, I think it is giving conflict between the CSS classes. put also the HTML structure. For now I’ve removed my answer.

  • good added hope it helps

Show 3 more comments

1 answer

1


You won’t be able to do it this way, because the div possesses overflow active (overflow: auto;). How the button is part of the div it will have to accompany the scroll inside the div because he owns position: absolute and stay hidden when you scroll or position it outside the div.

To get around this, you have to put this button outside the div with overflow: auto. The suggestion is to transfer the scroll and height max-height: 200px to the div with id #btns. So the button will stay fixed where you want, because it is not part of the scroll.

Behold:

$('#divDataJson').append("<button type='button' class='btn btn-danger btnclose' title='fechar' onclick='esconde_div(\"divDataJson\")'>X</button>")

$('#divDataJson').append(
"<div class'row' id='btns'>" +
    "<div class='col-md-2'>"+
        "<button type='button' class='btn btn-primary thbtn' onclick='add(\"dvd\")'><b><span class='glyphicon glyphicon-plus-sign'></span></b></button>"+
        //"<button type='button' onclick='esconder(\"camada\","+numero_de_camadas+","+i+",\"btns"+i+"\",\"null\")' class='btn btn-success thbtn' ><b><span class='glyphicon glyphicon-chevron-down'></span></button></b>"+
    "</div>"+
    "<div class='col-md-10'style='text-align:left;' onclick='esconder(\"camada\",\"dvd\",\"dvd\",\"btns\",\"null\")'>"+
        "<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+
            "<img src='img/sistema3.png' width='26' height='26' />" +
            "<b> dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br> </b>"+
        "</p>"+
    "</div>"+
"</div>");
.janela{


  margin-top: 1000px;
  margin-left: 40%;
  position:absolute; 
  max-height: 200px;
  min-width: 40%;
  z-index: 1;
  xoverflow-y: auto;
  background-color: rgba(190,190,190, 0.6);
  }

  .btnclose{

/*position: absolute;*/
top: -9%;
right: 2%;

width: 24px;
height: 24px;
background-color: #f00;
position: absolute;
z-index: 2;
border-radius: 10px;
}

#btns{
   overflow: auto;
   background: red;
   max-height: 200px;
   padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-5 col-md-offset-3 janela" id="divDataJson"></div>

Browser other questions tagged javascript html jquery css twitter-bootstrap

You are not signed in. Login or sign up in order to post.