Иметь доступную область заполнения ячейки таблицы начальной загрузки, прокручивая при переполнении - PullRequest
Новая
       8

Иметь доступную область заполнения ячейки таблицы начальной загрузки, прокручивая при переполнении

2 голосов
/ 23 мая 2019

Так что есть много вопросов, касающихся Bootstrap и Tables и отзывчивости, но кажется, что все те, которые я нашел, имеют дело только с прокруткой или заполнением доступной области Table .

У меня проблемы с получением конкретной ячейки (<td> элемента) до
(a) заполнить доступное пространство, останавливаясь на границах окна (например: быть жидким) и
(б) добавить горизонтальные полосы прокрутки, если ячейка будет слишком большой.

Цель:

enter image description here

Лучшее усилие

Вот что у меня так далеко. На что обратить внимание:

  • Я не использую какой-либо пользовательский CSS, только тот, который предоставляется Bootstrap 4.1.3
  • Вы увидите, что <div class="table-responsive"> закомментирован - это потому, что я не хочу, чтобы вся таблица была прокручиваемой.
  • Часть <pre class="pre-scollable"> успешно добавляет вертикальную полосу прокрутки , когда в журнале много строк, но не добавляет горизонтальную полосу прокрутки
  • Я пытался обернуть ячейку results-log в загрузочный блок class="container-fluid" div, но это ничего не дало.
  • Если я использую <pre class="pre-scollable" style="width: 250px; overflow-x: scroll">, я могу получить горизонтальную полосу прокрутки, но тогда она больше не реагирует.
    • Использование разных width: inherit тоже не работает.
  • Все это заключено в <main class="container-fluid-page"> и другой div, но я не думаю, что это должно иметь какой-либо эффект ... верно? 
<!DOCTYPE html>
<head>
...
</head>
<body>
<!-- other stuff that doesn't matter -->
<main class="container-fluid-page">
<div id="content">

   <div id="results">
   <h2>Results:</h2>
   <!--<div class="table-responsive">-->
      <table class="table table-sm">
         <tbody>
            <tr>
               <th>Status</th>
               <td>
                  <div id="results-status">
                     foo
                  </div>
            </tr>
            <tr>
               <th>ReturnValue</th>
               <td>
                  <div id="results-return-value">
                     <pre><code class="json">{
  "__type__": "RecordRef",
  "name": "foo"
}
ReturnValue 
2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text
<! - </div> -> <! - class = "отзывчивый на таблицу" -> <! - id = results -> <! - id = content ->

редактирует:

  1. Удалено col-* из <th> и <td> определений.

1 Ответ

1 голос
/ 24 мая 2019

Соображение

ИМХО, вам не следовало редактировать свой вопрос на основе моего комментария.При этом вы сделали этот вопрос (гораздо) менее полезным для будущих пользователей, которые могут задать тот же вопрос:

"Почему бы не использовать col-* s для ячеек таблицы?"

, что является хорошим вопросом, учитывая гибкость и универсальность Bootstrap.

Для дальнейшего использования вот начальный код вопроса: 

<!DOCTYPE html>
<head>
...
</head>
<body>
<!-- other stuff that doesn't matter -->
<main class="container-fluid-page">
<div id="content">

   <div id="results">
   <h2>Results:</h2>
   <!--<div class="table-responsive">-->
      <table class="table table-sm">
         <tbody>
            <tr>
               <th class="col-2">Status</th>
               <td class="col-10">
                  <div id="results-status">
                     foo
                  </div>
            </tr>
            <tr>
               <th class="col-2">ReturnValue</th>
               <td class="col-10">
                  <div id="results-return-value">
                     <pre><code class="json">{
  "__type__": "RecordRef",
  "name": "foo"
}
ReturnValue 
2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text

Ответ

Причина, по которой классы col-* нельзя использовать в ячейках таблицы, заключается впотому что, в отличие от предыдущих версий, начиная с v4, Bootstrap использует display:flex и flex-basis для определения размера сетки, чтобы обеспечить такие умные методы размещения, как равное распределение положительного или отрицательного пространства, выравнивание по вертикали и горизонтали и всеВ комплект поставки другого вкусного флексбокса входят (то есть: order).

В вашем случае я рекомендую использовать встроенную систему разметки сетки Bootstrap: 

pre.pre-scrollable {
  max-height: 132px;
}

#results pre {
  overflow: auto;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: .25rem;
  margin-bottom: 0;
}

#results>.row>[class^="col-"] {
  padding-top: 1rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<main class="container-fluid" id="results">
  <div class="row">
    <div class="col-2">
      <label>Status</label>
    </div>
    <div class="col-10" class="results-status">
      foo
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
      <label>Log</label>
    </div>
    <div class="col-sm-10" class="results-log">
      <pre><code class="json">{
  "__type__": "RecordRef",
  "name": "foo"
}
2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text
2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text
2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text
2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text

Обратите внимание, что он корректно обрабатывает отзывчивость.
Удаление композитора -sm из имен классов столбцовзаставит колонки оставаться рядом на узких экранах (как таблица).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...