0

I have some data which should be displayed in 5 columns. The current code works well and the data is picked from the database and displayed correctly in the first 5 columns (each column has 7 data).

But after the fifth column the next column should start below the first column, instead it starts from the second column and goes on.

Below is the code currently used.

 <li><a href="/c/@Model.CatList[0].Id/all/@Model.CatList[0].Name" class='white'>@Model.CatList[0].Name</a></li>

                      @for (int i = 1; i < Model.CatList.Count(); i++)
                      {
                            <li><a href="/c/@Model.CatList[i].Id/all/@Model.CatList[i].Name" class='white'>@Model.CatList[i].Name</a></li>


                          if (i % Model.FooterCount == 0)
                          {

                               @Html.Raw("</ul><ul>");
                                <li class='itemCaption f17o'>&nbsp;</li>
                          }

                      }
halfer
  • 19,824
  • 17
  • 99
  • 186
user1987035
  • 23
  • 4
  • 1
    Is this a grid layout you are trying to use or is it tabular data? Can you provide a realistic example of the rendered html? I suspect the issue you are running into is the first block is taller than the others, and you are floating your blocks. Therefore at the sixth block it will float to the left and hit the first block. There are different ways to solve the problem, depending on the goals of the layout. Does it need to be responsive to browser width? Should it be fixed to 5 columns always? Is it really tabular data (that should use a table)? – Colin Young May 08 '13 at 15:19
  • yes you are right there. the first column is taller than others , that is also an issue which i face in this. it should be fixed to 5 column always . the sixth column should come under the first column as another set consisting of the same number of data as in the other column. – user1987035 May 08 '13 at 16:32
  • its a fluidic approach and i dont intend to use a table..its just a set of brand names stored in the database which i want to show at the footer of my website in columns.. 5 or 6 or more (depends)in each column..and when the limit for column is reach the next item puled from database must move to a different column, until 5 colmns are made in a row at the footer.After the first set of 5 columns are made , if there is still data left to be pulled they must be put in a new column in a second row just below the first set.. thus making another set of 5 column rows ..i hope this clears the doubt. – user1987035 May 08 '13 at 16:45

1 Answers1

1

Without more details of the exact html, you'll want to add a style="clear: left" on the first block for each row of your display. Something like:

@{
    int cellCount = 1;
    int columns = 5;

    var items = Model.CatList.Take(Model.FooterCount);
}

@while(items.Count > 0)
{
    string style = "float:left;"
    if(cellCount % columns == 0)
    {
        style += "clear:left;"
    }

    <ul style='@style'>
        @if (cellCount != 1)
        {
            <li class='itemCaption f17o'>&nbsp;</li>
        }

        @foreach(item in items)
        {
            <li>
                <a href="/c/@item.Id/all/@item.Name" class='white'>@item.Name</a>
            </li>
        }
    </ul>

    @{
    items = Model.CatList.Skip(cellCount * Model.FooterCount).Take(Model.FooterCount);
    cellCount++;
    }
}

I didn't like the embedded raw html closing the ul tags, so I modified the code to avoid that. I think it also expresses the intent more clearly.

Colin Young
  • 3,018
  • 1
  • 22
  • 46
  • i tried but then here every column (new and old) goes to the left – user1987035 May 09 '13 at 04:25
  • The funny this is if i do not call the first data and start the loop from calling the second data ,Then it works fine as wanted – user1987035 May 09 '13 at 08:41
  • Assuming you have FooterCount items in each UL and every 5 UL you want to start a new row. Updating code example. – Colin Young May 09 '13 at 13:08
  • but why is the array here? CatList[i] where did i come from? – user1987035 May 09 '13 at 16:51
  • That was a cut and paste from your original sample that I didn't update. It's updated now. The code isn't tested since I don't have your view model -- you'll need to understand it and test it yourself. [foreach](http://msdn.microsoft.com/en-us/library/ttw7t8t6(v=vs.80).aspx), [Skip and Take](http://stackoverflow.com/questions/10950388/linq-to-entities-skip-and-take) – Colin Young May 09 '13 at 17:04
  • thank you brother. coooooooool :D ....it worked.. but why is that the first column is raised a little above than all the others?...by the way where do i vote for you here :) – user1987035 May 09 '13 at 17:59
  • We'd need to see the rendered HTML and stylesheets to answer that. I suspect there's a border or margin on the first one. You can accept answers (and up-vote) in the top left margin of the answer that you are accepting. – Colin Young May 09 '13 at 19:04