Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как сделать, чтобы ширина блока не уменьшалась внутри flex-контейнера?

Код в песочнице: jsfiddle.net/khusamov/ydgsv70x/1
Когда наводишь на полоску, то раздвинувшись появляется текст.
Я поставил для полоски overflow: hidden; а для текста фиксированную ширину, чтобы текст обрезался, когда он больше по ширине чем полоска.
Но это не получилось. И когда полоска меньше текста, то текст увеличивается по высоте, вместо того чтобы обрезаться.
Как все-таки зафиксировать ширину текста?
Ответ: решил
оказывается надо min- max-width выставить
Вопрос: Select: как сделать, чтобы выпадающий список находился в родительском контейнере?


HTML5
1
2
3
4
<div>
Hello World
    <p><select  id="hello" name="dsfdsf"><option value="sdfdsf">sdfsdf</option><option value="sdfsdf">sdfdf</option><option value="sdfsdfsdf">sdfsdf</option><option value="ewrewrwe">dfserwfe</option></select></p>
</div>
CSS
1
2
3
4
5
6
div {
    border:1px solid #000000;
    height:60px;
    width:100%;
    overflow: auto;
}
Когда жмем на селект, выпадающий список вылазит поверх родительского блока, как сделать чтобы он находился внутри и при скролле родительского можно было его просматривать ?
Ответ:
Сообщение от Wizlight
как сделать чтобы он находился внутри и при скролле родительского можно было его просматривать ?
Никак. Селект - это системный элемент браузера и на его поведение влиять нельзя. Но если сильно хочется - можно подменить оригинальный селект кастомным построенным на обычных элементах(div, span)
Вопрос: Flex контейнеры, не хотят располагаться горизонтально

Друзья нужна ваша помощь...
Есть основной flex контейнер
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.main-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 1200px;
  max-height: 100%;
  margin: 2px auto;
  justify-content: flex-start; /*распределение блоков вдоль гориз. оси*/
  align-items: stretch; /*распределение блоков вдоль верт. оси*/
  align-content: stretch; /*выравнивание блоков вдоль гориз. оси*/
  flex-flow: row wrap; /*слева направо, многострочный*/
}
В нем расположено 5 блоков. Делаю 3 блок так же flex контейнером, в котором и будут выводиться материалы в блоках. Но все эти блоки должны располагаться горизонтально слева направо. Сделал так
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.main-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 1200px;
  max-height: 100%;
  margin: 2px auto;
  justify-content: flex-start; /*распределение блоков вдоль гориз. оси*/
  align-items: stretch; /*распределение блоков вдоль верт. оси*/
  align-content: stretch; /*выравнивание блоков вдоль гориз. оси*/
  flex-flow: row wrap; /*слева направо, многострочный*/
}
/*Общий стиль для всех вложенных блоков в основной контейнер*/
.bl {
  border-radius: 1px;
  margin: 1px;
}
/*Далее идут сами блоки*/
.fl01 {
  flex-basis: 100%; /*Размер блока*/
  height: 10em;
  background: #8aa7ed;
}
 
.fl02 {
  flex-basis: 100%; /*Размер блока*/
  background: #57e9ac;
}
 
.fl03 {
  display: flex;
  background: #8ba756;
}
 
.fl04 {
  background: #9e57ac;
}
 
.fl05 {
  flex-basis: 100%; /*Размер блока*/
  height: 3em;
  background: #356346;
}
 
.content {
  width: 200px;
  margin-top: 5px;
  background: red;
}
Но эта зараза располагает все красные блоки вертикально... Почему?? Ведь по умолчанию justify-content у родителя установлен на flex-start так же как и в корневом он прописан.
Ответ:
Сообщение от Fedor92
alterak, ширину, то оставьте...
о даа! Спасибо большое, будем знать теперь.
Вопрос: Выравнивание строки и элемента внутри flex

Доброго дня уважаемые коллеги. Столкнулся с проблемой. Не могу правильно выравнять строку и псевдо-элемент внутри flex-контейнера.
Что у меня получилось:


Как надо:


Вот мои стили:

Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.mainActions {
  width: 20rem;
  /* 280px */
  height: 15rem;
  /* 210px */
  background-color: #0081CC;
  border-radius: 5px;
  border: 1px solid #4AB6F5;
  align-self: center;
  margin-top: -25%;
  display: flex;
  flex-flow: column nowrap; }
  .mainActions a {
    border: 1px solid black;
    flex-grow: 1;
    display: flex;
    flex-flow: row nowrap;
    text-align: center;
    align-items: center;
    justify-content: space-around; }
    .mainActions a:before {
      content: ""; }
    .mainActions a:first-of-type:before {
      width: 2.21429rem;
      /* 31px */
      height: 2.14286rem;
      /* 30px */
      background: url(/img/buy.png) no-repeat; }
    .mainActions a:nth-child(2):before {
      width: 2.21429rem;
      /* 31px */
      height: 2.21429rem;
      /* 31px */
      background: url(/img/upgrade.png) no-repeat; }
    .mainActions a:last-of-type:before {
      width: 2.64286rem;
      /* 37px */
      height: 2.71429rem;
      /* 38px */
      background: url(/img/service.png) no-repeat; }
А вот разметка:
Код HTML5
1
2
3
4
5
 <span class="mainActions">
                          <a href="#">Купить/Продать</a>
                          <a href="#">Апгрейд</a>
                          <a href="#">Поиск/Предложение услуг</a>
                      </span>
Помогите, пожалуйста.
Ответ: Неужели никто не знает, можно ли при такой разметке, с помощью flex, выравнять элементы по требуемой схеме?

Добавлено через 14 минут
Тему можно закрывать. Все-таки оставил свое решение
Всем спасибо.
Вопрос: Динамически созданное содержимое div выходит за границы flex-контейнера

помогите пожалуйста. вот код:
<section>
<div class="content">
<div class="1"><div>text</div><div>text</div></div>
<div class="2"><div>text</div><div>text</div></div>
<div class="3"><div>text</div><div>text</div></div>
<div class="4"><div>text</div><div>text</div></div>
<div class="5"><div>text</div><div>text</div></div>
<div class="6"><div>text</div><div>text</div></div>
<div class="7"><div>text</div><div>text</div></div>
</div>
</section>
<section>, <div class="content">, <div class="[1,2,3,4,5,6,7]"> - flex-контейнеры.
содержимое класcа content создается динамически. с созданием его содержимого и при flex-direction: row; вложенные дивы не переносятся на другую строку при достижении правого края родительского дива. они выходят даже за границы body. этих дивов должно быть не ограниченное количество. получается, что чем больше дивов, тем больше становится прокрутка. в документ подключен bootstrap, но по-некоторым соображениям в этой секции он не применяется, т.е. секция и ее содержимое не являются потомками бутстраповского класса container/container-fluid. подскажите, что сделать, голову уже сломал
Ответ:
Наверно в твоем случае флексы не подходят, и придется юзать float: left; с каким-нибудь min-height. Скорее всего получится какая-то хрень, поскольку твои блоки будут мешать друг другу. Лучше всего будет заюзать что-то типа
Вопрос: Фиксирование flex-контейнеров

У меня есть <div> -контейнеры, вверху и внизу.

Я пытался зафиксировать верхний

$(window).scroll(function() {
                $(selector).css('top', $(document).scrollTop);
            });



этот код не работает.

/*фиксирование верхнего информационного блока;
        *
        * outerWidth() - Возвращает ширину элемента,
        * включая правые и левые внутренние отступы, размер рамки.
        * Так же могут быть включены и внешние отступы.
        *
        * $(window) - получаем объект  Window, который является центром
        * прикладных интерфейсов клиентского JavaScript.
        * Он представляет окно веб-браузера или фрейм,
        * а сослаться на него можно с помощью идентификатора `window`
        *
        * offset() - задает или возвращает значение координат для выбранных элементов
        * (относительно документа).
        * При получении значений координат этот метод возвращает объект
        * с двумя свойствами:
        * -   позиция элемента от верхнего края документа в пикселях (top).
        * -   позиция элемента от левого края документа в пикселях (left).
        * $height_element - высота элемента, который фиксируется
        * .scroll() - привязывает JavaScript обработчик событий
        * "scroll" (срабатывает при прокрутке элементов),
         * или запускает это событие на выбранный элемент.
         * scrollTop() - Получает значение отступа прокрутки сверху для первого элемента в наборе.
        * */
        function fixedSelectorInfoHeaderFlex(selector) {


            var $elemFixed = $(selector);
            var outerWidth = $(selector).outerWidth;

            $(selector).css('width', 'outerWidth');
            var $window = $(window);

            var $offsetElement = $elemFixed.offset();

            var $height_element = $offsetElement.top;

            $window.scroll(function () {

                var $scrollTop = $window.scrollTop;

                if($scrollTop > $height_element ){
                    $elemFixed.addClass("fixed");
                } else {
                    $elemFixed.removeClass("fixed");
                }
            });

            $('.' + 'fixed').css({
               'position': 'fixed',
                'z-index' : '9999',
                'top' : '0'
            });
        }

то же не работает

Можете привести рабочий код ?
Ответ: Это решение для footer, но оно не заработало

/*Фиксирование контейнера внизу страницы.
* height - устанавливает высоту области содержимого элемента
* browserHeight - высота текущего окна браузера;
* .outerHeight() получает текущее вычисленное значение
* внешней высоты (включая внутренние отступы - padding,
* границы - border и
* при необходимости внешние отступы - margin)
* для элемента;
* true - указывает на то, что нужно включить в расчеты,
* внешине отступы (margin);
* contentOuterHeight - высота основного блока с внешними отступами
* contentHeight - высота основного блока без учета внешних данных
* contentHeightMarginPaddingBorder - вычисляем полную высоту осовного блок
* (блок между header и footer);
* minHeightForContent - минимальная высота для основного блока.*/
function fixedContainerBottom(selector) {

    var browserHeight = $(window).height();
    var footerOuterHeight = $(selector).outerHeight(true);


    var contentOuterHeight = $('.' + options.selectorForCreateTable).outerHeight(true);
    var contentHeight = $('.' + options.selectorForCreateTable).height();

   var contentHeightMarginPaddingBorder = contentOuterHeight - contentHeight ;

    var minHeightForContent = browserHeight - footerOuterHeight - contentHeightMarginPaddingBorder;

   /*переопределяем стиль, для основного блока*/
    $('.' + options.selectorForCreateTable).css({

        'min-height': 'minHeightForContent'

    });

    handlerEventResizeWindowBrowser(selector);

}

/*обработчик события на изменение размера окна-браузера*/
function handlerEventResizeWindowBrowser(selector) {
    $(window).resize(function () {
        fixedContainerBottom(selector);
    });
}
Вопрос: Как сделать чтобы текст не заходил на другой блок?

Как сделать чтобы не зависимо сколько текста в блоке, что бы блок растягивался за текстом.
То-есть у меня огромный текст и он вводится в блок контейнер, и когда заканчивается блок что бы текст не заходил на другой блок а был в этом контейнере, ну что бы контейнер растягивался в зависимости от текста.
Ответ: я сделал фиксированые блоки и проблема решилась.
Делаю так:
CSS
1
min-height: 100px;
На счет правильности я не уверен)
Вопрос: Изменить ширину блоков

Хочу что бы левый контейнер был чуть больше, а правый чуть меньше сделать. Сайт
Вот классы с левого контейнера
HTML5
1
2
3
4
5
6
7
8
9
10
<div class="lb-block-wrapper lb-navigation lb-navigation-main">
<div class="lb-block-content lb-list-reset">
<ul>
<li><a href="/">На главную</a></li>
<li><a href="/news/">Новости</a></li>
 <li><a href="/">Написать нам</a></li>
<li><a href="#">Правообладателям</a></li>
</ul>
</div>
</div>
Вот с файла с css эти классы

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Blocks
---------------------------------------------------------------------------------------------------- */
.lb-block-wrapper {position:relative; margin-bottom:20px}
.lb-block-title h3 {font:normal normal 19px/1em Tahoma, Geneva, sans-serif}
.lb-block-content {}
 
 
/* Main navigation
------------------------- */
.lb-navigation-main li a {
  display:block;
  height:30px; line-height:30px;
  text-indent:40px;
  color:#C5D1D5; background:url(../images/lb-col3-elem.png) no-repeat -540px 0;
}
.lb-navigation-main li.first a {border-radius:3px 3px 0 0;}
.lb-block-content li.last a {border-radius:0 0 3px 3px;}
.lb-navigation-main li.last a {border-radius:0 0 3px 3px;}
.lb-navigation-main li a:hover {text-decoration:none; color:#FFF; background-position:-790px 0}
 
 
/* Main area
-------------------------------------------------- */
#lb-main {
  position:relative; margin-top:75px;
  width:100%;
  background:#FFF url(../images/lb-main-elem.png) repeat-y 0 0
}

Хотя скажите как левый контейнер удалить, оставить только правый контейнер
Ответ: Я сделал как вы сказали, но всё равно еще остались то что надо убрать
Вот проверьте, сверху еще штучка белая остаётся, и полоса которая до низу идёт тоже убрать надо
Вопрос: Блок по фактиеской ширине контейнера во FLEX

Пример:

Как сделать, чтобы блок content был бы равен фактической ширине блока header, а не ширине окна?
Ответ: В стилях у содержимого (селектор .content) и заголовка (селектор .header) уберите объявление ширины элементов. Также, возможно, вы захотите добавить объявление контейнеру (селектор .container, объявление width: min-content;), отвечающее за то, чтобы его ширина была не больше самого широкого элемента!

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  width: min-content;
}

.header {
  border: solid 1px red;
}

.content {
  border: solid 1px green;
}
Вопрос: Flex-контейнер с input элементами расширяет границы основного блока

Основной блок содержит 2 блока
1-й с некоторым текстом
2-й flex блок с input элементами

2-й блок как будто не видит <b>ширины</b> основного блока, которую <b>задает 1-й блок</b> (sometext)
и расширяет основной.

Подскажите как решить данную проблему ?

Пример:


Но если вместо input (class='inp') вставить div то все приходит в норму:



HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
.cont { 
            position: absolute;
            top : 200px; left: 30px;
            border: 1px solid #ccc;
        }
        .ctrl {  
            display: flex; 
            width: 100%;
            flex-direction: row;
            border: 1px solid#ccc; 
        }
        .btn { 
            flex: 0 0 auto;
            
        }
        .inp {
            flex: 1 1 auto;
            width: 100%;
        }
</style>
<div class="cont">
       <div class="sometext">555 5555 5555 5555 5556</div>
       <div class="ctrl">
                    <input type="button" class="btn"  value="<<" />
                    <input class="inp" type="text" />
                    <input type="button" class="btn" value=">>" />
        </div>
            
</div>
Ответ: Правильно, не учел ширину input по дефолту. width:0 решил мою проблему.