1

This is with reference to the question I posted yesterday Link to yesterday's post Everything worked, But having issue breaking the rows now. As in the picture below the row "G" has "H" & "I" on the same row. Just trying how to have every alphabet and its channels on its own row. I have attached the HTML too at the bottom. Please advise. Screenshot of the result

<div class="w3-container w3-threequarter">
  <ul class="w3-ul w3-card-1" *ngFor="let head of channelDisplayHeads">
    <h1 align="center" style="background-color:#0083BC;">
      <font color="white">{{ head }}</font>
    </h1>
    <ng-container *ngFor="let channel of channelList">
      <li class="list-group-item logoDisplay" *ngIf="channel.channel.substr(0, 1) === head">
        <img class="w3-image" src="{{ channel.logo }}" align="center" alt="{{ channel.channel }}" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">{{ channel.cbsCode }}</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">{{ channel.pickCode }}</font>
        </span>
      </li>
    </ng-container>
  </ul>
</div>
Improve this question
7
  • Just trying to have each alphabet and its channels in its own row. Commented Dec 15, 2017 at 5:44
  • 1
    you can set width:100%; or try w3-card-12 Commented Dec 15, 2017 at 5:45
  • On what part of the code I set that? Commented Dec 15, 2017 at 5:47
  • in your ul tag change class to w3-card-12 Commented Dec 15, 2017 at 5:48
  • w3-card-12 didn't work, I set it on the ul class. Commented Dec 15, 2017 at 5:49

1 Answer 1

Reset to default
1

working copy of above question @Chris Happy and @Sumchans https://codepen.io/kalaiselvan/pen/xpGyzq

.w3-ul > h1{
width: 40px;
float: left;
}
.logoDisplay{
float: left;
}


.w3-ul > h1, .logoDisplay{
display: inline-block; // if need use !important
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container">

<ul class="w3-ul w3-card-12" style="clear:both" >
   <h1 align="center" style="background-color:#0083BC;">
      <font color="white">heading</font>
    </h1>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
</ul>
<ul class="w3-ul w3-card-1" style="clear:both">
   <h1 align="center" style="background-color:#0083BC;">
      <font color="white">heading</font>
    </h1>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
  <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
</ul>
<ul class="w3-ul w3-card-1" style="clear:both">
   <h1 align="center" style="background-color:#0083BC;">
      <font color="white">heading</font>
    </h1>
     <li class="list-group-item logoDisplay">
       <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">code</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">pickcode</font>
        </span>
     </li>
</ul>

</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That worked like a charm. Thanks for providing an example code snippet as well. Also just checking certain alphabets have more channels so they get stacked up at the bottom when they hit the width limit, how do I display them by not getting them into the column of the alphabets?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.