Billy Logan Billy Logan - 7 months ago 10
HTML Question

How to place an icon on the first line and text on the second line?

The title pretty much explains itself. I have flex container and on the inside I have two divs inside column that are supposed to be on different lines but I can't get them to work like that.

Tags like br, p won't work for some reason.

enter image description here

JSFiddle

HTML

<ion-content has-header="false">
<div class="row no-padding">
<div class="col dashboard-top-item center">
<div class="ion-ionic"></div>
<div>Second line</div>
</div>
</div>
</ion-content>


CSS

.dashboard-top-item {
border-width: 0px 2px 0px 2px;
border-style: solid;
border-color: #444444;
background-color: #595858;
color: #D0D0D0;
height: 21vh;
font-size: medium;
display: flex;
justify-content: center;
align-items: center;
}


How could I do this? Thank you in advance!

Answer

Using flex-flow:

Just add into yours .dashboard-top-item this CSS property with value:

flex-flow: column;

Result: JSFiddle.

Using flex-wrap and min-width:

This one is a little bit more complex.

.dashboard-top-item {
  border-width: 0px 2px 0px 2px;
  border-style: solid;
  border-color: #444444;
  background-color: #595858;
  color: #D0D0D0;
  font-size: medium;
  padding: 4vh; /* not fixed height */
  display: flex;
  flex-wrap: wrap; /* allow flex to wrap */
}
/* in addition: */
.dashboard-top-item > div {
  flex: 1;
  box-sizing: border-box;
  text-align: center;
}
.ion-ionic {
  min-width: 100%;
}

Result: JSFiddle.

Comments