В настоящее время я работаю над расширением Chrome и использую Semantic UI для создания интерфейса.Когда пользователь активирует расширение, он покажет всплывающее окно, которое на самом деле является iFrame.В этом iFrame у меня есть таблица, и я бы хотел, чтобы эта таблица занимала всю ширину iFrame.Ширина iFrame является фиксированной (500 пикселей).Проблема заключается в том, что размер iFrame составляет 600 пикселей, а таблица отображается как устройство размером 500 пикселей (имеет смысл, так как это адаптивный фреймворк.
Но я бы хотел изменить это поведение и заставить таблицу отображать так, как это было быбыть на экране рабочего стола.
Сегодня это то, что я получаю
Теперь я хотел бы получить следующий результат (поддельное изображение:)
Вот код моего 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;
}
Извините, если вопрос выглядит довольно тривиально. Все еще в процессе обучения ... Спасибо за вашу помощь.