jsPanel.dialog not respecting panelSize option

[syonfox]

Describe the bug A clear and concise description of what the bug is.

                // use math to mak sure theres enou space even if buttons are tall
        let w = bs.getGoodWidth(300);
        let a = 300*200; // a = w * h; h = a/w
        let h = Math.min(window.innerHeight * 0.95, a / w)
        let result

        //copy bellow this line into https://jspanel.de/#extensions/dialog

        //tiny width screen i still want to work :)
        w = 100
        h = 300

        result = await jsPanel.dialog.alert(
            // param html
            'You are about to exit! Continue?',
            // param buttons
            [
                {label: 'Yes!! Dont Ask.', value: 'ALWAYS', css: 'px-1 py-1 bg-secondary btn-sm '},
                {label: 'Yes Close', value: 'YES', css: 'px-4 py-2 bg-gray-100 bg-danger'},
                {label: 'No Take Me back', value: 'NO', css: 'px-4 py-2 bg-info'},

            ],
            // param options
            {
                theme: 'bg-secondary filleddark',
                border: '1px solid bg-info',
                borderRadius: '.5rem',

                panelSize: {
                    width: w,
                    height: h
                },
                callback: panel=>{

                    window.px = panel
                    console.log(px.options.panelSize)
                }
            }
        );

       


 //later see the var for your self

console.log(px.options.panelSize)
px.options.panelSize

px.resize(px.options.panelSize); // only modifies height

To Reproduce Copy the code into the browser.

then check the size, or use debug tools to use a responsivly small browser

Expected behavior A clear and concise description of what you expected to happen. alert should respect explicit size request, it should also allow small sizes with a large list of buttons (3) and use grid or flex or some fancy css to allow warping of buttons onto multiple lines based on space available.

it might be nice to detect size of window and make default correspondingly good like the equation above.

some work on fix/ workaround

<style>


    .jsPanel-dialog {
        /*min-width: 400px;*/
        max-width: calc(90vw - 50px);
        margin-top: 50px;
        max-height: calc(90vh - 50px);
    }

    .buttonbar {
        display: flex;

    }

</style>

after doing the above and the calling px.resize(px.options.panelSize) it kind of works but im not sure this is the complete solution. needs a little more digging into the css maybe and how dialog works.

Desktop:

• OS: debian stable
• Browser firefox

Anyway lmk what you think

[syonfox]

bs.AWH97 = window.innerHeight * window.innerWidth * 0.95;
bs.AWH3422 = 342*342
/**
 * Maintan window area such that each WidthxHeight=Area
 * Note: the area is bounded to 97% window w*h*0.97
 * @param [a=342x200] - You Should define this it  sets the voluem/ area of the panel content
 * @param [w=goodMax300] - if undefind with get a good withs
 * @param [h=calc] -if defined will IGNORE width and calculate it based on areas
 * @return jsPanel.option.panelSize - object(width, height, area)
 */
function areaWithHeight(a, w, h) {
    a = a || 342 * 200; // a = w * h; h = a/w
    a = Math.min(bs.AWH97, a); // ensure we dont overflow window
    if(h) {
        //calc w
        // parseFloat(true) || 422 -> 422
        h = parseFloat(h) ||  window.innerHeight * 0.976
        w =  Math.min(window.innerWidth * 0.95, a / w);
    } else {
        //calc h
        w = parseFloat(w) || bs.getGoodWidth(300);
        h = Math.min(window.innerHeight * 0.97, a / w); // another max on height at 95%
    }
    //ok this is a jsPanel.options.panelSize
    return {width: w, height:h, area: w*h}
}

bs.areaWithHeight = areaWithHeight; //todo port

window.onreize = ()={
  jsPanel.create({

    headerTitle: "Confirm Closing Window: "+windowName,
    content: confirmationDialog.outerHTML,
    panelSize: bs.areaWithHeight()

  })
}

[Flyer53]

@syonfox Hi there and sorry for the late reply ... Well, I can't find anything else than the min-width value within jspanel.dialog.css you already located. At least width works when you change that. But you most probably have to overwrite some other jspanel.dialog.css rules as well. Like the .jsPanel-dialog .buttonbar flexbox rules for example in order to get a vertical layout of your buttons.

Regards, Stefan