Challenges arise when attempting to generate a box with a number below it using a razor loop

I am attempting to create a design similar to the one shown in the image below:

However, I am encountering difficulties because it needs to be generated within a foreach loop.

Currently, my code looks like this but does not resemble the desired image. I am unsure how to achieve the desired result:


@{
    int counter = 1;

    @foreach (IconsViewModel item in Model.AllIconsModel)
    {
        <a href="#" class="box"></a>
        <p>@(counter++)</p>
    }
}

CSS:

.box 


{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    float: left;     
}

I would greatly appreciate any assistance in resolving this issue.

javascripthtmlcssasp.net-mvcrazor

Answer №1

Ensure your HTML is structured as follows:

HTML

<div class="container">
    <div class="section">
      <a href="" ></a>
      <p></p>
    </div>
    <div class="section">
      <a href="" ></a>
      <p></p>
    </div>
</div>

CSS

.container{
  text-align:center;
}

.section{
  display:inline-block;
  *display:inline;/*For IE*/
  *zoom:1;
  text-align:center;
}
.box
{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    display: block;     
}

JS

 @{
       int counter = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {
              <div class="section" >
                <a href="#" class="box"></a>
                <p>@(counter++)</p>
              </div>
          }               
  }

Answer №2

Your issue seems to be with the <p> HTML tag, which is causing a line break after each box.

Answer №3

Place both items in a box together.

Here is an example:

 @{
       int count = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {
              <div class="lefty" >
                <a href="#" class="box"></a>
                <p>@(count++)</p>
              </div>
          }               
  }

CSS:

.lefty
{
    float: left;     
}
.box
{
    border: 1px solid black;
    width: 65px;
    height: 65px;  
}

You have the freedom to modify it further, such as aligning the text in the center.

Answer №4

Unsure if the <p> tag is needed, but consider placing the counter inside the <a> tag for indexing boxes, with a display:block; in the .box CSS to make the tag appear as a square.

For clarity, utilize the following CSS:

.box
{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    display: block;     
}

Edit: Consider enclosing the tags in a div wrapper as an alternative method:

<div class="wrapper">
   <a href="#" class="box"></a>
   <p>@(counter++)</p>
</div>

Ensure to give the wrapper class text-align:center, alongside the .box class mentioned above.

Edit: As per sandeep's comment, remember to move the float property from the box class to the wrapper class as well.

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

Discover the method to activate the back button feature on ajax pages

I am currently working on a website that is navigated in the following way: $(document).ready(function () { if (!$('#ajax').length) { // Checking if index.html has been loaded. If not, navigate to index.html and load the hash part with ajax. ...

javascriptjqueryajaxbrowser-historyhtml5-history

Is there a way to transition an element from a fixed layout position to an absolute layout position through animation?

I am looking to create a dynamic animation effect for a button within a form. The goal is for the button to move to the center of the form, while simultaneously undergoing a horizontal flip using a scale transform. During the midpoint of this animation, I ...

javascriptjqueryhtmlcss

What is the best way to create a header that displays without the vertical scroll bar?

Is it foolish or out of the ordinary to ask a question without making an effort? I'm looking for a solution to have a header without a vertical scroll bar like in image 2 on the home page design. I want the top yellow header strip to be visible witho ...

csshtml

define` module root path

Currently, I am working with Typescript and my source files are located in the src directory. After transpiling, Typescript generates the output in the lib folder. This means that when I need to import components from my package, I have to specify the full ...

javascriptnode.jsnpm

What is the best way to automatically sync local storage data with the server in React Native when the device connects to the internet?

Exploring the world of React Native app development, I find myself facing a challenge: how can I implement automatic data synchronization from local storage to the server when the device is connected to the internet? Any insights or tips on achieving thi ...

javascriptandroidreactjsreact-nativemobile-application

The author's voice kicks in with a warning message whenever he makes a mistake with a command

Hello everyone, I hope you are having a great day! Today, I am looking for a code that will kick someone named "A" from the voice channel if they do not follow a command correctly. Let me explain my requirements through the code snippet below: const discor ...

javascriptnode.jsdiscord.jsbots

Conceal a div and label after a delay of 5 seconds with a JavaScript/jQuery function in C#

Here is a sample div: <div class="alert alert-success alert-dismissable" runat="server" visible="false" id="lblmsgid"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ...

javascriptc#jquery

The icon in Material UI button is missing from the display

The button is functional, but the icon inside it isn't displaying correctly:https://i.sstatic.net/MXhIH.jpg Here is the code for the button: <Button color="secondary" aria-label="add an alarm"> <AlarmIcon></AlarmI ...

javascriptreactjsmaterial-ui

How can Angular be used to dynamically show or hide an element based on its height?

Is there a way in Angular to display a "Read More" link once the height of a paragraph reaches 200px? I'm looking for an elegant solution. Here are my elements: <section class="mynotes" ng-if="MyController.mynotes"> <p ng-bind="MyController ...

javascripthtmlcssangularjs

Tips for managing JavaScript errors

<ItemTemplate> <tr class="row"> <td style="width: 88%;"> <input id="hdnPackageProuctId" type="hidden" value='<%# Eval("ID")%>' /> <div style="float:left; margin-top:5px;height: ...

javascriptasp.net

Tips for avoiding caching in jQuery on an ASP.NET website

I am currently working on an MVC4 app using ASP.NET with jQuery. The project loads all pages initially and then updates the content through AJAX calls. One issue I have noticed is that after logging off from the app, all pages remain in the cache. This ca ...

jqueryasp.net-mvc

Tips for retrieving next-auth authOptions from an asynchronous function

I need to retrieve values from AWS Secrets Manager and integrate them into the authOptions configuration for next-auth. The code implementation I have is as follows: export const buildAuthOptions = async () => { const secrets: AuthSecrets = await getS ...

javascripttypescriptnext.jsnext.js13next-auth

I am currently working on coding a function that will search an array to determine if a specific item is present. If the item is found, a variable will be set to true;

So, I have this array of prices for various items like bread, apple, noodles, beef, milk, and coke. const prices = [ ["bread", 20], ["apple", 50], ["noodles", 100], ["beef", 40], ["milk", 32], ["coke", 25], ]; And here's the JavaScript co ...

javascriptarraysfor-loopmultidimensional-array

Always keeping the screen in view within a div that is rotated along the Y-axis

Here is the code: html <div id="back"> <div id="right_text">TEST</div> <div id="left_text">TEST2</div> </div> <div id="mid"></div> css #mid { border: 1px solid black; height: 100px; widt ...

htmlcssrotationcss-animations

Replace HTML elements with AJAX and JavaScript

Working with MySQL data in pyramid presents a challenge as I need to dynamically change an HTML if statement based on the results from JS ajax calls. The main page receives data from views.py and passes it to the .mak script. The key views here are the ma ...

javascriptpythonhtmlajax

Customizing the style of the datepicker in Material UI with makeStyles is proving to be

I am having trouble adding a border to the datepicker below. I tried applying inline styles in Web inspector and it worked. https://i.sstatic.net/Q4KAC.png However, when I attempt to apply the style using makeStyles, nothing happens. demo.js import &qu ...

javascriptcssreactjsmaterial-ui

Clicking on the accordion twice does not alter the position of the arrow

I have implemented an accordion using "up" and "down" arrows. It works well, but when I click on the panel title again, the arrow does not change direction. Here is the issue: In my scenario, I have used "A" and "B" instead of the arrows. When the page l ...

jquerycss

Having trouble achieving the grid style in bootstrap

Can someone assist me in coding this design using Bootstrap 3? https://i.sstatic.net/ZBphd.png Unfortunately, I am having trouble implementing it. Could someone help me out? This is what I have tried so far: <div class="row"> <div cla ...

htmlcsstwitter-bootstrap-3

What is a way to leverage the array or object data within the method object in order to reference the specific link in VUEJS?

How do I utilize the "LINK" property in the methods object? You might be able to infer my intentions, but just in case, here's what I'm aiming for: In Vue.js, I am attempting to extract all the data from the Data method's object so that I ...

javascripthtmlvue.js

Searching within an iFrame for an element using the getElementById method

Hey, I'm working with an iframe and trying to reference a CSS element that is located on the source page. Here's the iframe code: <iframe id="CPHNavBar_TBDC081D1008_frameSticky" src="/stickyserviceavailabilitycheck"></iframe> I want ...

javascripthtmlcss