Я использую Flexbox с пробелом, чтобы получить результат с правой стороны веб-сайта и таблицы с левой стороны. Работает отлично, пока я не нажму кнопку. Я раскрасил флекситемы, чтобы увидеть, что именно происходит, но цвета просто исчезают, и внезапно Результат оказывается под столом, независимо от его размера.
Иногда, когда я нажимал кнопку, flexbox снова работает после открытия файла style.css. Ширина таблицы всегда одна и та же, только длина имени может немного ее растянуть, но она никогда не будет такой же широкой, как экран, так что гибкий элемент с результатом должен находиться под таблицей.
Кроме того, результат в цвете и такой же ширины, как текст, который не так много, но когда я нажал кнопку, внезапно становится шириной экрана.
Я пытался: flex-wrap: nowrap, фиксированная ширина и высота, flex: 1 1 auto, flex: 0 1 auto, min-width, min-height, max-width, max-height, display: inline-flex, justify-content: space-around.
Я имею в виду flexbox #phoneTableArticle
Я не смог найти ничего, что могло бы блокировать CSS. Таблица восстанавливается, когда я нажимаю кнопку, так что, может быть, в этом проблема? Но я не знаю, как решить проблему тогда.
/*telefonliste.php*/
/*header*/
#headerT {
display: flex;
}
#selectionHead {
display: flex;
justify-content: space-between;
}
#filter {
margin-left: 1em;
margin-bottom: 1em;
}
/*tabelle und anzeige*/
#phoneTableArticle {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
#boxItem1 {
background-color: lightpink;
}
#boxItem2 {
background-color: aqua;
}
#phoneTable {
margin-top: 2em;
border: 1px solid black;
border-collapse: collapse;
text-align: center;
max-height: 500px;
overflow-y: scroll;
/*text-shadow: 2px 3px 1px red, 2px -3px 1px blue;*/
}
tbody {
max-height: 500px;
max-width: 500px;
}
#phoneTable td {
padding: .5em;
border: 1px solid black;
border-collapse: collapse;
}
#zeitBereich {
margin-top: 2em;
}
/*adminbereich.php*/
#adminLogin {
margin-left: 65%;
}
#upload {
font-size: 1em;
}
#logout {
font-size: 1em;
}
#file {
padding-bottom: 1em;
}
#passChange {
display: flex;
justify-content: space-between;
}
<div class="container">
<section>
<article id="selectionHead">
<div id="flexitem1">
<form method="post">
<select id="phoneSelect" name="phoneSelect">
<option value="Alle" selected>Alle</option>
<!--Fill dropdown with php-->
</select>
<!-- Whenever I press this button -->
<input id="filter" type="submit" name="filter" value="Filter anwenden">
</form>
</div>
<!--Datepicker-->
<div id="flexitem2">
<p>Anfangsdatum: <input type="text" id="startDatepicker"> Enddatum: <input type="text" id="endDatepicker"></p>
</div>
</article>
<!-- Flexbox -->
<article id="phoneTableArticle">
<!-- Flexitem containting table -->
<div id="boxItem1">
<table id="phoneTable">
<theader>
<th>Typ </th>
<th>Datum/Uhrzeit</th>
<th>Name</th>
<th>Rufnummer</th>
<th>Dauer</th>
</theader>
<tbody>
<!--Fill the TD with php and data from a DB-->
</tbody>
</table>
</div>
<!-- Flexitem containting result and a button for calculations -->
<div id="boxItem2">
<div class="alert alert-success" id="zeitBereich">
Die Gesamtdauer beträgt : 00:00:00
</div>
<form method="post">
<input id="gesamtZeit" type="button" onclick="addTimes()" value="Gesamtzeit berechnen">
</form>
</div>
</article>
</section>
</div>
Перед нажатием кнопки
Сразу после нажатия кнопки «Фильтр»
Когда я меняю CSS (в данном случае нажата пробел)
Спасибо всем.
edit: он отлично работает в Firefox и Safari. Только в chrome flexbox исчезает всякий раз, когда я нажимаю кнопку фильтра. И Flexbox восстанавливается только тогда, когда я действительно изменяю style.css любым способом.