草庐IT

javascript - jQuery UI resizable 在调整宽度时改变高度

coder 2025-01-18 原文

我有一个非常简单的 DIV 元素，我正在尝试调整它的大小并进行水平拖动。它工作正常，但 jQuery UI 也更改了 DIV 元素的高度。我不明白为什么。

有什么想法吗？

JS代码:

$('.task')
    .draggable({
        axis: 'x'
    })
    .resizable({
        containment: 'parent',
        handles: 'e, w'
    });

HTML代码:

<ul>
  <li>
    <div class="task status-green">
      <span class="handle-move"></span>
    </div>
  </li>
</ul>

CSS 代码:

li {
  height: 20px;
  line-height: 20px;
  list-style: none;
}

.task {
  height: 16px;
  margin-top: 2px;
  position: relative;
}

.task span {
  display: block;
  height: 16px;
  position: absolute;
  z-index: 10;
}

.task .handle-move {
  bottom: 0;
  cursor: move;
  left: 10px;
  right: 10px;
  top: 0;
  z-index:1;
}

.task .ui-resizable-handle {
  background-color: pink;
  cursor: e-resize;
  height: 16px;
  position: absolute;
  width: 10px;
}

.task .ui-resizable-w {
  left: 0;
}

.task .ui-resizable-e {
  right: 0;
}

.status-green {
  background-color: green;
}

最佳答案

根据我的经验，resizable-function 无法尝试管理“box-sizing”css-property。尝试使用 

box-sizing: border-box;

或者为填充物制作一个内部容器。

关于javascript - jQuery UI resizable 在调整宽度时改变高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13230587/

javascriptresizablesectiontaskjquery-ui

有关javascript - jQuery UI resizable 在调整宽度时改变高度的更多相关文章

  1. ruby - 改变替换的大小写 - 2

    我有以下内容:text.gsub(/(lower)(upper)/,'\1\2')我可以将\2替换为大写吗？类似于:sed-e's/\(abc\)/\U\1/'这在Ruby中可行吗？ 最佳答案 查看gsub文档:str.gsub(模式){|匹配|block}→new_str在block形式中，当前匹配字符串作为参数传入，$1、$2、$`、$&、$'等变量将被适当设置。block返回的值将替换为每次调用的匹配项。"alowerupperb".gsub(/(lower)(upper)/){|s|$1+""+$2.upcase}

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  4. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  5. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  6. Ruby:检查东亚宽度 (Unicode) - 2

    使用Ruby，我必须将字符串以柱状格式输出到终端。像这样:|row1|astringhere|etc|row2|anotherstring|etc我可以使用String#ljust和%s处理拉丁UTF8字符。但是当字符是韩文、中文等时就会出现问题。当英文行与包含韩文等的行交错时，列根本不会对齐。如何在此处实现列对齐？有没有办法以等同于固定宽度字体的方式输出亚洲字符？对于要在Vim中显示和编辑的文档怎么样？ 最佳答案 您的问题发生在CJK(中文/日文/韩文)full-widthandwidecharacters(也向下滚动图表)；这些

  7. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  8. ruby - Watir-Webdriver 是否支持点击目标为 javascript 的链接？ - 2

    我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序，我想将其转换为Ruby/Watir，因为我现在必须支持Firefox。我发现我真的很喜欢Ruby，而且我正在研究Watir，但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面，实际上是一个表单，只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click

  9. ruby - 为什么我不能改变 self 的值(value)？ - 2

    为什么我可以这样改变“self”:self.map!{|x|x*2}或者这样:self.replace(self.map{|x|x*2})但不是这样:self=self.map{|x|x*2}为什么Ruby不允许我更改“self”变量指向的对象，但允许我更改对象的属性？ 最佳答案 不是答案，只是一个线索。a=[1,2]=>[1,2]a.object_id=>2938a.map!{|x|x*2}=>[2,4]a.object_id#differentdatabutstillthesameobject=>2938a.replace(a.

  10. ruby - 为什么括号内的换行符会改变算术结果？ - 2

    为什么下面的表达式会这样解析？括号的优先级应该高于换行符，不是吗？3-(1+1)#=>13-(1+1)#=>2省略加号也会让表达式计算为2:3-(11)#=>2如果我声明为连续的换行符(转义)或将加号移动到第一行，则会实现所需的行为:3-(1\+1)#=>13-(1+1)#=>1 最佳答案 这是因为Ruby将新行识别为表达式的结尾，除非表达式不完整。例如，(1+1)与相同(1;+1)这与+1相同，因为返回了括号内的最后一个表达式。这进一步与1相同。如果行尾有+，则表达式不完整，因此会继续到下一行。这使得:3-(1+1)被解释为3-(

随机推荐