Question

有很多相关的主题，但没有一个能帮助我找到解决方案，这可能取决于我的无能，但我不觉得我可以做更多的研究。

在这个小提琴中：http://jsfiddle.net/L3dozygq/24/

我正在尝试根据屏幕的主要部分（红色框将包含的表单）来调整“对话框”类的大小。红色框的大小具有硬编码样式=宽度：等等。我们希望对话框的标题仅占用可用空间，并且我们不希望它在那里有大量文本时使对话框更宽。因此，红色框确定整个对话框的宽度，标题应根据该大小自行调整大小。

我一直在尝试使用flexbox策略，但我会对flexbox或非flexbox解决方案感到满意。但是我想避免花车。

我们感兴趣的两个类是flex容器：

.dialogheader

和孩子们

.dialogheadertitle
.dialogheaderrightside

在小提琴中，他们处于css的顶端。

您可能需要在新窗口中运行小提琴以证明其正常工作 - 在新窗口中添加/显示URL以执行此操作。

Answer 1

添加这些风格

 div {
  display: inline-block;
}
.dialogheadertitle {
      max-width:790px;
  }
  .dialogheader {
    height: auto;
  }
.dialogheader.draggabledialog {
  display: flex !important; 
}

检查更新的fiddle

 
.dialogveil {
  box-sizing: border-box;
  background-color: rgb(100, 100, 100);
  /* for old browsers */
  background-color: rgba(100, 100, 100, 0.7);
  display: none;
  z-index: 1;
  /* bug in IE needs this see stack overflow 40221351 */
}

.dialogcentre {
  /*  exists only to center the div  */
  position: relative;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  min-width: 300px;
  display: inline-block;
}

.dialogbox {
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid #111111;
  box-shadow: 2px 2px 40px #222222;
  vertical-align: top;
  /* correcting the alignments set from parent div above */
  text-align: left;
}

.dialogheader {
  background-color: rgb(239, 239, 239);
  background-color: rgba(239, 239, 239, 1);
  border-bottom: 1px solid #111111;
  height: 21px;
  cursor: default;
  display: flex;
  overflow: hidden;
}

.popover .dialogheader {
  border-bottom: 1px solid #aaaaaa;
}

.dialogheadertitle {
  color: #bb2200;
  vertical-align: middle;
  padding: 4px 0px 0px 14px;
  font-size: 9pt;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialogheaderrightside {
  float: right;
  height: 21px;
}

.dialogheadericons {
  width: 47px;
  height: 21px;
  cursor: pointer;
  display: inline-block;
  padding-right: 5px;
  padding-top: 2px;
  position: absolute;
  right: 20px;
}

.dialogheaderclose {
  width: 47px;
  height: 21px;
  cursor: pointer;
  background-color: Red;
  display: inline-block;
  position: absolute;
  right: 1px;
}

.dialogbody {
  padding: 10px 10px 10px 10px;
  /* all except popup */
}
.dialogcentre {
  position: static;
  display: inline-block;
}
div {
  display: inline-block;
}
.dialogheadertitle {
  max-width:790px;
  }
  .dialogheader {
height: auto;
  }
.dialogheader.draggabledialog {
  display: flex !important; 
}

<div class="dialogveil" style="z-index: 101; display: block;">
  <div class="dialog dialogcentre dragparent" style="position: absolute; left: 12px; top: 27px;">
<div class="dialogbox">
  <div class="dialogheader draggabledialog">

    <!-- THIS DIV SHOULD NOT EXPAND THE DIALOG BOX -->

    <div class="dialogheadertitle">Monitor: Dell P190S Monitor 333 Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333</div>
    <div class="dialogheaderrightside">
      <div class="dialogheadericons"></div>
      <div class="dialogheaderclose" title="Close this Window"></div>
    </div>
  </div>
  <div class="dialogbody">
    <div class="form formeditasset">
      <div>
        <div>
          <div>
            <div style="width:790px;height:150px;border:2px solid red;">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>
</div>

获取div来获取剩余的宽度，但是当文本溢出

1 个答案: