Advanced positioning of Wijmo Dialog

Advanced positioning of Wijmo Dialog

Posted by: 05-boom-mopey on 31 August 2022, 3:27 pm EST

• 

  05-boom-mopey

  • Post Options:
  • Link
    Copy

  Posted 31 August 2022, 3:27 pm EST

  I am trying to position a Wijmo dialog in a central position, but I have an horizontal splitter in the middle of my page and this covers a part of my dialog.

  I am looking therefore to position the widget in the top center, let’s say on the upper central part of the page.

  For example I would like to do the following:

  Width: 40%
  
  Margin-left : 30%
  
  Margin-right: 30%
  
  Height: 300px
  
  Margin top: 20%
  
  How this is done with Wijmo? Is there any library which makes this task easier?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 1 September 2022, 4:56 pm EST

  Hi,

  You may use the below CSS to show the popup dialog at the top-center of page:

  
  .wj-popup{    position: absolute;    left: 0 !important;    top: 0 !important;    margin-top: 2%;    margin-left: 30%;    margin-right: 30%;    height: fit-content;    width: 40%;}
  
  

  You can also change it as per your requirements, just make sure to set the ‘left’ and ‘top’ properties to 0.

  You can also refer to the following sample for full implementation https://jscodemine.grapecity.com/share/z61d4_kSLE67pMa8usfNhg/

  Regards