Как заставить вложенный динамический компонент HTML-контента в стандартном макете с помощью CSS-сетки? - PullRequest
Новая
       1

Как заставить вложенный динамический компонент HTML-контента в стандартном макете с помощью CSS-сетки?

0 голосов
/ 17 июня 2019

У меня довольно стандартная компоновка [столбец меню] + [контент], и отобрать часть [контент] в предопределенной компоновке оказалось сложно.

Работа с Angular, поэтому очень мало вещей - это четкий HTML, большая часть которого состоит из компонентов со всем багажом.

Область базового шаблона содержимого состоит из списка и редактора с компонентом сохранения / отмены. Пользователь щелкает строку списка, редактор заполняется. 

-----------------------------------
|               |                 |
| list items    | editor          |
|               |                 |
|               |                 |
|               |   |-------------|
|               |   |cancel | save|
-----------------------------------
<div class="main-content">
    <div class="list">
        <app-list>
    </div>
    <div class="editor">
        <app-editor>
        <div class="buttons">
            <button>Cancel</button>
            <button>Save</button>
        </div>
    </div>
</div>

Проблема в том, что раздел редактора должен состоять из двух столбцов сам по себе, поскольку с данными связан предварительный просмотр (изображение) 

-----------------------------------
|           |       |             |
| list items|     editor          |
|           |preview|   form      |
|           |       |             |
|           |       |-------------|
|           |       |cancel | save|
-----------------------------------

Содержимое должно быть преобразовано в 3 столбца, но макет tmeplate по-прежнему представляет собой 2 столбца. Проблема заключается в том, что когда содержимое внедряется, оно должно занимать всю высоту вложенной сетки. Теперь секция кнопок предотвращает это, потому что она пытается сложить их друг на друга так, чтобы это выглядело так: 

-----------------------------------
|           |       |             |
| list items|     editor          |
|           |preview|   form      |
|           |       |             |
|           |-------|-------------|
|           |       |cancel | save|
-----------------------------------

Я не знаю, как можно добиться желаемого макета, потому что макет внедряется со всеми видами элементов Angular, поэтому я не могу сделать чистый CSS, и я не знаю, как стилизовать контент редактора, чтобы соответствовать внешнему CSS (если это имеет смысл).

...