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

Struggling to incorporate method decorators to handle http errors in Angular?

My goal is to implement error handling for all http requests using custom decorators. Here's my current code snippet: createRecord(data: data) { return this.httpClient.post(`${this.apiURL}/record/`, data); } I am looking to refactor thes ...

angulartypescriptangular2-decorators

Tips for creating an Angular testing scenario that encompasses the use of array.find()

I need assistance in writing a test case for the following method. I have created the code snippet below but it is not helping to improve/change the code coverage. Can anyone please guide me on what I might be doing incorrectly? Component remove(item: str ...

angularjasmine

Create a filtering feature with Django RestFramework and an Angular front-end

Can someone assist me in building a filter for my Angular frontend that connects to a Django backend using restframework_filter? I have the following code in my backend: viewset.py from snippets.models import Snippet from .serializers import SnippetSeria ...

djangoangular

Assigning numerical ratings to a web-based questionnaire in HTML

In my questionnaire, I have radio buttons and checkboxes that need to be graded. The format of the input elements looks like this: <input type="radio" name="1" value="Yes" onclick="document.getElementById('pls').setAttribute('requi ...

javascriptphphtml

Expiry Time for JWT Token (ASP.NET Core)

I've been trying to extend the lifespan of JWT tokens without success. After researching online, I came across information about JwtBearerOptions.TokenValidationParameters.ClockSkew. I attempted to set timespans of 1 minute and 20 seconds, but the a ...

angularauthenticationasp.net-corejwt

What could be causing my function to fail <object>?

Within index.php, I am calling the function twice, which includes chart.html. index.php chart_line($valuesNight); //first call chart_line($valuesEvening); //second call ?> <?php function chart_line($jsonDataSource){ ?> < ...

javascriptphphtml

React text hover image functionality

Just diving into the world of React and attempting to create a cool image popup effect when you hover over text in my project. I could really use some guidance on how to make it function within React, as the logic seems a bit different from plain HTML. Any ...

javascripthtmlcssreactjs

What could be causing the spinner (Bootstrap 5.x) to not show up on the screen

I'm having trouble getting a spinner to show up when a user clicks a form submit button. Below is the HTML code to add a <div> for the spinner: <div class="pageloader"> <img src="../images/loader-large.gif" alt ...

cssjquery-uibootstrap-5

Finding the correct value in Ajax is proving to be a challenge

In my development of a doctor management system, I am encountering an issue with updating the date field based on changes in the selected doctor. The system includes three form fields: department, doctor, and doctor_time. Through AJAX, I have successfully ...

javascriptjqueryhtmlajaxcodeigniter

Observing changes in a parent component variable with Angular

One feature of my form is that it consists of a parent component and a child component. To disable a button within the form, I utilize a function called isDatasetFilesValid() which checks a specific variable (datasetList[i].fileValid). This variable is mo ...

javascriptangulartypescriptcallback

Padding for the doughnut chart in Chart.js canvas

My current setup includes a canvas featuring a doughnut chart created with chart.js enclosed in a div element that displays like this: The canvas has a red background to enhance visibility. Currently, the chart is centered within the canvas with additiona ...

cssangularchart.js

Ways to generate an Angular 7 component

Seeking guidance on creating an angular 7 component. I have forked a jsFiddle at this link: https://jsfiddle.net/gauravshrestha/fdxsywLv/. The chart in the fiddle allows data points to be dragged up and down. My goal is to convert this into a component whe ...

javascriptangulartypescriptchart.js

Working with the collapse event in Bootstrap

After purchasing a template from ThemeForest, I found it to be absolutely amazing. However, I am struggling with using Bootstrap as it seems quite complex. The left menu is structured with collapsible ul and multiple li elements. I am seeking assistance o ...

javascriptjqueryhtmlcss

Show HTML code inside a text box

I have a text box that I populate with data from a Json response like this: <div class="gadget-body" style="height:100px"> <label>{{ textData}}</label> </div> Now, the Json response contains HTML code with <p> and < ...

htmlcss

Issue with accessing class property in events.subscribe in Ionic3

I am currently working on a class that listens for events. When the event is triggered, I need to add the data that accompanies it to an array and then display it. Here's what my class looks like: export class customClass { dataArray:Array<stri ...

angulartypescripteventsionic2ionic3

Navigate to items within a content block with a set height

I have a <div> that has a fixed height and overflow-y: scroll. Inside this div, there is mostly a <p> tag containing a long text with some highlighting (spans with background-color and a numbered id attribute). Just to note, this is an HTML5 a ...

javascriptangularjshtml

Clickable PDF Button for Quick Website Access

Is there a way to create a button on an HTML page that remains functional when the page is saved as a PDF? I want the button to link to a webpage so that users can click on it in the PDF and be redirected to the link. ...

htmlpdfbuttonhyperlink

Exploring the implications of Content Security Policy in conjunction with mod_pagespeed evaluations

I am currently in the process of configuring CPS rules for my website. One issue I have encountered is that mod_pagespeeds often uses 'unsafe-eval' for scripts, which goes against my security settings. An example of code generated by mod_pagespee ...

javascripthtmlcsswordpress

Listen for key events on an entire component or div in Angular using HostListener

Experimenting with this code in angular 8: @HostListener('keydown.shift.tab', ['$event']) onKeyDown(e) { // you can use preventDefault() to stop other events from triggering e.preventDefault(); console.log(& ...

angular

Clear out the classes of the other children within the identical parent division

I'm currently in the process of replacing my radio circles with div elements. I've successfully implemented the functionality for selecting options by clicking on the divs, as well as highlighting the selected div. However, I'm facing trou ...

htmljquerycssradio-button