如何在DevExpress中扩展div＆＃39;带水平滚动条的回调面板？

Question

我们有MVC 5应用程序，我们使用很多DevExpress和DevExtreme组件。在左侧，我们有DevExpress的导航栏，右侧是由其Callback面板控制的内容区域。在附加的屏幕截图中，您可以看到整个图片和内容区域的右侧部分。绿色和灰色div位于内容区域的顶部，当我们使浏览器的窗口变小时，它们不会延伸。在这种情况下，水平滚动条会自动出现，当我们滚动到右边的绿色和灰色的div不会伸展。

代码如下：

1）HTML：

<div class="dashboard-sub-title">Расчет потерь электроэнергии</div>

<div class="dashboard-parameter-box">
    <div id="FieldsList" style="vertical-align: middle; display: inline-block"></div>&emsp;&emsp;&emsp;&emsp;
    С:&nbsp;&nbsp;<div id="StartDate" style="vertical-align: middle; display: inline-block"></div>&emsp;
    По:&nbsp;&nbsp;<div id="EndDate" style="vertical-align: middle; display: inline-block"></div>&emsp;&emsp;&emsp;&emsp;
    Период:&nbsp;&nbsp;<div id="DateTimePeriod" style="vertical-align: middle; display: inline-block"></div>&emsp;&emsp;&emsp;&emsp;
    <div id="ShowButton"></div>
</div>

<div class="dashboard-content">
    <div id="DataGrid" style="margin-left: 5px; vertical-align: top; display: inline-block"></div>
    <div style="border: 1px solid #d3d3d3; width: 800px; vertical-align: top; display: inline-block;">
        <div id="RealLostDonutChart" style="width: 400px; vertical-align: top; display: inline-block;"></div>
        <div id="NormativeLostDonutChart" style="width: 400px; vertical-align: top; display: inline-block;"></div>
    </div>
    <div id="LineChart" style="border: 1px solid #d3d3d3; margin-top: 5px; margin-left: 5px; width: 1505px; height: 450px;"></div>
</div>

2）CSS：

.dashboard-sub-title {
    min-width: 1200px;
    padding: 10px;
    background-color: rgba(41, 213, 0, 0.59);
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
    font: 15pt Arial,sans-serif;     
    font-weight: bold;
}

.dashboard-parameter-box {
    min-width: 1200px;
    padding: 5px;   
    margin-bottom: 5px;   
    background-color: #e7ecf0;     
    font: 8pt Arial,sans-serif;
}

正如您所见，dashboard-sub-title和dashboard-parameter-box负责divs＆＃39;我正在谈论的行为。

它看起来如何：

Answer 1

我认为没有必要在仪表板子标题和仪表板参数框的css中添加 min-width 。

只需设置左侧栏和右侧内容区域的百分比宽度，其中包括仪表板子标题和仪表板参数框。

就像下面的代码::

.left-sidebar {width: 30%; float: left;}
.right-content {width: 70%; float: right;}

然后没有内部divs ::

的最小宽度

.dashboard-sub-title {
  /* min-width: 1200px; */
}
.dashboard-parameter-box {
  /* min-width: 1200px; */
}