Support with formatting a dynamic asp:CheckBoxList utilizing Bootstrap styling

I'm currently facing a challenge with styling my asp:CheckBoxList that is populated with values from a database. My framework of choice is Bootstrap 4.3.1 and I'm attempting to style the CheckBoxList using the default example below:

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>

Below is the code for my CheckBoxList:

<asp:CheckBoxList ID="CBLSymptoms" runat="server" RepeatDirection="Horizontal" CellPadding="9"></asp:CheckBoxList>

I attempted the following approach, but unfortunately, the CheckBoxList disappeared:

        <div class=" custom-control custom-checkbox my-1 mr-sm-2">
        <asp:CheckBoxList type="checkbox" CssClass="custom-control-input" ID="CBLSymptoms" runat="server" RepeatDirection="Horizontal" CellPadding="9"></asp:CheckBoxList>
    </div>

I would greatly appreciate any suggestions or advice on how to successfully achieve this styling.

c#cssasp.netbootstrap-4checkboxlist

Answer №1

If you're trying to use bootstrap classes with the CheckBoxList control, you'll need to create your own custom classes and apply them to a surrounding div element.

To ensure accessibility compliance, it's recommended to wrap the CheckBoxList in a fieldset.

Below are some CSS additions for styling:

.checkbox.checkboxlist input[type="checkbox"]
{
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}

.checkbox.checkboxlist label
{
    margin-bottom: 0;
    display: inline-block;
}

fieldset legend
{
    font-size: inherit;
}

fieldset .checkbox
{
    position: relative;
    display: block;
    padding-left: 1.25rem;
}

Here's an example of how you can structure the markup for the CheckBoxList:

<fieldset>
    <legend>Label for CheckBoxList</legend>
    <div class="checkbox checkboxlist">
        <asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow">
            <asp:ListItem Text="Option one"></asp:ListItem>
            <asp:ListItem Text="Option two"></asp:ListItem>
            <asp:ListItem Text="Option three"></asp:ListItem>
        </asp:CheckBoxList>
    </div>
</fieldset>

For more styling and accessibility tips for ASP.NET controls using bootstrap, you can visit my blog.

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

Tips for altering the appearance of a dropped item using JQueryUI sortable

I have a straightforward website where I need to implement the ability to drag and drop styled DIV elements between two containers. Utilizing JQueryUI's sortable function, this behavior was successfully achieved with the following code: $("#active-co ...

javascriptjqueryhtmlcssjquery-ui

Ways to select a single checkbox when other checkboxes are selected in JavaScript

var select_all = document.getElementById("select_all"); //reference to select all checkbox var checkboxes = document.getElementsByName("testc"); //retrieving checkbox items //function to select all checkboxes select_all.addEventListener("change", function ...

javascriptjqueryhtmlcss

Ways to adjust width and height for mobile devices on a website with HTML and CSS

My resume is currently uploaded to a website and looks great on desktop. However, when viewed on mobile, the width shrinks and the height extends, causing text overflow and an overall terrible appearance. I'm looking for a solution that will display m ...

htmlcssmobile

Utilize JavaScript to extract an image from an external URL by specifying its attributes (id, class)

Is it possible to fetch an image from an external website by using its CSS id or class in conjunction with JavaScript/jQuery's get methods? If so, could someone provide guidance on how to achieve this task? ...

javascriptjqueryhtmlcss

Display the X button solely once text has been inputted into the textbox

I have integrated a text clearing plugin from here in my project to allow users to clear the input field by clicking on an X button. However, I want to modify the code so that the X button only appears when there is text entered in the textbox. I attempt ...

javascriptjquerycss

Bootstrap sticky footer solution

Having an issue with the sticky footer in Chrome while everything looks fine in FF and IE. When resizing the screen, the content wraps properly, but the footer does not adjust and overlaps the content. Any tips or suggestions would be greatly appreciated. ...

cssasp.nettwitter-bootstrap-3

I am looking to incorporate a 10 px border at the top of my column by utilizing bootstrap4

How can I add a border to the top of my column using Bootstrap 4? I've been struggling with it and can't seem to get it right. Here is the code I'm currently using, which includes <div> tags for the columns: <!doctype html> &l ...

htmlcssbootstrap-4

Is there a way to make the checkbox and corresponding text display on a single line within my code snippet?

Bootstrap text-truncate is causing the checkbox and text to appear on separate lines in the following example. How can I adjust it to have the text right after the checkbox? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" / ...

javascriptbootstrap-4

JavaScript - Delayed Text Appearance with Smooth Start

I want to create a landing page where the text appears with a slight delay - first, the first line should be displayed followed by the second line. Both lines should have an easing effect as they appear. Below is a screenshot of the section: https://i.sst ...

javascriptjquerycsstransition

The appcompat support library for Android v7 is missing some components

Recently diving into the world of Xamarin and Visual Studio to create my first Android C# app, I encountered an issue in the main activity class. When attempting to reference AppCompatActivity, I received an error stating that it could not be found. Desp ...

c#android

developing a checkbox group with Vue.js

I am working with 2 arrays - one contains possible checkbox variants and the other contains already saved checked boxes. In my VUEJS template, I have created a simple example: <ul> <li v-for="cit in possable"> ...

arraysvue.jscheckboxlist

The sub-menu positioning feature functions properly in Chrome and Safari, but is not compatible with Internet Explorer and Firefox

Working on a website for a gaming community, known as http://www.quad-gaming.com/. All is running smoothly except for the dropdown menu under "Login" on the right side of the navigation bar. It behaves properly in Chrome and Safari, but in IE and Firefox, ...

htmlcssmenunavigationsubmenu

Sending AJAX data to the Controller for parsing and receiving the response

Check out this AJAX call that communicates with the controller: $.ajax({ type: "GET", url: '@Url.Action("getChat", "Chat")', success: function (data) { alert(data); $("#data").html(data); }, error:{ ...

asp.netajax

Equivalent List Implementation in C++ compared to C# List

I have a query that I'm struggling with. I want to create a C++ List that functions similarly to a C# List. Specifically, I aim to create a List that can hold various offsets that I have generated. Ultimately, my COffset should contain 200 lists of of ...

c#c++listarraylist

"Enjoying a table header that scrolls freely with autoscroll feature

Resolved - http://jsfiddle.net/CrSpu/11704/ I'm facing an issue with a table that has autoscroll functionality. I am looking to freeze the header of the table when automatic scrolling occurs, or you can test it out using my code pen. I'm uncer ...

javascriptjquerycsshtml-tableautoscroll

Visual Studio 2019: Troubleshooting C# Configuration Error in ASP.NET Web Application

Attempting to execute an ASP.Net C# program. Encountering the following error: An application error has occurred on the server. The current custom error settings do not allow the details of the error to be viewed remotely for security purposes. However, ...

c#asp.netvisual-studio

CSS not working when attempting to override Angular (13) Material file

In my Angular (13) application with Material, I have developed a CSS file specifically for overriding certain Material styles. This CSS file is imported into the styles.scss file as the last line. However, despite importing the external file, the CSS def ...

cssangularangular-material

The typeface displayed is Rubik Light Font instead of the regular Rubik font

I am currently working on incorporating the Rubik Font into my project: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> < ...

htmlcssfonts

Emphasize cells and headers when a cell's value deviates from its initial value

I implemented cell editing in my primeng table. Here is the code: <div class="card"> <p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }"> <n ...

htmlcssangularprimengangular10

Displaying selected list item while concealing the original

I have a dropdown menu with several options. What I am looking for is to have it so that when we click on the drop down, a list of choices appears. Then, when we select an option from the dropdown, the original selection should be replaced with the one th ...

javascriptjqueryhtmlcss