Utilizing Bootstrap design elements for a RadioButtonList

I am working on an ASP.NET WebForms application that includes a RadioButtonList which I want to style using Bootstrap's CSS classes.

By utilizing the RepeatLayout="Flow" and RepeatDirection="Vertical" settings, the RadioButtonList will be generated in the following format:

<span id="PageContentPlaceHolder_RadioButtonList1">
    <input id="PageContentPlaceHolder_RadioButtonList1_0" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="1" />
    <label for="PageContentPlaceHolder_RadioButtonList1_0">One</label>
    <br />
    <input id="PageContentPlaceHolder_RadioButtonList1_1" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="2" />
    <label for="PageContentPlaceHolder_RadioButtonList1_1">Two</label>
    <br />
    <input id="PageContentPlaceHolder_RadioButtonList1_2" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="3" />
    <label for="PageContentPlaceHolder_RadioButtonList1_2">Three</label>
</span>

My goal is to format it as follows (using Bootstrap's CSS classes):

<span id="PageContentPlaceHolder_RadioButtonList1">
    <div class="form-check">
        <input id="PageContentPlaceHolder_RadioButtonList1_0" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="1" />
        <label for="PageContentPlaceHolder_RadioButtonList1_0" class="form-check-label">One</label>
    </div>
    <div class="form-check">
        <input id="PageContentPlaceHolder_RadioButtonList1_1" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="2" />
        <label for="PageContentPlaceHolder_RadioButtonList1_1" class="form-check-label">Two</label>
    </div>
    <div class="form-check">
        <input id="PageContentPlaceHolder_RadioButtonList1_2" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="3" />
        <label for="PageContentPlaceHolder_RadioButtonList1_2" class="form-check-label">Three</label>
    </div>
</span>

I acknowledge that achieving this may be simpler by using a Repeater and including the individual RadioButton and Label controls within the ItemTemplate, where CssClass values can be applied. However, I also need to add a RequiredFieldValidator to ensure users make a selection. It is essentially a multiple-choice exam and no radio button should be pre-selected. I have faced difficulties trying to implement a validator with the individual radio buttons. Perhaps a CustomValidator could work if I formulate the client-side and server-side validation code.

What would be the most effective approach to achieve the desired outcome?

cssasp.netbootstrap-4webformsradiobuttonlist

Answer №1

Radio buttons used as sub page menus have a clean and efficient design that adds to the user experience. The implementation of the code behind these radio buttons is seamless.

Consider the following example:

https://i.sstatic.net/9pa0h.png

With the accompanying style sheet:

  body {
    }

    .radionav input {
        width: 12px;
        margin-top: 0px;
    }

    .radionav label {
        display: inline-block;
        border: 1px solid black;
        border-radius: 25px;
        height: 35px;
        padding-top: 18px;
        padding-right: 6px;
        margin-left: -20px;
        padding-left: 25px;
    }

    .radionav input[type="radio"]:checked + label {
        display: inline-block;
        border: 1px solid black;
        border-radius: 25px;
        height: 35px;
        padding-top: 18px;
        padding-right: 6px;
        margin-left: -20px;
        padding-left: 20px;
        background: #253B82;
        color: white;
        border-spacing: 10px;
    }

    .radionav:after {
        content: '';
        display: inline-block;
        width: 20px;
    }

Transforming the radio markup results in:

         <div style="float:left;padding-right:10px">
             <asp:RadioButtonList ID="ShowProjects" runat="server" RepeatLayout="Flow"
                AutoPostBack="True" RepeatDirection="Horizontal"  >
                <asp:ListItem Class="radionav" Selected="True">Live Projects</asp:ListItem>
                <asp:ListItem Class="radionav" >All Projects</asp:ListItem>
                <asp:ListItem Class="radionav" >My Proofs</asp:ListItem>
                <asp:ListItem Class="radionav"> Create (start) a new Project </asp:ListItem>
            </asp:RadioButtonList>
        </div>

The outcome is displayed here: https://i.sstatic.net/qA6Wy.png

CSS adjustments can be made to customize the button length and appearance. By utilizing a radiobutton list and applying styles, a practical and visually appealing interface can be achieved, complemented by functional code execution.

An example of working with this setup could involve:

   Select Case ShowProjects.SelectedIndex
        Case 0
             strWhere = "(Void = 0)"   ' show live projects
             Call LoadGrid(strWhere)
        Case 1
            strWhere = ""              ' show all projects
            Call LoadGrid(strWhere)
        Case 2
            ' show proofs
        Case 3
            ' create a project
    End Select

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

Storing user information securely after logging in on a .net platform

As I develop a web application in .NET using c#, MVC, and sqlexpress, my goal is to allow users to login and view specific parts of the UI based on their group affiliations. I have set up tables for groups and users in my database, and generated models fr ...

c#asp.net.netasp.net-mvcsession

I am facing an issue with my login button as it does not seem to be performing the necessary function. Instead of advancing to the next

this is my implementation code from flask import Flask,request, render_template, redirect,session, url_for from flask_mysqldb import MySQL import MySQLdb.cursors app = Flask(__name__) app.config["MYSQL_HOST"] = "localhost" app.confi ...

pythonhtmlcssflask

Utilizing vertical spacing in Bootstrap Vue for improved layout design

I am utilizing <b-row v-for="reptile in reptiles" :key="reptile.id"> <b-col> {{ reptile.name }} </b-col> <b-col> <b-button @click="deleteReptile(reptile)" variant="danger" size="sm"> ...

bootstrap-4bootstrap-vue

The user-defined class in C# does not have access to the Control ID

In my querystring.aspx file, there is a gridview inside it. Within the default class of the querystring.cs file, which is public partial class querystring : System.Web.UI.Page, I am able to access the gridview control id. However, when I create another ...

c#asp.netclass

Looping through a jQuery script to add a class if a certain condition is met in another class

$(document).ready(function() { if ($("#grid .media-box").hasClass("brand1")) { $("#grid .media-box-content").addClass("brand01") }; } }); and in body looping div grid <div id="grid"> <?php foreach($data as $items) { ?> <div cl ...

javascriptphpjqueryhtmlcss

Unable to access ASMX service in Classic ASP following TLS 1.2 update

Our website predominantly uses Webforms, with some pages written in Classic ASP that share a directory structure. These classic pages utilize asmx services on the asp.net side to retrieve connection information. Everything was functioning properly until we ...

asp.netasp-classicasmxapplication-pool

Achieving equal alignment of items with flexbox

As someone who is just starting to learn about HTML and CSS, I have been working on creating toggle buttons that I want to align dynamically in the center of the screen. I recently discovered flexbox which has made this process easier for me. However, one ...

htmlcssflexbox

Leverage shared variables across load-balanced servers

My website is hosted on two load balancing servers. I have a set of variables stored as a Lookup in a static variable for efficient and quick querying. The data in the static variable is structured like a tree, so I don't want to constantly query the ...

c#asp.netstaticload-balancingstateserver

Thick black border on select list in Internet Explorer version 10

After recently switching to IE10, I couldn't help but notice that all my dropdown lists (select lists) now have a bold black border when in the "dropped down" state, like the example below. Unfortunately, I am unable to inspect the element using IE&ap ...

cssinternet-explorer-10selectlist

Enhancing the Look of Custom HTML Tags with React JSS Styling

I have incorporated material-ui into my project, here is an example of the code I am using: import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; cons ...

javascriptcssreactjsmaterial-uijss

Issue with setting a selected option in Bootstrap modal with Select2

I have done extensive research on this issue but still haven't been able to resolve it. I am looking to set a unique value in a select element that is displayed and selected when the user clicks an "Edit Record" button for each table row. The value ...

jqueryformsbootstrap-4jquery-select2

Creating a visual that when clicked, reveals an enlarged version at a different location

Is there a way to make an image appear in a different location on the page when it's hovered over? I've searched online but couldn't find a solution using just HTML and CSS. Does anyone know how to achieve this effect? Image not hovered: ht ...

htmlcssimagehover

What is the best method for transforming bullet points into a horizontal list?

Is there a way to display disc bullet points in a horizontal list? I've encountered an issue where setting display: inline; in CSS prevents the class definition list-style-type: disc from working. My workaround involves manually inserting disc bulle ...

htmlcsslist

Is it possible to launch an ASP.Net Core container in Kubernetes while utilizing a non-root user?

I am attempting to execute an ASP.Net docker container on Kubernetes as a non-root user. Here is the dockerfile I am using: FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base WORKDIR /app EXPOSE 8443 FROM mcr.microsoft.com/dotnet/core/sdk:3 ...

asp.netkubernetes

Page rotates on hover effect with RotateY

How can I get an image to rotate on the Y axis when hovered over? My code works in -moz- but not in -webkit- or -o-. What am I missing? .spin-logo { height: 450px; margin: 0 auto; -moz-transition: transform 2000ms ease 0s; -o-animation: transfor ...

htmlcsstransform

Implementing a favicon.ico in an asp.net core project with webpack integration

What is the best way to include a favicon.ico in an ASP.Net Core project with Webpack? ...

asp.netwebpack.net-core

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

cssvue.jsnpm

Is it possible for the background color to change in a sequence every time the page

I'm having trouble figuring out how to create a sequence that changes the background color every time the page is refreshed. I'm comfortable with basic HTML but not so much with JavaScript or CSS. I'm working on a page where I want the backg ...

javascripthtmlcss

CSS auto width not applied to images causing a lack of scaling

I recently added this code to my webpage: image { margin: 0 2px 0 0; height: 100px; width: auto !important; overflow: hidden; text-align: center; } The goal was to scale all images to a maximum height of 100px and have the browser adj ...

cssimageheightscaling

Sticky Position Not Functioning Properly in Flexbox Layout

I've attempted to use align-self: flex-start, but it had no effect. The main flex container is on the right side of my page (flex-direction: column) and I want one block of flex columns to stick once I scroll down to them. I enclosed a container aroun ...

htmlcssflexbox