Ну, у меня есть следующая проблема с Angular Material. У меня есть два div в одной строке, которые я хотел бы отобразить с помощью изображения SVG и панели расширения, которая поворачивается с использованием следующего ответа: https://stackoverflow.com/a/55567174/3286975
Проблема в том, что я хотел бы сделать это в два столбца и я не знаю, какой дисплей лучше использовать. Я уже пробовал inline-block, grid, flex (с flex: 1 и flex-shrink: 0...), используя float: right и table (с table-cell в дочерних узлах) в контейнере без хороших результатов.
У меня есть два столбца, один с width: calc(100% - 50px), где 50px — оставшееся место для панели расширения. И еще один, чем может варьироваться от 50px до 20% из width.
Иногда я получаю слишком маленький SVG. (grid и flex)
В других случаях у меня панель расширения визуализируется только с размером 20-30 пикселей, и она не слишком сильно расширяется. (table + table-cell)
В других случаях я вижу, что SVG отображается правильно, а панель расширения отображается в той же строке, но в конце строки (inline-block + translateX(0px) вместо translateX(-100%)), и когда я нажимаю на нее, я вижу, что она перемещается вверх страницы.
Эффект, которого я хотел бы добиться, заключается в том, что первый столбец с SVG сжимается до 80% из width после расширения панели.
Но я получаю только панель, идущую вправо и переполняющую тело.
Это код, который я написал, представляющий проблему с помощью свойства display: inline-block. (но я не могу использовать функцию HTML/CSS/JS, которую предоставляет Stackoverflow, из-за отсутствия библиотеки материалов Angular):
CSS
.container > div {
display: inline-block;
}
.container > div:first-child {
min-width: 80%;
width: calc(100%- 50px);
}
.container > div:last-child {
max-width: 20%;
width: 50px;
}
.mat-accordion {
display: block;
transform-origin: top left;
transform: rotate(-90deg) translateX(-100vh); /* rotate and position it; translateX value corresponds to panel height */
width: 100vh; /* this will be the height of the accordion (inversed due to rotation) */
}
.mat-expansion-panel {
max-height: calc(100vw / 3); /* this will be the width of the panel (inversed due to rotation), 3 is panel amount */
}
.panel-content {
background-color: lightblue;
transform-origin: top left;
transform: rotate(90deg); /* rotate back */
margin-left: 100%; /* position it */
height: 100vw; /* real height of the content */
width: calc(100vw / 3 - 100px); /* real width of the content, 3 is panel amount */
}
HTML
<div class="container">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="1094" viewBox="0 0 512 224" preserveAspectRatio="xMidYMid"><path d="M352.945 196.973c5.82 2.91 37.1-.06 48.738 25.4-13.05-18.486-41.638-19.62-58.558-20.308-18.222-1.794-31.968-2.99-42.06-10.286 2.034 4.778 9.932 9.558 15.75 11.498 6.778 2.568 14.724 5.94 16.49 7.76-8.244-3.394-23.278-4.85-31.644-12.912-3.17-2.83-4.89-7.358-6.428-11.416-5.548-14.62-9.384-30.01-16.114-44.032-10.392-19.442-26.08-34.702-45.608-45.256-5.658-2.722-10.638-4.366-17.04-4.512-1.778-.04-3.274-.04-5.294.122-1.33-1.25-3.148-6.78-4.122-8.406 2.076-1.052 16.504-2.144 21.256.08 11.266 5.274 21.274 2.762 31.742-3.514 1.062-.638 3.822-1.658 5.924-3.436-.938 2.364-1.016 5.314-2.182 7.558-1.92 3.688-5.092 7.354 1.146 7.846 9.618.756 21.394 5.856 30.174 13.006-5.26-2.314-19.184-2.018-19.884.486 12.298.836 30.038 4.642 40.736 10.386-2.99 0-8.73.322-11.194.564-7.05.694-10.184 3.436-4.728 11.882 10.224 13.782 6.088 11.778 16.892 4.324 26.188-18.064 57.524-33.41 85.926-49.486 25.742-14.57 51.824-28.568 75.118-47.028a170.666 170.666 0 0 0 9.936-8.52c8.194-7.582 17.126-15.918 20.942-28.206 3.606 6.618 3.562 13.13 2.546 18.912-1.576 8.962-5.25 17.17-10.792 24.248-12.814 16.37-30.236 28.59-47.04 40.494-27.346 19.372-57.892 32.856-87.898 47.284-11.622 5.588-20.894 11.432-32.128 17.822-1.176.668-9.966 6.336-10.67 7.88 18.05-11.124 56.374-28.016 80.24-39.062 35.82-17.428 69.45-38.066 96.866-67.578.62-.668 3.074-3.412 4.934-4.9-.78 3.094-1.768 7.57-2.302 9.336-7.152 23.658-22.746 41.116-42.494 55.162-20.06 14.268-42.886 24.06-65.592 33.1-18.764 7.47-28.752 11.34-47.524 18.792-1.458.578-13.54 5.678-15.64 7.516.528-.04 4.618-1.636 5.092-1.818 33.044-12.146 65.686-23.324 96.324-37.584 20.974-8.794 41.16-24.066 57.588-42.192-.52 2.016-1.684 7.474-2.304 9.456-7.27 23.288-23.49 40.02-43.402 52.922-16.416 10.636-32.508 18.132-51.224 23.58-2.228.65-7.274 1.698-13.336 3.396 25.58-3.032 43.246-11.972 59.468-18.854-11.762 12.73-27.578 24.12-41.464 31.584-14.398 7.736-29.38 7.274-45.162 6.91zm-194.83-.485c-15.2.23-30.738 1.604-44.62-6.048-13.564-7.478-30.546-21.202-41.702-31.9 16.214 6.792 38.104 16.23 55.82 18.066-1.514-.524-3.008-1.114-4.546-1.56-23.61-6.852-46.038-16.206-65.554-31.526-17.464-11.198-31.456-31.83-36.034-55.178 9.336 13.458 46.482 39.42 78.198 51.042 19.52 7.154 37.216 14.492 56.376 21.824.122 2.788-1.264 1.01-3.394 8.122-1.026 3.426-1.59 6.978-1.398 10.51.024.426.302.704.348 1.13.092.854-.014 1.858.176 2.706.33 1.476 1.18 3.456 2.176 4.652 2.456 2.946 4.882 2.244 7.792 4.28 2.294 1.606 5.21 4.424 11.76 5.092 2.91.298 7-.848 9.092-2.788 6.45-5.98 11.416-13.148 12.972-22.248.702-4.1 2.004-7.432 6.366-9.092 1.132-.432 4.426-2.546 4.426-2.546s1.172 3.786 1.394 5.092c1.65 9.766 2.114 20.094-.114 29.684-.472 2.03-3.798 4.12-6.102 4.544-10.3 1.896-20.666 3.782-31.092 4.58-15.486 1.186-31.034 1.072-46.156-3.314-3.93-1.14-13.468-4.882-16.134-8.762 10.588 4.648 36.376 9.484 49.95 3.638zM2.727 0c7.962 22.752 32.936 40.454 55.366 54.76 30.058 18.272 60.404 34.734 91.03 52.072 3.886 2.2 7.698 4.062 7.698 4.062-2.662 7.436-4.538 15.486-5.536 23.682 0 0-.392-.362-3.106-1.578-44.782-20.072-88.71-41.66-124.344-76.438-7.492-7.312-12.976-13.884-18.482-22.896C1.117 26.73-1.357 16.038.787 7.76 1.029 6.826 2.235.598 2.727 0zM7.05 45.545c4.058 3.89 10.158 10.738 13.7 14.184 23.412 22.778 50.358 39.94 79.412 54.438 16.472 8.218 54.436 25.338 54.436 25.338l1.09 19.398s-38.982-15.242-55.958-22.376c-19.112-8.032-37.498-17.494-53.818-30.52-16.84-13.444-30.306-28.742-36.438-49.672-.528-1.802-1.83-8.444-2.424-10.79zm214.519 62.682c16.134 2.272 30.156 11.032 37.778 24.49 5.708 10.076 10.638 21.776 15.398 32.37 3.838 8.542 7.752 19.582 11.518 28.128 3.648 8.28 10.858 16.204 16.73 22.914-18.686.952-28.01-21.074-30.308-28.37-4-12.62-8.084-16.084-12.044.08-1.616 5.496-3.96 12.772-5.416 19.318-.726-9.092.49-26.286 1.456-35.522 2.82-26.976-10.198-47.194-32.758-61.844-.79-.514-1.57-1.042-2.354-1.564zm-54.908 41.22c1.716.094 3.63-3.016 5.576-2.91-.302 7.274-.484 13.154-15.336 25.46.548-2.758 3.26-8.914 3.576-11.7 1.052-9.218.9-18.022-3.216-26.684-.628-1.318-.502-3.162-.326-4.642.746-6.27 2.63-12.066 5.012-17.672 1.184-2.784 1.21-3.144-.924-5.68-3.11-3.696-5.898-10.452-5.152-16.548 3.216 1.49 6.826 2.914 9.192 4.414 2.124 1.348 5.538 3.344 5.538 3.344s3.066-2.636 4.928-4.08c2.346-1.82 6.444-4.988 11.682-5.134-8.304 4.91-17.37 12.972-20.732 21.58-3.452 8.842-5.308 19.87-2.75 28.94l.118.012c.286-5.14 8.666-30.112 14.15-26.224.736.522 1.492-2.846 1.926-4.344 1.948-6.726 3.59-14.812 11.714-19.418-1.94 7.274-.296 16.282-.122 23.218.128 5.12-3.392 7.128-7.578 8.91-11.13 4.74-14.358 12.782-16.972 24.188-.098.426-.378 4.006-.304 4.97zm44.252 51.527c.46-3.852 1.356-8.814 1.758-12.246 1.1-9.406 1.346-18.756-2.062-27.762-1.434-3.794-3.222-4.916-7.334-2.972-7.408 3.504-12.116 9.338-13.356 17.318-1.082 6.954-4.89 10.69-9.134 16.144-3.014 3.278-11.004 2.642-15.516-1.038-1.726-1.41-4.632-2.342-6.55-3.468-3.786-2.22-3.636-3.252-2.788-11.436l2.668.122c.364 1.454.084 5.284.546 5.818 1.174 1.366 4.466 3.018 6.122 3.578.528.178-.124-3.502.484-4.79 2.366-5.004 8.062-6.734 10.494-.732-7.018-1.462-10.614 4.62-3.3 8.734 3.394.324 4.702-1.154 5.658-2.264 3.144-3.648 3.072-4.04 5.152-10.89 2.618-8.614 6.002-16.488 14.912-20.004 5.63-2.222 10.246-10.974 14.004-16.61 7.27 11.596 14.548 51.466-1.758 62.498zM198.302 80.059c8.51 5.536 13.118 20.004 7.46 27.358.658-5.962-1.456-13.254-5.658-17.296-4.284 4.042-4.18 11.78-3.96 16.408-4.334-4.9-4.93-15.842 2.158-26.47zm-15.252 49.504c-6.71.808-8.754 9.152-9.376 14.872 1.312-.868 3.038-3.576 4.404-4.97 2.894 2.616 7.474 2.13 9.498-1.98 2.384-4.844 6.304-10.022 6.788-16.894-5.656 8.568-7.472 8.51-11.314 8.972zm-3.84 8.366c-1.132-2.182 1.092-4.244 5.214-4.728-1.214 5.092-4.406 5.94-5.214 4.728zm7.153 86.02c2.304-4.729 21.398-12.367 20.61-24.733-2.996 9.886-23.278 15.76-20.61 24.732z"/><style xmlns="" class="darkreader darkreader--fallback">html, body, body :not(iframe) {
background-color: #181a1b !important;
border-color: #776e62 !important;
color: #e8e6e3 !important;
}</style></svg>
</div>
<div>
<mat-accordion multi="true">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Some title
</mat-panel-title>
<mat-panel-description>
Some description
</mat-panel-description>
</mat-expansion-panel-header>
<div class="panel-content">
<p><strong>Panel Content</strong>If you ask Chuck Norris what time it is, he always says, "Two seconds 'til." After you ask, "Two seconds 'til what?" he roundhouse kicks you in the face, The quickest way to a man's heart is with Chuck Norris' fist Even corn flakes become deadly weapons in the hands of Chuck Norris.</p>
<p>More content</p>
</div>
</mat-expansion-panel>
...
</mat-accordion>
</div>
</div>
Поэтому я надеюсь, что кто-нибудь сможет помочь мне с этим, потому что я боролся со своим разумом в течение 2 часов без хороших результатов.
Я думаю, что мой подход неверен, потому что вы не можете сжать div, который содержит и svg.
