Switch up the bullet format in a bulleted list item styling

Currently, I am populating a bulleted list with the code provided. It's working well, but I'm curious to find out if there's a way to change the bullet style for a specific list item based on a certain condition. Is it possible to have different bullet styles within the same list, or do they need to be uniform? Any insights would be greatly appreciated.

List<string> EventInfo = new List<string>();

// Add list content here

for (int i = 0; i < EventInfo.Count; i++)
{
    ListItem stuff = new ListItem();
    if (!string.IsNullOrWhiteSpace(EventInfo[i]))
    {
        stuff.Text = EventInfo[i];
        // Check for condition and modify bullet style for this item if met
        BulletedList.Items.Add(stuff);
    }
}

Answer №1

To achieve this effect, CSS can be used in the following manner:

ul
{
   list-style-type:circle;
}

Answer №2

Start by defining your css style:


li.activated { list-style-type:square; }

Next, ensure that your list items receive the appropriate class based on specific conditions.

for (int i = 0; i < EventInfo.Count; i++)
{
  ListItem item = new ListItem();
  if (!string.IsNullOrWhiteSpace(EventInfo[i]))
  {
    item.Text = EventInfo[i];
    // Check condition and change bullet style for this item     
    if(condition)
    {
      item.Attributes.Add("class", "activated");
    }
    BulletedList.Items.Add(item);
  }
}

Answer №3

To implement this feature in C#, you can utilize the code snippet provided below:

AddStyleToList("BulletedList", "Circle");

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

Bootstrap table showing message "loading in progress, please be patient"

I'm having an issue trying to load data from an API into a bootstrapTable but it seems to be stuck on "loading..". Can anyone help me figure out what's wrong with my code? Thank you in advance for your assistance! <table id="table" ...

Tips for activating a sticky navigation button by scrolling down slightly

Currently in the process of developing a website using React and focusing on optimizing the mobile version first. One feature I am working on is to have a sticky navigation bar that remains at the top after scrolling down. In the attached picture, there is ...

Which is better for creating hover effects: CSS3 or JavaScript?

When hovering over a link, I want to highlight a specific picture and blur the rest. Here's my HTML code: <body> <div id="back"> <div id="one"></div> <div id="two"></div> </div> ...

Establishing a connection between DataGridView and a database

When it comes to connecting a DataGridView with a database, I often find myself facing the decision of whether to use manually written code or utilize built-in mechanisms like datasets for insert/update/delete/select operations. One issue I encounter with ...

Tips for increasing a variable by one with each button click?

I have a simple JavaScript function called plusOne() that is designed to increment a variable by 1 each time a button is clicked, and then display the updated value on a webpage. However, I'm encountering an issue where the addition only occurs once. ...

Steps to design a unique input radio button with embedded attributes

In my current project, I am utilizing react styled components for styling. One issue that I have encountered is with the text placement within a box and the need to style it differently when checked. What have I attempted so far? I created an outer div a ...

Is there a way to customize the checkbox styles and icons in Material-UI React when hovering over them?

Incorporating material-ui into my current project, I've customized a Checkbox to display in red color. My goal is to have the checked Icon appear only when a user hovers over the Checkbox. However, it should remain hidden when not hovered. Unfortunat ...

Type content in HTML5

Can you help me with a simple question? I am currently working on building my portfolio using html https://i.stack.imgur.com/rxYRS.png I want to be able to click on an image and add the description of my choice. Right now, it is showing something else: ...

Using HTML, CSS, and jQuery to create a master-detail feature

I'm looking to implement a master-detail layout, so I decided to follow this tutorial for guidance: While trying to replicate the tutorial, I encountered an issue with my code. Here's the code snippet that I am working on: HTML/jQuery <!DO ...

I must negate the impact of the parent CSS file without directly countering it

Currently, I am developing web pages with "rtl" directionality. Within my shop.html template, I am utilizing a bootstrap component known as "breadcrumbs". As a result, I need the breadcrumbs to display from right to left. <div class="breadcrumb"> ...

Extracting information from a JSON array

Here is an example of my JSON format: { "data": { "translations": [ { "translatedText": "مرحبا" } ] } } I am trying to extract the value of the translated text without relying on json.net. However, I keep getting a null value return ...

The appearance of HTML is acceptable in a browser but appears differently in an email

I'm encountering an issue with email encoding. After reading an HTML file from disk and sending it through Gmail, the content appears distorted when received. Even the list bullets are messed up! Despite encoding the file as UTF-8, everything looks fi ...

The JSON Post Request functionality is encountering issues within ASP.NET5 MVC, whereas it is functioning properly in ASP.NET4.5 MVC

I am encountering an issue with a JSON post request to an MVC controller. It works fine in ASP.NET 4.5 but fails in the latest ASP.NET 5 release. Am I overlooking something in my setup? I have created a model, but I haven't bound it to a database. ...

Adaptable Semantic UI form design

Welcome, internet friends! If anyone out there has a moment to spare and is familiar with Semantic UI, I could really use some assistance... Currently, I am working on a form that looks great on larger screens like this: https://i.stack.imgur.com/cafc5.j ...

ASP .Net encountering OutOfMemoryException due to oversized resource file

Is there a more efficient way to add a 124MB resource file to my asp.net project without encountering an OutOfMemory exception during debugging? Could I be missing something in my approach? What would be the best method to make this large file accessible ...

What could be causing my CSS formatting from a linked style sheet to not be applied properly?

I've been trying to incorporate a YouTube video into my webpage using a CSS stylesheet, but I can't seem to get the video to display properly .youtube-video iframe, .youtube-video img, .youtube-video-2 iframe, .youtube-video-2 img { positi ...

Adjustable Height Feature for JavaScript Pop-Up Windows

I'm looking to design a popup window that has a fixed width and a height that adjusts based on the user's screen size. Is this even possible? I've searched through various websites but haven't found a solution yet. I came across a simi ...

Connect the CSS file with the EJS file

Can someone help me with linking a CSS file to an ejs file? I've tried the solution below but it's not working as expected .css code: body { background:url('img.jpg') no-repeat center center/cover; } .ejs code: <!DOCT ...

The background size does not adjust to the size of the viewport

I am encountering an issue with the background size on my webpage. When changing the viewport size on this page , the background does not adjust to the new viewport dimensions immediately. It seems to retain the previous dimension and only updates to the c ...

I encounter issues with HTML input fields becoming unresponsive whenever I attempt to apply CSS filters in IE8 for stretching the background

When I wanted to stretch a background image on my website so that it always fills the available window area regardless of resolution, I initially used background-size:cover;. Unfortunately, Internet Explorer doesn't seem to support valid CSS, so I had ...