Is there a way to adjust the positioning of this dialog element?

Question

Is there a way to adjust the positioning of this dialog element?

I'm having trouble repositioning and resizing a dialog box. I attempted to use the style tag, but it didn't have any effect. I want to permanently move it to a specific location.

The dialog box always opens in the same position, but I need to change its location and size. I tried using

style=" position:absolute; top/right"

without success. My goal is to have it open in the top right corner with a different size. How can I achieve this?

(function() {  
    var dialog = document.getElementById('arbeitsauftrag-window');  
    document.getElementById('arbeitsauftrag').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('arbeitsauftrag-exit').onclick = function() {  
        dialog.close();  
    };  
})();

<dialog id="arbeitsauftrag-window" style="position:absolute; top:5px; left:5px;">  
    <button id="arbeitsauftrag-exit">Close Window</button> 
</dialog>
<button id="arbeitsauftrag">Open Dialog Box</button>

javascript html css

Answer 1

Answer №1

    #arbeitsauftrag-window{
  position:absolute;
  left:1500px;
  right:0px;
  background:grey;
}

Check out the CodePen demo here: http://codepen.io/nagasai/pen/pbEdME

Answer 2

    #arbeitsauftrag-window{
  position:absolute;
  left:1500px;
  right:0px;
  background:grey;
}

Check out the CodePen demo here: http://codepen.io/nagasai/pen/pbEdME

Answer 3

Answer №2

If you want to change the size of a button, you can add additional padding around it by specifying the padding CSS property on either the dialog or the button itself. To set the initial position of the dialog box, use the code snippet below:

$( ".selector" ).dialog( "option", "position", [350,100] );

Answer 4

If you want to change the size of a button, you can add additional padding around it by specifying the padding CSS property on either the dialog or the button itself. To set the initial position of the dialog box, use the code snippet below:

$( ".selector" ).dialog( "option", "position", [350,100] );

Answer 5

Answer №3

To solve the issue, make sure to specify left: auto;

(function() {  
    var dialog = document.getElementById('arbeitsauftrag-window');  
    document.getElementById('arbeitsauftrag').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('arbeitsauftrag-exit').onclick = function() {  
        dialog.close();  
    };  
})();

<dialog id="arbeitsauftrag-window" style="position:absolute; top:5px; right:0; left: auto; height : 200px;width : 200px;">  
    <button id="arbeitsauftrag-exit">Close Window</button> 
</dialog>
<button id="arbeitsauftrag">Open Dialog</button>

Answer 6

To solve the issue, make sure to specify left: auto;

(function() {  
    var dialog = document.getElementById('arbeitsauftrag-window');  
    document.getElementById('arbeitsauftrag').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('arbeitsauftrag-exit').onclick = function() {  
        dialog.close();  
    };  
})();

<dialog id="arbeitsauftrag-window" style="position:absolute; top:5px; right:0; left: auto; height : 200px;width : 200px;">  
    <button id="arbeitsauftrag-exit">Close Window</button> 
</dialog>
<button id="arbeitsauftrag">Open Dialog</button>

Is there a way to adjust the positioning of this dialog element?

Answer №1

Answer №2

Answer №3

Similar questions

Azure-Graph is reporting an error: 'Invalid or missing Access Token.'

Creating a Component and Programmatically Returning a Value in Vue.js: A Step-by-Step Guide

Modifying one input can impact other input elements without any form of direct connection between them

Matter of Representing Nested For Loops in Javascript Arrays

What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

Look for and choose various fields from a lengthy JSON object

Creating a protected pathway using postMessage within an IFRAME for secure communication

I am facing difficulties in installing the necessary node modules for my Angular project

Converting a JavaScript string into an array or dictionary

Ensuring the accuracy of user input

Styling a scrollbar with CSS3 for a container

Steps for successfully passing an object in a dynamically generated function invocation

What is the best way to showcase the properties of multiple files with the help of

Listen for changes in the clientWidth of an element in Vue 3

Ways to regain control of the iframe window once a popup has been launched

I aim to retrieve the names of all directories

Could you please explain the specific distinctions between pipe and map within Angular 7?

I am struggling to get the pop-up to close using the current code. I suspect that the issue might be related to the variable I was previously using in WordPress. I have made changes but the pop-up

Struggle arising from the clash between a customized image service and the built-in image element

Using Dynamic Jinja HTML to Select Elements Dynamically