Customize the CSS class for adding extra spacing between the Controls

I have a User Control with 3 radio buttons and I need to add space between the buttons themselves, not between the button and its text. Can someone help me figure out how to add this space? Here is my User Control list:

public class RadioButtonListAppointmentFormat : MyCalSTRSRadioButtonList
{
    public RadioButtonListAppointmentFormat(): base()
    {
        this.CellPadding = 0;
        this.CellSpacing = 0;

        Items.Add(new ListItem("In Person", "InPerson"));
        Items.Add(new ListItem("Telephone", "Telephone"));
        Items.Add(new ListItem("Web Based", "Web"));

        SelectedIndex = 0;
        this.SetDisplayTextToNoWrap();
    }
}

This is the Base class for our User Control:

public class MyCalSTRSRadioButtonList : BaseRadioButtonList
{
    public MyCalSTRSRadioButtonList() : base()
    {
        this.CssClass = ApplicationSettings.CssClass.FormText;
    }
}

Here is the CSS being used:

.formtext {
    font-size: 1.1em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 22px !important;
}

And here is how the css is attached to the User Control:

public static string FormText
 {
     get { return "formtext"; }
 }

Any assistance would be greatly appreciated, thank you.

Answer №1

 .formtext {
    font-size: 1.1em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 22px !important;
    }

.formtext input[type="radio"] {
    margin-right: 10px; /* Adjust the value as needed */
  }

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

Encountering another PInvoke - notification indicates origin cannot be located?

When I run the struct I built in C# against the function, I do not receive an error message indicating an issue with the struct. Instead, the error message says that a source file could not be found. Due to a lack of documentation on this DLL, I suspect th ...

Television Mount for Precise Video Placement

Seeking assistance for a unique positioning challenge I am facing. I have a Video that needs to be placed on the home page with a TV-like image "frame" around it, and they should scale together. https://i.sstatic.net/2pLhi.png What I've attempted i ...

Using jQuery to loop through a table and retrieve the button value from every row

I have a challenge with dynamically created buttons in a table. My goal is to loop through the table, identify the rows that have a checked checkbox, and retrieve the value of a button within that row. I then need to store these values in an array. Unfortu ...

When I use my loop to generate Google Map markers, the positioning is not accurate and the markers do not appear on the map. However, manually inputting the positions

There seems to be an issue with displaying Google map markers based on objects in the markers array after looping through it. I noticed that when creating a second component and setting the position manually, the marker appears correctly. However, upon ins ...

Add a module to the vue.config.js file

I am looking to utilize the npm package vue-remove-attributes in order to remove the "data-testid" attributes from my DOM. https://www.npmjs.com/package/vue-remove-attributes According to the README, I need to pass the module to vue-loader in my webpack c ...

CSS: adjusting styles for different screen sizes on both desktop computers and smartphones

While diving into Emacs, I am in the process of creating a website called Prince. The layout of columns is controlled by the directives below: body { font-family: var(--s-font-family); font-size: var(--normal-font-size); column-count: 3; c ...

Aligning content in CSS for cross-browser compatibility with Internet Explorer and Chrome

My CSS grid has grid items that can easily be centered in Chrome by using the justify-items:center property, creating a magical effect. However, this solution does not work in Internet Explorer as the items remain stuck to the left side. For reference: ht ...

showing a fading-in effect after a successful AJAX post

Maybe a simple question, but I've been struggling to make this work for quite some time now. Despite trying various solutions from stackoverflow, I can't seem to get it right. Perhaps fresh eyes could help me figure out how to achieve this. My g ...

Skrollr triggers a fade-in effect once the user reaches a specific distance from the bottom of the

Using skrollr, I have a div positioned at the bottom of some content that I want to fade in once the screen reaches its level. I attempted various examples found on their cheat sheet but had no success. This div is situated above the footer (500px from t ...

Encountering an issue with Typescript Interfaces: property not found

This is my custom interface creation export interface UserInfo { success?: boolean, user?: User, employer?: Employer, hr?: Hr } After building this, the next task involves: let data = await loginUser(loginData); console.log(data.success); ...

What kind of parameter should be used that implements IEnumerable and has a Count property?

Often times, it can be beneficial to optimize methods that accept an array to instead accept more versatile classes that implement IEnumerable and have a Count or Length property. For example: public static T GetNextItem<T>(this Random random, T[] ...

Send the canvas image dataURL for decoding and saving on the server using AJAX in conjunction with PHP

In the front-end, an image is generated (canvas.toDataURL) from the content of a div: ... var img = new Image(); var dataUrl; img.onload = function() { ...

Error message: "The use of Vue 3 refs in the render function is

I am facing an issue with my Vue component wherein the root element is set as ref="divRef". Strangely, when I try to access divRef.value inside the onMounted function, it returns undefined. Any assistance on this matter would be greatly appreci ...

Reactjs is displaying an AxiosError stating a Network Error

Working on a project with Reactjs and Nextjs, I encountered an issue where the data being posted with axios is inserting "NULL" values. I'm not sure where I am going wrong. Below is the code snippet in Nextjs: const userData = { name: state.name, ...

Executing HTTP Requests for Elements in an Array using JavaScript

I am currently struggling with a script that sends HTTP requests to a website in order to obtain various documents. The document IDs are stored within an array, and my intention is to send a request for each element in the array and return a unique message ...

The issue of overflowing scroll functionality appears to be malfunctioning

.main-content{ height: 100%; width: 60%; min-height: 800px; background-color: white; border-radius: 5px; margin-left: 1%; border: solid 1px black; } .profile-banner{ display: flex; flex-direction: row; justify-content: space-between; ...

Webpage with visual representation

Currently in the process of redesigning my university's drama department website, I'm looking to incorporate three images side by side with spacing and captions. The captions need to have a header that's styled differently from the caption i ...

Tips for customizing CSS hover effects using HTML and jQuery scripts

Just a heads up before I ask my question - the code I'm about to share is sourced from this video on YouTube, so all credit goes to the creator. JS $(".product-colors span").click(function(){ $(".product-colors span"). ...

CSS code that sets the background color to 50% of the window's height

Is it possible to create a background on a webpage that appears to be "split in two" with different colors on opposite sides using linear-gradient, but adjusting for large element(div) heights causing the background color to repeat? <body> <div ...

Click the button to automatically generate a serial number on the form

My form includes three input fields: sl no, stationerytype, and stationeryqty. By clicking the symbols + and -, I can add or delete these fields. I am attempting to automatically generate a Sl no in the sl no field when I click the plus symbol, and adjust ...