ServiceNow Service Portal Flexboxes

Наша команда создает страницу Service Portal в ServiceNow и работает с проблемами форматирования с помощью flexboxes. У нас есть контейнер со строкой с тремя столбцами, и каждый столбец будет содержать виджет. В настоящее время, это выглядит следующим образом:ServiceNow Service Portal Flexboxes

Мы хотим, чтобы все три виджета, чтобы быть одинаковой высоты и ширины. Вы можете видеть, что виджеты Maps и Youtube имеют одинаковый размер, но виджет Open task слева не будет расширяться, чтобы заполнить пробел. Вот как я определил классы:

.wrap { 
    display: flex; 
    flex-wrap: wrap; 
    width: 100%; 
    height: 100%; 
} 

.wrap_item { 
    background-color: yellow; 
    border: black 1px solid; 
    padding: 10px; 
    display: flex; 
    flex-direction:column; 
}

Похоже, обертывание и wrap_items работает правильно, так как желтые участки распространяются все пространство, но по некоторым причинам я не могу получить Open Task виджета себя для заполнения всего пространства.

карты и Youtube виджеты заключаются в бутстраповских реагирующих тегах: <div class="content embed-responsive embed-responsive-16by9">

код Открытости задач виджет выглядит следующим образом:

<div id="something" class="{{::c.options.class_name}} wrapper label-{{::c.options.color}}" ng-if="c.options.table"> 
    <a ng-href="?id={{::c.options.sp_page_dv}}&table={{::c.options.table}}&filter={{::c.options.filter}}"> 
     <h1><i class="fa fa-{{::c.options.glyph}}" aria-hidden="true" ></i>&nbsp;{{c.data.count}}</h1> 
     <h3>{{::c.options.title}}</h3> 
    </a> 
</div> 

.wrap_item #something { 
    background-color: $white; 
    text-align: center; 
}

Я пробовал все с определением высоты = 100% для div, body, html, но ничего не работает. Любые идеи о том, как исправить это?

Спасибо!

@Michael_B, это то, что она выглядит (я добавил в некотором тексте ниже)

источник

2017-02-03 Dave

боксировать ли в открытых задачах расширения полной высоты, когда '.wrap-item' является рядным направление гибкого контейнера? –

Привет, Майкл, нет. Я вставил скриншот того, как он выглядит выше. Благодаря! – Dave

Вы установили 'flex: 1' на виджет? – LGSon

Я разместил вопрос в ServiceNow сообщества и Travis предоставили очень тщательный ответ: https://youtu.be/P_6Ywdx5RvM

источник

2017-02-06 21:50:32 Dave

Гибкий блок работает правильно, вы можете видеть, что, проверяя элемент с классом wrap_item, но ваш виджет не расширяется, это происходит потому, что между вашим виджетами и элементом контейнера осталось несколько узлов.

Обычно это будет пролет и div. Но это может измениться позже (маловероятно) в некоторых будущих выпусках.

Вы должны сделать каждый дочерний дисплей гибким до вашего виджета.

.wrap_item, .wrap_item > span, .wrap_item > span > div { 
    display: flex; 
    flex: 1 0 auto; 
}

Благодаря

источник

2017-06-29 08:52:51

ответ

Смежные вопросы