Question

我目前正在使用Chrome扩展程序，并且正在使用语义UI来构建界面。当用户激活扩展程序时，它将显示一个实际上是iFrame的弹出窗口。在此iFrame中，我有一个表格，我希望该表格占据iFrame的整个宽度。 iFrame的宽度是固定的（500px）。问题是因为iFrame为600px，而设备为500px，则显示了表格（这是合理的，因为它是一个响应式框架。

但是我想更改此行为，并强制表格显示为在桌面屏幕上显示。

今天这就是我得到的

现在，我想获得以下结果（伪图像：）

这是我的iFrame的代码

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  <script src="js/ext/jquery-3.3.1.min.js"></script>
  <script src="js/ext/semantic-2.4.2.min.js"></script>
  <script src="js/popup.js"></script>
</head>

<body>
  <div>
    <div>
      <table class="ui celled padded collapsing table">
        <thead>
          <tr>
            <th class="single line">#</th>
            <th>Event mapping</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              1
            </td>
            <td class="single line">
              <div class="ui right action left icon input mini">
                <i class="search icon"></i>
                <input type="text" placeholder="Selector">
                <div class="ui basic floating dropdown button mini">
                  <div class="text">Identify</div>
                  <i class="dropdown icon"></i>
                  <div class="menu">
                    <div class="item">Page</div>
                    <div class="item">Track</div>
                  </div>
                </div>
              </div>
            </td>
            <td class="right aligned">

            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="5">
              <div class="ui left floated">
                <button id="btn-startcapture" class="positive ui button">Start capture</button>
              </div>
            </th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</body>
</html>

我将CSS样式应用于调用者页面上的iframe代码

iframe.segmentizor-panel-iframe-toggle {
  left: calc(100% - 500px) !important;
}

iframe.segmentizor-panel-iframe {
    top: 0px;
    left: calc(100% + 10px);
    display: block;
    z-index: 2147483647;
    box-shadow: rgba(0, 0, 0, 0.25) 7px 0px 12px 13px;
    position: fixed !important;
    width: 500px !important;
    height: 100% !important;
    opacity: 1 !important;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    transition: left 0.4s ease-in-out 0s !important;
}

很抱歉，这个问题看起来很琐碎。仍处于学习曲线中...谢谢您的帮助。

Answer 1

您是否尝试过编辑最大宽度的CSS？尽管您可能将宽度设置为800像素，但如果最大只能为600像素，则只能达到该宽度。

Answer 2

首先，删除折叠类

https://semantic-ui.com/collections/table.html#collapsing

合拢

表可能正在折叠，仅占用其行的空间。

此外，我认为您可以在iframe的头部添加一些其他样式。

之后

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

添加任何样式，就像在任何页面上一样...

<style>
   table{
       width: 100%;
   }
</style>

或者您可以根据需要添加一些类或其他CSS样式。

Answer 3

感谢您的指导，我设法做到了：

以我的iFrame样式添加以下类

min-width: 800px !important;

然后在我的iFrame页面中，添加了一个新的div，其大小与iFrame相同，并且表格的宽度为100％

<div style="max-width: 450px">
    <table class="ui celled padded unstackable collapsing table" style="width:100%">

Chrome扩展程序中的语义UI：在iFrame中显示时出现问题

3 个答案: