1

I have draggable element which has dynamic height and width. It's change based on content.

I have this to center fixed element, here is HTML : 

<div class="option_dialog" id="profile">
  <div class="close_option">Profile <img onclick="document.getElementById('profile').style.display='none';body.style.overflow='auto'" style="float:right;height:20px" src="img/close.PNG">
  </div>
  <div class="dialog_content" id="profile_content" style="overflow:scroll;max-height:400px">
  </div>
  <button onclick="MyWall()" class="common_btn" style="width:98%">My Wall</button>
</div>

css :

.option_dialog {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  margin: auto;
  display: none;
  width: fit-content;
  height: fit-content;
  padding: 0;
  background: #e4e4e4;
}

.dialog_content {
  margin: 2px 2px 1px 1px;
  border: 2px solid #f5f5f3;
  border-radius: 0px;
  overflow: scroll;
  max-height: 350px;
}

js 

function profile() {
  var x = document.getElementById("profile");
  x.style.display = "block";
  x.style.zIndex = "1000";
  document.body.style.overflow = "hidden";
}

Draggable Code : *I'm using touchpunch to enable moving in touch devices!

$(function() {
  $(".option_dialog").draggable({
    handle: ".close_option",
    stack: ".option_dialog",
    distance: 0
  });
});

It's work fine in Desktop and Smart Phones but it's not centering in some mobile phones, in addition the width and height of it will fill the whole screen. I googled but found nothing for my problem.

halfer
  • 19,824
  • 17
  • 99
  • 186
Aqil
  • 104
  • 10
  • read this might be helpful [answer](https://stackoverflow.com/questions/31217268/center-div-on-the-middle-of-screen) – Adam May 13 '18 at 20:55
  • @Adam,the answer is exactly same as mine and as i said it's work in desktop but in some mobile views it's fill the whole screen – Aqil May 13 '18 at 20:59
  • 1
    @SirExotic: if you see a mistake in code in a question, it's best not to edit it out - point it out to the question author instead please. In some cases it may be the cause of the problem they are asking about. – halfer May 13 '18 at 21:55

0 Answers0