Organize Radio Selectors

My intention was to align the radio buttons as shown in the image below:

https://i.stack.imgur.com/oPTjD.jpg

However, the final result looked like this

https://i.stack.imgur.com/Mixga.jpg

Below is the code for your reference

HTML

<div  class="form-group">
<label *ngFor="let radiobutton of radioItems">
  <input type="radio" name="options" (click)="model.option = radiobutton"
  [checked]="radiobutton === model.option">{{radiobutton}}
</label>
</div>

CSS

.form-group {
        margin: 2px auto;
        width: 12rem;
        position: relative;
        overflow-wrap: break-word;
        column-count: 2;
        clear: both;
    }

Check out the Demo here for a visual demonstration.

htmlcssangular

Answer №1

If you're looking for a solution, consider using flexbox:

.form-group {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 100px;
        // Additional properties.
    }

Check out the live demonstration on StackBlitz: https://stackblitz.com/edit/radio-buttons-58ccoi

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

Pages in Angular are being loaded multiple times when they are loaded with various parameter values

I have encountered an issue with my page setup that involves contracts and chats. Each chat corresponds to a specific contract, and depending on which chat or contract is open, the URL changes accordingly: david/contracts -> david/contracts/12 david/c ...

angularparametersroutes

Modify the class of the focused element exclusively in Angular 2

I'm working on a project that involves several buttons and div elements. Currently, the divs are hidden, but I want to be able to reveal a specific div when its corresponding button is clicked. For example: If you click the first button, only the fir ...

javascriptangularjsangular

find all the possible combinations of elements from multiple arrays

I have a set of N arrays that contain objects with the same keys. arr[ {values:val1,names:someName},   {values:val2,names:otherName}, ] arr2[   {values:valx,names:someNamex}, {values:valy,names:otherNamey}, ] My goal is to combine all possible c ...

javascriptarraysangulartypescriptarraylist

Tips for switching "a" tag elements to reveal concealed DIVs in a similar way to the Facebook notification center

I have a situation in my code where I need to toggle between two a elements to display a hidden div with content one at a time. This functionality is similar to how the Facebook notification center works when you click on the icons, which I'm sure mos ...

jqueryhtmlcss

Aligning two divs both horizontally and vertically within two adjacent columns each with a width of 50%

Struggling to align two divs both vertically and horizontally within their respective parent containers that are placed side by side with 50% width and 100% height? Check out my solution on Codepen for reference. View Codepen Example *** HTML *** <di ...

htmlcssresponsive-designvertical-alignment

Guide on adding dual horizontal scroll bars to a v-data-table (Vue / vuetify)

Currently, I am working on Vue / Vuetify and experimenting with the v-data-table component. While creating a table, I noticed that it has a horizontal scroll bar at the bottom. https://i.stack.imgur.com/noOzN.png My goal now is to implement two horizontal ...

htmlcssvue.jsvuetify.js

When an option is selected in one dropdown, a list is dynamically populated in another dropdown. However, the entire column then displays the selected row's options in a table format

https://i.stack.imgur.com/q7tMT.png Upon selecting an option from a dropdown within a table row, I make a call to an API to fetch a list of strings into another dropdown field for that specific row. However, the entire column is being populated with that r ...

javascripthtmlangularjsdomparent-child

Assign a dynamic class to an element within an ngFor iteration

I am working with a template that includes an app-subscriber component being iterated over using *ngFor: <app-subscriber *ngFor="let stream of streams" [stream]="stream" [session]="session" (speakEvents)='onSpeakEvent($event)'> ...

angulartypescript

The cascading style sheet used by a lightbox

I constructed a lightbox using the following HTML code: <a id="show-panel" href="#">Show Panel</a> <div id="lightbox-panel"> <h2>Lightbox Panel</h2> <p>You can add any valid content here.</p> <p align="center" ...

jqueryhtmlcsslightbox

PHP file secured to only accept variables posted from HTML form

This is a basic HTML/AJAX/PHP script I have implemented. <form id="new_user" action="" method="post"> <div class="col-md-3 form-group"> <label for="username">Username</label> <input type="text" class="form-control" name ...

javascriptphpjqueryhtmlajax

Choosing the subsequent div after the current one using Jquery

I am currently in the process of creating a drop-down menu button that, when clicked, reveals the previously hidden div underneath it. The code is functioning properly without the use of $(this).next, but it is displaying all divs with the class .menudrop ...

javascriptjqueryhtmlcss

Tips for creating a window closing event handler in Angular 2

Can someone guide me on how to create a window closing event handler in Angular 2, specifically for closing and not refreshing the page? I am unable to use window.onBeforeunLoad(); method. ...

javascriptangulartypescript

Angular and RxJS can be set up to delay the next call from BehaviorSubject in situations where there are multiple

Within my Angular application, I maintain a state using a service that stores the data as a BehaviorSubject. Whenever new data is received from the server, the next function is called to update the existing data and notify all subscribers. PseudoCode: ...

angularrxjs

Best practices for working with HTML elements using JavaScript

What is the best approach for manipulating HTML controls? One way is to create HTML elements dynamically: var select = document.getElementById("MyList"); var options = ["1", "2", "3", "4", "5"]; for (var i = 0; i < options.length; i++) { var opt = ...

javascripthtml

Navigate to the top of the page using jQuery

Attempting to implement a simple "scroll jump to target" functionality. I've managed to set it up for all parts except the "scroll to top". The jumping works based on the tag's id, so it navigates well everywhere else, but not to the very top. He ...

javascriptjqueryhtmlcss

Tips for choosing every <div> within a specific class

I'm trying to create multiple boxes within a class, all with the same background color. I've written code for 6 boxes in the "color-board" class, but when I go to select them, only 1 box is displaying... Below is the code for the class and how I ...

htmlcss

Display the div only if the content matches the text of the link

Looking for a way to filter posts on my blog by category and display them on the same page without navigating away. Essentially, I want users to click on a specific tag and have all posts with that tag show up. Since the CMS lacks this functionality, I pla ...

javascripthtmljquery

The div remains unchanged when the button is clicked

My webpage is filled with several large div elements. There's a button on the page that, when clicked, should switch to the next div. Despite my efforts, the code I've written doesn't seem to be working as expected. :( This is the HTML st ...

javascriptjquerycsshtml

What steps can I take to avoid scaffold.css from taking precedence over my custom CSS?

I'm having trouble with this. It seems like a small issue, but I'm still very new to learning about rails. Any help you can provide would be greatly appreciated! Solution: To resolve the problem, I accessed the file responsible for adding head ...

ruby-on-railscss

Drop-down Navigation in HTML and CSS is a popular way to create

My navigation menu is functioning well and has an appealing design. The HTML structure for the menu is as follows: <div id="menubar"> <div id="welcome"> <h1><a href="#">Cedars Hair <span>Academy</span></ ...

javascriptjqueryhtmlcssnavigation