Kabak |
|
---|---|
Суть проблемы : Пользователь неожиданно ввёл текста больше чем ожидалось. ( и это не его вина ) в отладчике это выглядит так Весь ответ на форуме = Flex контейнер. ( на последнем скрине видны блоки ) Блок с текстом ответа просто соскакивает вниз, потому что блок с инфой о юзере стал больше пожидаемого. Добавлено 8 минут спустя: Обрезание текста таким методом - не совсем красивое и решение конкретного случая, но не панацея от такой проблемы <p>{FORUMS_POSTS_ROW_USERLOCATION_TITLE} : {FORUMS_POSTS_ROW_USERLOCATION|cot_string_truncate($this, '14')}</p> выглядит так : Добавлено 2 минуты спустя: Каким образом красиво переносить слова - текст который превышает какие-то размеры по длинне из тега {FORUMS_POSTS_ROW_USERLOCATION} ? |
|
Dit bericht is bewerkt door Kabak (2023-09-28 07:40, 1 jaar ago) |
Kort |
|
---|---|
Для начала закомментируй блоки .forum_date, .admin и div_thanks. Вернешься к ним потом. Правила для div.about: .about { background-color: #2E3342; color: #D2E0A4ff; padding: 1rem; flex: 0 0 15rem; } Правила для div.message: .message { background-color: #2E3342; padding: 1rem; flex-grow: 1; } Текст в блоке .about теперь будет спокойно переноситься. Почему не переносился раньше -- почитай про flex и посмотри на свои начальные правила. У родителя достаточно будет: .forum_post { display: flex; background-color: #2F3342; border-color: #3f4f5f; border-radius: 20px 8px 8px 0; box-shadow: 5px 3px 15px #00000080; opacity: 1.0; transition-duration: 0.5s; transition-property: box-shadow, opacity; transition: 200ms; margin: 30px 0; } .forum-date и .admin проще перенести в блок .message. .div_thanks -- в .about. Как вариант -- использовать отдельные рядные flex-блоки для [div.forum-date div.admin], [div.about div.message] и [div.thanks]. Но если посидеть-подумать, можно и с текущей разметкой справиться) P.S. color для .about указан с ошибкой SED.by - создание сайтов, разработка плагинов и тем для Котонти
|
|
Dit bericht is bewerkt door Kort (2023-09-28 08:23, 1 jaar ago) |
Kabak |
|
---|---|
блоки из контейнера Flex .forum_date и .admin всегда должны быть сверху над всем они делят простарнствоа 20% и 80% как это сделать ?
|
Argont |
|
---|---|
Kabak |
|
---|---|
1 + 2 блоки всегда должны быть над 3-м и 4-м блоками 3 + 4 всегда должны быть слева направо и не уходить вниз - 4-й под 3-й при этом длинный текст в 3-м блоке должен уходить на новую строку 5 всегда внизу на все 100% пространства под 3-м и 4-м блоками |
Argont |
|
---|---|
блоку с юзером и его данными отдаем 1-4@m а на текст в в сетке отдаем expand@m иногда поржать над задравшим подбородок разработчиком
|
Kort |
|
---|---|
#47146 Kabak: Если тебе принципиально 20% и 80% (т.е. все в %), то и .about надо в проценты: .about { background-color: #2E3342; color: #D2E0A4ff; padding: 1rem; flex: 0 0 20%; } Аналогично поступаешь с .forum_date SED.by - создание сайтов, разработка плагинов и тем для Котонти
|
Kabak |
|
---|---|
Я его и не начинал пользовать - он убивает скорость любого сайта.
Добавлено 1 минута спустя: вот полный СSS ( я понимаю, что там много лишнего. Я пока его не чистил ) .forum_post { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; align-items: flex-start; background-color: #2F3342; border-color: #3f4f5f; border-radius: 20px 8px 8px 0; box-shadow: 5px 3px 15px #00000080; opacity: 1.0; transition-duration: 0.5s; transition-property: box-shadow, opacity; transition: 200ms; height: auto; margin: 30px 0; padding: 0; min-width: 560px; } .forum_post:hover { box-shadow: 4px 2px 14px #0000004d; opacity: 1.0; } .forum_date { border-radius: 20px 8px 0 0; color: #D2E0A4ff; text-align: left; font-size: 85%; margin: 0; padding: 5px 10px 5px 15px; height: auto; width: 20%; } .admin { border-radius: 20px 8px 0 0; background-image: linear-gradient(to right, #2F3342 50%, #3A4053 ); color: #D2E0A4ff; text-align: right; margin: 0; padding: 5px 10px; height: auto; width: 80%; } .about { display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; align-self: flex-start; background-color: #2E3342; color: #D2E0A4ff; text-align: left; margin: 0; padding: 10px 0 20px 20px; height: auto; min-width: 150px; } .location_length { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; } .topic_starter { /* */ background: url(../img/author_32.png) no-repeat 50% 50%; background-position: 19px; width: 52px; height: 35px; -webkit-filter: drop-shadow(2px 2px 2px #0000007f); border-radius: 50%; margin-left: 70px; } .message { display: flex; align-self: flex-start; flex-direction: column; background-color: #2E3342; margin-left: 10px; padding: 0; height: auto; width: 87%; justify-content: space-around; align-items: flex-start; min-width: 420px; } .message_body { color:aliceblue; align-self: stretch; /* min-height: 185px;*/ } .signature { margin: 5px 5px 10px 5px; color: #FFECBE; font-size: 85%; } .signature_delimiter { /* border-bottom: 1px solid #a5c29bff; border-left: 1px solid #a5c29bff; border-right: 1px solid #a5c29bff; border-radius: 3px;*/ background-color: #a5c29bff; } .signature_delimiter hr { height: 1px; background-color: #404C5Dff; border: none; } .signature_gold { flex-direction: column; align-self: flex-start; width: 100%; margin: 15px 5px 10px 5px; color: #FFECBE; } .page_description { text-align: center; color: #FFECBE; margin-bottom: 10px; }
|
Argont |
|
---|---|
#47148 Kabak: <div class="uk-card uk-card-default uk-card-body"> <div uk-grid> <div class="uk-width-1-4@m">1</div> <div class="uk-width-expand@m">2</div> </div> <div uk-grid> <div class="uk-width-1-4@m">3</div> <div class="uk-width-expand@m">4</div> </div> <div class="uk-width-1-1"> 5 </div> </div>
иногда поржать над задравшим подбородок разработчиком
|
Kabak |
|
---|---|
4-й блок ещё делится на свои Flex блоки. они не отображены потому, что пользователь не указал в профиле подпись. 5-й тоже делится на подблоки , но с ними всё в порядке |
Kort |
|
---|---|
Мама, роди меня обратно. Леша, если надо указывать ширины, для родителя добавь flex-wrap: wrap, Затем все flex-свойства у потомков замени на ширины в %. Примерно так: .forum_post { display: flex; flex-wrap: wrap; background-color: #2F3342; border-color: #3f4f5f; border-radius: 20px 8px 8px 0; box-shadow: 5px 3px 15px #00000080; opacity: 1.0; transition-duration: 0.5s; transition-property: box-shadow, opacity; transition: 200ms; margin: 30px 0; }
.about { background-color: #2E3342; color: #D2E0A4ff; padding: 1rem; width: 20%; }
.message { background-color: #2E3342; padding: 1rem; width: 80%; }
SED.by - создание сайтов, разработка плагинов и тем для Котонти
|
Argont |
|
---|---|
#47151 Kabak: кроме вашего личного времени, на поиски решений, уже давно готовых как теорема пифагора - ничего он не убивает, как и любая современная библиотека или фреймворк на JS/CSS это кейс-тулс (соквояж я инструментами) что бы не изобретать их заново, у любого нормального водителя есть такой чемоданчик Добавлено 4 минуты спустя: #47153 Kabak: <div class="uk-card uk-card-default uk-card-body"> <div uk-grid> <div class="uk-width-1-4@m">1</div> <div class="uk-width-expand@m">2</div> </div> <div uk-grid> <div class="uk-width-1-4@m">3</div> <div class="uk-width-expand@m"> <div uk-grid> <div class="uk-width-1-4@m">4.1</div> <div class="uk-width-expand@m">4.2</div> </div> </div> </div> <div class="uk-width-1-1"> 5 </div> </div>
иногда поржать над задравшим подбородок разработчиком
|
Kabak |
|
---|---|
Да, в интернете полно описаний каких-то Но у меня не поулчилось добиться того что я описал. Попробую то что вы написали. Возможно ещё раз попробую... Как-то давновато я этот каркас для ответа на форуме делал и много что пробовал. Напишу о результатах здесь. Добавлено 48 секунд спустя: flex-wrap: wrap как раз и загибает блок под блок |
Argont |
|
---|---|
вот визуально, о чем писал выше иногда поржать над задравшим подбородок разработчиком
|
Kabak |
|
---|---|
Блоки .about и .message - тоже Flex контейнеры для своих div со своими правилами. Добавлено 1 минута спустя: #47157 Argont: ну и при сужении экрана блоки уходят один по одного. А мне нужно что бы ВСЕГДА !!! - 1-2 3-4 5
при любом разрешении экрана Добавлено 4 минуты спустя: вот для .about .about { ... min-width: 180px; max-width: 180px; } работает |