Split the output into two separate columns in a cshtml file using a foreach

Is there a way to modify my current code so that the output is displayed in two columns instead of one? Would using flex grid be the best approach, or is there another method I should consider?

<div class="col-12 box-container">
     <div class="col-6">
       @foreach (var s in Model.StatusVM
       .Where(a => a.subHtmlID == x.HtmlID)
       .OrderBy(a => a.IDName)
       .ThenBy(a => a.SortOrder)
       .ThenBy(a => a.HID))
       {
           @Html.Partial("_MusicRow", s)
       }
     </div>
</div>

The current output appears as follows...

item 1
item 2
item 3
item 4

<div class="col-12 box-container">
     <div class="col-6">
      <a class="status-row" href="#">item 1</a>
      <a class="status-row" href="#">item 2</a>
      <a class="status-row" href="#">item 3</a>
      <a class="status-row" href="#">item 4</a>
     </div>
</div>

I am aiming for the following layout:

item 1   item 2
item 3   item 4
c#htmlcss.net

Answer №1

Utilizing the power of bootstrap itself (if you are looking for an easier solution). By using Nested Cols, enclosing your partial view with a 

<div class="col-6"></div>
will yield the desired outcome.

For example:

<div class="row box-container">
    <div class="col-6">
        <div class="row">

            @foreach (var s in Model.StatusVM
            .Where(a => a.subHtmlID == x.HtmlID)
            .OrderBy(a => a.IDName)
            .ThenBy(a => a.SortOrder)
            .ThenBy(a => a.HID))
            {
                <div class="col-6">
                    @Html.Partial("_MusicRow", s)
                </div>
            }
        </div>
    </div>
</div>

Answer №2

It appears from your code that you are utilizing Bootstrap, and if that assumption is correct, there seems to be a minor error. You should modify the parent class from col-12 to either row or row col-12.

<div class="row box-container">
 <div class="col-6">
   @foreach (var s in Model.StatusVM
   .Where(a => a.subHtmlID == x.HtmlID)
   .OrderBy(a => a.IDName)
   .ThenBy(a => a.SortOrder)
   .ThenBy(a => a.HID))
   {
       @Html.Partial("_MusicRow", s)
   }
 </div>

Answer №3

It's uncertain what the exact CSS code is driving your current code, but based on the markup provided, we can achieve the desired layout like this:

.box-container .col-6 {
  display: flex;
  flex-wrap: wrap; /* Ensures items wrap to next row after taking up 50% width */
}

.box-container .col-6 > a {
  flex-basis: 50%;
}
<div class="col-12 box-container">
  <div class="col-6">
    <a class="status-row" href="#">item 1</a>
    <a class="status-row" href="#">item 2</a>
    <a class="status-row" href="#">item 3</a>
    <a class="status-row" href="#">item 4</a>
    <a class="status-row" href="#">item 5</a>
    <a class="status-row" href="#">item 6</a>
    <a class="status-row" href="#">item 7</a>
    <a class="status-row" href="#">item 8</a>
  </div>
</div>

Answer №4

To make it simpler, just move the col-6 inside the for loop:

    <div class="row text-center m-auto w-100 p-0">
foreach(var item in List)
{
    <div class="col-6 text-center w-50 m-0">
        <table class="table table-responsive table-striped"> 
        <tr>                           
                <td style="text-align: left">
            @item.Name
            </td>
            <td class="text-center">
                @item.Time
            </td>

        </tr>
    </table>
   
</div>
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The program cannot locate the reference to the 'NUnit' type or namespace

Recently, I encountered an issue with a c# code that was exported from Selenium IDE. using System; using System.Text; using System.Text.RegularExpressions; using System.Threading; using NUnit.Framework; using Selenium; namespace SeleniumTests { [TestFixt ...

c#frameworksselenium

Is Bootstrap CSS cached by Chrome?

As I began a new project, I decided to tweak the color settings in bootstrap. During debugging in Visual Studio, everything appeared as intended. However, after publishing the site for the first time on a server, I noticed that the color change I made in ...

cssgoogle-chrome

Two sets of buttons, however, one set is carrying out the incorrect function

I am trying to create two button sets that, when clicked, are supposed to angle the text below them at 45 degrees. However, I am facing an issue where both set 1 and set 2 only control the text linked to button 1. I need each button set to control their ...

javascriptcssbuttonrotationrotatetransform

Revamping jQuery code to connect table rows with dynamic links following the integration of AJAX search functionality in the table

My HTML table was originally populated with server information and had a jQuery function that allowed users to click on the table rows to follow dynamic links based on the corresponding id in each row. I then added a script for a search/filter function us ...

phpjqueryhtmlajax

Bootstrap causing malfunction of JQuery bounce animation

Looking to create a bouncing popup on hover using Bootstrap (v3.0.0) panel, but encountering an issue where the panel changes its width after the bounce effect. For reference: http://fiddle.jshell.net/YxRvp/ If anyone has a solution for this problem, ple ...

jquerycsstwitter-bootstrapbounce

Resizing panel based on the text content within

In my WinForms application, I am looking to dynamically add UserControls that dock to the top. Here is an example of how I achieve this: this.Controls.Clear(); this.Controls.Add(myCustomControl(){Title="first", content="first text", Dock=DockStyle.Top}); ...

c#.netwinforms

CSS vertical alignment: Getting it just right

I am currently using Bootstrap and below is a snippet of the code I have implemented. <div class="row"> <div class="col-lg-6"><img src="#" alt=""></div> <div class="col-lg-6"> <h2>Heading</h2> ...

htmlcsstwitter-bootstrap

Is it true that setting the background size to cover does not actually stretch the image?

Hi, I seem to be having trouble stretching an image using the background-size property. Despite setting it to cover, one or two sides of the image are always getting cropped. What I really want is a way to distort the image so that it stretches to fit any ...

htmlcssbackground-imagepositioning

JavaScript is submitting an incorrect HTML form

I have a PHP script that retrieves items from a database and allows users to vote on them. Each item is associated with an HTML form containing an input text field and a submit button to enter the score. I also have a jQuery script on the same page that up ...

phpjqueryhtmlforms

What is the best way to showcase an array of objects in a table using AngularJS that updates

My technology stack includes angular.js for the front-end, node.js for server-side operations, and PostgreSQL for managing my database. Currently, I have a list of values stored in the database: https://i.sstatic.net/TuO6B.png Upon checking the controll ...

htmlangularjshtml-table

Is there a way to pause the execution of code and prompt for confirmation before continuing?

Typically, I utilize the following code snippet in the backend of my application to display a pop-up message to the user after a successful entry has been saved: ScriptManager.RegisterStartupScript(this, this.GetType(), "pop", "<script>alert('C ...

c#javascriptjqueryasp.netajax

"Endowed with improper dimensions, the BootStrap collapse feature

Yesterday, I posted about an issue with BootStrap and panel collapsables causing graph sizes to become distorted. The post was locked because there was no accompanying code. I have now created a code snippet for you all to see the exact problem I am facing ...

javascriptjquerycsstwitter-bootstraphighcharts

Is there a way to achieve a transparent background while animating the second text?

I am seeking to create a unique typography animation that involves animating the second text, which is colored and consists of multiple text elements to animate. The animation should showcase each text element appearing and disappearing one after the other ...

javascripthtmljquerycss

Tips for effectively managing the outcome of a one-time assignment

Imagine a scenario where Task1 sets up and returns an IDisposable object that needs to be utilized in a subsequent Task2, like shown below: Task.Factory.StartNew<Stream>(() => { // open and write stream }) .ContinueWith(prevTask => { ...

.nettask-parallel-library

Prompting Javascript Alert prior to redirection in ASP.NET

My current code is set up to display a message in an update panel while updating: string jv = "alert('Time OutAlert');"; ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "msg", jv, true); It's working well in displaying the me ...

c#javascriptasp.netajaxupdatepanel

Div with hidden scrollbars for smooth scrolling experience

Is there a way to create scrollable DIV's without visible scrollbars? While Mac OS 10.7-8 display no visible scrolls, other operating systems like Windows, Mac OS, and Linux show the scrollbars. How can I achieve scrollable divs without the scrollbars ...

htmlcss

The ability to choose only one option in a checkbox within a grid view column

In my grid view, I have a checkbox in the last column. I am trying to ensure that only one row can be selected at a time. <tr *ngFor="let permit of PermitDetails" (click)="GoByClick(permit)"> <td style="text-align: center">{{permit.TVA_BAT ...

htmlangular

Issues with ASP.Net C# Routing, HttpHandler, and HttpModule functionality not functioning as expected

I've been encountering numerous challenges with custom extensions and intercepting existing handlers. My Objective Based on stored options, I aim to have all 'virtual' extensions handled by specific handlers. The website generates pages dy ...

c#asp.netasp.net-4.0httphandlerhttpmodule

Using CSS to rearrange the order of specific div elements with the nth-child() selector when targeting different

I am attempting to design a centered navbar for a webpage. The navbar consists of 5 divs and my goal is to have the third div become the first one when the screen size goes below 600px. Here is the HTML code: <div class="mainmenu"> < ...

htmlcss

encrypt C# code to generate a decryption key

Recently, I encountered a challenge where I needed to decrypt a string encrypted using C# with a specific method. Here is the encryption method in C#: public static string KEY = "81736529"; public string EncryptString(string stringToEncrypt,string keyStr ...

c#phpencryption