简体   繁体   English

调整jqxWindow的大小时,窗口主体的宽度和高度不变

[英]When resizing jqxWindow, window body width and height not changing

Here is JSFIDDLE to my problem. 这是我的问题的JSFIDDLE As you can see, divs displayed inside window have set width to 100%, and my goal si to foce this divs to automatically resize when I am manually resizing the window. 如您所见,窗口内显示的div的宽度已设置为100%,当我手动调整窗口大小时,我的目标si使该div自动调整大小。

#container {
    width: 100%;
    display: table;
    table-layout: fixed;
    border: 5px solid #ccc
}

I was looking inside this element throught element inspection in chrome and I figured out, that windowBody div doesn't change its width and height and that is the problem. 我正在通过chrome中的元素检查来查看此元素的内部,然后发现windowBody div不会改变其宽度和高度,这就是问题所在。 Does anyone know how to achieve what I want? 有谁知道如何实现我想要的?

I have just found out, that the problem was that you cannot declare maxWidth and maxHeight to 100% in jqxWindow declaration. 我刚刚发现,问题是您无法在jqxWindow声明中将maxWidth和maxHeight声明为100%。 You need to set absolute numbers. 您需要设置绝对数字。 In my case worked setting them to max width of the screen. 在我的情况下,将它们设置为屏幕的最大宽度。

$('#jqxwindow').jqxWindow({
height: 200,
width: 340,
minHeight: 100,
minWidth: 200,
maxHeight: screen.height,
maxWidth: screen.width,
isModal: true,
autoOpen: true,
resizable: true

}); });

here is JSFIDDLE 这是JSFIDDLE

设置宽度<div>调整 window 的大小时</div><div id="text_translate"><p>所以我在 Vuejs 中得到了这个应用程序,它被css grid划分为 3 个 div 基本上:一个sidebar 、一个configpanel和一个preview 。 我想根据当前屏幕大小和屏幕大小调整时以px为单位设置preview div 的宽度</p><p>为了澄清起见,我制作了一个网站的 gif 图像,它几乎完全符合我的要求: <a href="https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a" rel="nofollow noreferrer">https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a</a></p><p> 正如您在 gif 中看到的,每次调整屏幕大小时,特定的&lt;div&gt;都会由于某种原因(不知道为什么或如何)被分配一个新的 class 并且 div 的width会自动更新为新的px值。</p><p> 起初我以为我可以在created()钩子中做这样的事情:</p><pre> window.addEventListener("resize", () =&gt; { let preview = window.document.querySelector(".preview"); preview.style.width = `${preview.offsetWidth}px`; });</pre><p> 但这不起作用。</p><p> 我在<a href="https://codesandbox.io/s/hopeful-feather-ywh6z?file=/src/components/Preview.vue:125-430" rel="nofollow noreferrer">这里</a>的codesandbox中设置了一个非常简单的示例项目。</p><p> 理想情况下,我想知道如何像网站在 gif 中那样动态设置像素width 。</p><p> 此外,出于好奇,我想知道每次调整屏幕大小时该特定网站为何以及如何生成新的 class (我已经看过几次了,我想知道它是什么)。</p></div> - Setting the width of a <div> when resizing the window

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将画布调整为完整的浏览器窗口宽度和高度 - Resizing canvas to full browser window width and height 添加更多文本时,工具提示窗口会更改高度和宽度 - Tooltip window changing height and width when more text is added 获取网页的正文或窗口的高度和宽度 - Getting height and width of body or window of web page 设置宽度<div>调整 window 的大小时</div><div id="text_translate"><p>所以我在 Vuejs 中得到了这个应用程序,它被css grid划分为 3 个 div 基本上:一个sidebar 、一个configpanel和一个preview 。 我想根据当前屏幕大小和屏幕大小调整时以px为单位设置preview div 的宽度</p><p>为了澄清起见,我制作了一个网站的 gif 图像,它几乎完全符合我的要求: <a href="https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a" rel="nofollow noreferrer">https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a</a></p><p> 正如您在 gif 中看到的,每次调整屏幕大小时,特定的&lt;div&gt;都会由于某种原因(不知道为什么或如何)被分配一个新的 class 并且 div 的width会自动更新为新的px值。</p><p> 起初我以为我可以在created()钩子中做这样的事情:</p><pre> window.addEventListener("resize", () =&gt; { let preview = window.document.querySelector(".preview"); preview.style.width = `${preview.offsetWidth}px`; });</pre><p> 但这不起作用。</p><p> 我在<a href="https://codesandbox.io/s/hopeful-feather-ywh6z?file=/src/components/Preview.vue:125-430" rel="nofollow noreferrer">这里</a>的codesandbox中设置了一个非常简单的示例项目。</p><p> 理想情况下,我想知道如何像网站在 gif 中那样动态设置像素width 。</p><p> 此外,出于好奇,我想知道每次调整屏幕大小时该特定网站为何以及如何生成新的 class (我已经看过几次了,我想知道它是什么)。</p></div> - Setting the width of a <div> when resizing the window 调整窗口大小时以 px 为单位更改元素宽度 - Change an element width in px when resizing the window jQuery-如何知道窗口是否在调整宽度/高度或同时调整宽度和高度? - jQuery - How to know if window is resizing in width/height or both? 调整窗口大小时,请勿修改主体任何元素的宽度或高度 - On window resize do not modify width or height on any element of body 调整旋转元素的大小时计算正确的宽度和高度 - Calculate correct width and height when resizing a rotated element 当浏览器的宽度/高度改变时自动调整图像大小 - Automatically resizing images when the browser width/height changes 调整宽度时,jQuery UI可调整大小会更改高度 - jQuery UI resizable changes height when resizing width
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM