Наша команда создает страницу 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> {{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, это то, что она выглядит (я добавил в некотором тексте ниже)
боксировать ли в открытых задачах расширения полной высоты, когда '.wrap-item' является рядным направление гибкого контейнера? –
Привет, Майкл, нет. Я вставил скриншот того, как он выглядит выше. Благодаря! – Dave
Вы установили 'flex: 1' на виджет? – LGSon