Customize the Gap Between Inline Radio Buttons in MaterializeCSS

Help needed to align MaterializeCSS's radio buttons inline without gaps. Thank you in advance for any assistance!

Below is a snippet of the code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<label>
    <input name="group1" type="radio" />
    <span>Yes</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span>No</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span>I don't know</span>
</label>

See image for reference:

htmlcssradio-buttonmaterialize

Answer №1

I have come across a solution by simply adding 

style="padding-left: 24px;"
to the span element.

Here is the updated code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<label>
    <input name="group1" type="radio" />
    <span style="padding-left: 24px;">Yes</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span style="padding-left: 24px;">No</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span style="padding-left: 24px;">I don't know</span>
</label>

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

Cutting imagery to create a new design element

https://i.sstatic.net/IAh0h.jpg There is an image above with 6 gears (circles with pointy edges). My goal is to separate them into individual pictures and, on each picture's hover, have a relevant line with text appear. How can I achieve this? The a ...

javascripthtmlcss

JavaScript / html Error: function body missing closing curly brace

I encountered an error that I'm struggling to resolve: "SyntaxError: missing } after function body". Despite not having a function named 'body', I have attempted changing every instance of 'body' in my script. However, ...

javascripthtmlsyntax-error

Adjusting Size of Picture and Text on Card

I am currently testing out different effects using the materializecss framework. My goal is to adjust the size of the image and content on a card when the user hovers over it, but I'm having trouble figuring it out. .card:hover .card-image { he ...

cssmaterialize

Stop all animations in JS and CSS

Looking for a way to halt all CSS and JavaScript animations, including canvas and webGL effects, on a specific webpage. Some animations can cause slow performance on certain browsers like Opera and Firefox, so I'm seeking a code snippet or guidance o ...

javascriptjqueryhtmlcsscanvas

Setting the margin to 0 auto to create a CSS Grid layout featuring an Image taking up the entire right side

I’ve been grappling with finding a consistent method to ensure uniform white space for all containers like this: https://i.stack.imgur.com/wtk0G.png Important: The grey rectangle signifies an image. My goal is for it to extend to the viewport's en ...

cssgridcss-grid

Tips for showcasing two cards side by side on mobile screens?

This is my glitch. I have a layout where I see 3 cards in a row for desktops, 2 cards per row on tablets, and 1 card for mobile devices. However, I would like the cards to resize and display 2 cards in a row on mobile. How can I achieve this? Here is the f ...

htmlcssresponsive-designresponsivemobile-website

What is the best way to display a User's name as text on a Django page without having to refresh the page?

I'm currently working on a feature where I need to show a User's name on top of a form box when they enter their Employee number, all without needing to refresh the page. Here's how it should work: once the User fills in their Employee numb ...

pythonjqueryhtmldjangoajax

Solving the right-to-left orientation issue in the Bootstrap navbar

I have implemented a navbar using the code below, which aligns well from the right side. However, the menu items are sorted in ltr order and I need them to be in rtl order, so that "Dropdown 1" starts from the right side of the page. Currently, it appears ...

htmlcssbootstrap-4

What is the process for creating a luminous sweeping animation on an SVG image or logo?

Is it possible to apply light sweep effect only on the SVG logo? The light sweep effect is triggered when hovering over the logo The effect should be limited to the path inside the SVG image .preloader { position: fixed; display: flex; align-ite ...

htmlcsspseudo-elementeffectslight

Reinitializing AngularJS form controls

Check out this codepen example: http://codepen.io/anon/pen/EjKqbW I'm trying to reset the form elements when the user clicks on "Reset". The div elements f1,f2,f3 should be hidden and the searchText box cleared. However, the reset button is not trig ...

javascriptjquerycssangularjsforms

I require assistance on how to properly arrange images in a div so that they stack

I'm having an issue with arranging a series of images within a div where they stack on top of each other. The div has a CSS width of 450px, and the top image always matches this width. Subsequent images vary in size and need to be aligned flush right ...

css

Attempting to extract tabular information from a script function housed within a webpage

I'm attempting to extract data from a table on the following website: When using BeautifulSoup to 'find' the 'table', I encountered a NoneType error since the table appears to be generated by a script function that fetches 90 rand ...

htmlpython-3.xbeautifulsoup

Storing the selected value from dynamically generated options in Angular using ngFor

I have a collection of items called Fixtures. Each fixture contains a group of items named FixtureParticipants. Here is my process for generating choices: <tr *ngFor="let fixture of fixtures$ | async; let i=index"> <th scope="row& ...

htmlangulartypescript

What is the best way to superimpose an image onto a canvas?

I am working on a cool project where I have created a canvas that displays matrix binary code raining down. However, I would like to enhance it by adding an image overlay on top of the canvas. Here is my current setup: <div class="rain"> ...

javascripthtmlcss

Trouble displaying REACT.jsx in browser

I'm currently learning React and struggling to get it running smoothly. HTML function Person(){ return ( <div class="person"> <h1>Max</h1> <p>Your Age: 28</p> </div> ); } ...

javascripthtmlreactjs

Changing the MIME type from "application/octet-stream" to "video/mp4" in HTML5: A Step-by-Step Guide

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </head> <body> <video id="video" controls src="${maps.url }" height="598" width="782"> ...

htmljsp

Utilizing $.each to dynamically add data to a jQuery Mobile listview

Trying to implement a data reading mechanism using ajax resulted in unexpected html tag generation for <ul> <li>. The code snippet is as follows: (function( $, undefined ) { $(document).on("pagecreate", ".jqm-demos", function(){ ...

javascriptjqueryhtmljquery-mobile

"An error occurs when attempting to clear Rad Grid data with javascript: htmlfile: Invalid argument thrown

Hello, I am currently developing an ASP.NET application. I am facing an issue where I need to clear the data in a Rad grid upon button click using JavaScript. The code snippet that I have attempted for this is as follows: document.getElementById(&a ...

javascriptjqueryhtmlasp.netgridview

The data type 'string' cannot be assigned to the data type 'Position'

Currently, I am in the process of converting React js to typescript. The component being used is a Class Component. I would like to obtain CSS settings through props and apply them to an element. How can I resolve this issue? render(){return( <span st ...

cssreactjstypescript

Having trouble setting a background image for a specific DIV element in HTML

I am in the process of updating my webpage, and need some assistance implementing a small background image. Here is what I have done so far: https://i.sstatic.net/nTxtD.png Below is the marked section where I am trying to add the background image: https ...

javascripthtmlcss