Position the ion-radio element in the middle of the layout

As I work on creating a privacy page in HTML using Ionic 3, my desired output should resemble the following: https://i.sstatic.net/lxzc9.png

However, with my current code, the result I'm seeing is different from what I expected: https://i.sstatic.net/fkcWd.png

This snippet showcases the code I am working with:

<ion-list radio-group [(ngModel)]="flag1">
  <ion-grid item-center style="border-style: none">
  <ion-row item-center style="border-style: none">
  <ion-col col-4>
  <ion-item style="border-style: none" item-center>
      <ion-radio color="dark" [value]="true"></ion-radio>
      <ion-label class="radio-text">Si</ion-label>
  </ion-item>
  </ion-col>
  <ion-col col-4>
  <ion-item style="border-style: none" item-center>
      <ion-radio item-left color="dark" [value]="false"></ion-radio>
      <ion-label item-center class="radio-text">No</ion-label>
  </ion-item>
  </ion-col>
  </ion-row>
  </ion-grid>
</ion-list>

In addition to the code snippet, here is a glimpse of the CSS styling utilized:

.radio-text {
  font-size: 12px;
  white-space: pre-line;
  text-justify: auto;
  display: inline-block;
}

I am also facing an issue with an unwanted black bar that won't disappear despite attempting to remove it by setting the border property to 0. If anyone has a solution for this problem, your assistance would be greatly appreciated!

Answer №1

If you want to center the radio buttons, add

<ion-col col-2></ion-col>
before them:

<ion-list radio-group [(ngModel)]="selection">
  <ion-grid item-center style="border-style: none">
  <ion-row item-center style="border-style: none">
  <ion-col col-2></ion-col>
  <ion-col col-4>
  <ion-item style="border-style: none" item-center>
      <ion-radio item-left color="dark" [value]="true"></ion-radio>
      <ion-label class="radio-text">Yes</ion-label>
  </ion-item>
  </ion-col>
  <ion-col col-4>
  <ion-item style="border-style: none" item-center>
      <ion-radio item-left color="dark" [value]="false"></ion-radio>
      <ion-label  class="radio-text">No</ion-label>
  </ion-item>
  </ion-col>
  </ion-row>
  </ion-grid>
</ion-list>

To make it square in shape, apply the following styling:

.radio-text {
  font-size: 12px;
  white-space: pre-line;
  text-justify: auto;
  display: inline-block;
}
.radio-md .radio-icon, .radio-wp .radio-icon {
  border-radius: unset !important;
}
.input-wrapper {
  -webkit-flex: 0!important;
    -ms-flex: 0!important;
    flex: 0!important; 
}
.item-md .radio-md[item-left], .item-md .radio-md[item-start] {
     margin: 0!important;
}

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

Using Semantic-UI causes issues with the functionality of the height property set to 100%

View my CodePen here <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css"> </head> <body> <div class="ui secondary pointing menu" id=" ...

Struggling to apply filtering on an array containing multiple objects within Ionic 2

I have successfully implemented filtering on the following array: this.items = [ 'Amsterdam', 'Bogota', 'India' ]; The code used in my list.ts file is as follows: if (val && val.trim() != '') { thi ...

Can the bottom border on an input textfield be removed specifically under the new character?

This is the new visual design I received: https://i.stack.imgur.com/kiQGe.png The label CLG is represented as a label, with the line being an input type=tel. Disregard the purple overlay... The designer has requested that I remove the border when a user ...

Can the text color be customized to match the brightness level of the background area being covered?

Does anyone know of a plugin or method that can automatically change the color of text or swap predefined images/icons based on the average brightness of its parent element's background? If the background is dark, it should make the text white or swit ...

CSS deep level selectors

For the following HTML/CSS code, I am trying to target only level 1 "row" elements and not their nested counterparts. However, when using the child selector, it still selects the nested elements. How can I achieve selecting only level 1 "row" elements? ...

Eliminating undesired borders of table cells using CSS

I am facing a unique and puzzling issue. Here is the simple markup: <table> <thead> <tr><th>1</th><th>2</th><th>3</th></tr> </thead> <tbody> <tr>< ...

"Everything seems to be in order with `ng serve`, but `ionic serve`

My current project involves using Ionic version 6.19.0, but it has recently run into some unexpected compiling issues. Every time I attempt to execute 'ionic serve,' I encounter an Error: spawn UNKNOWN. Here is the content of my package.json fil ...

What is the best way to ensure that a child div can expand to fit within the scrollable area of its parent div

I am facing an issue with a parent div that changes size based on the content inside it. When the content exceeds the initial size, causing the parent to scroll instead of expanding, I have a child div set to 100% width and height of the parent. However, t ...

Discover the way to create an HTML button with a mesmerizing transparent effect

For my website creation using Dreamweaver, I came up with the idea of utilizing Photoshop to design backgrounds. The reasoning behind this choice was that if I needed to modify button names at any point, I could simply edit the code and make the necessary ...

Can you determine the height of an image if only the width and border width are provided?

Currently delving into the world of HTML and CSS, I've successfully configured the img element's width and border width using a style element. However, one aspect that is still puzzling me is how the height is calculated in this scenario. I&apos ...

Clicking on buttons in the header does not lead to the intended section when scrolling

I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...

Leveraging background images in HTML and CSS to create interactive clickable links

I'm attempting to create the illusion of a clickable background image using HTML and CSS, following a tutorial I found here. Unfortunately, I'm encountering two issues: 1) The link is not fully covering the background image 2) The link does not ...

Merge ReactCssTransitionGroup with React-route's Link to create smooth page transitions

React.js I'm facing an issue with the React.js code provided below. My goal is to set up the animation before transitioning to a new page using "React-router.Link" and ReactCSSTransitionGroup. Version: react: '15.2.1' react-addons-css-trans ...

Having trouble understanding the differences between Bootstrap 4's .list-inline class and .list-inline-item class?

I am currently utilizing Bootstrap 4 within Wordpress. Strangely, I am facing an issue where I am unable to have list items appear inline (horizontally) solely by using the class .list-inline on the list itself, as shown below: <ul id="dances" class="l ...

Create a single button that controls checkboxes with the help of HTML, CSS, SCSS, and Bootstrap 4

Is there a way to use only HTML, CSS, SCSS, and Bootstrap 4 to make all checkboxes default to the "on" condition when a button is clicked? Typically, this functionality would be achieved with JavaScript, but due to constraints, I am exploring alternative ...

CSS can always surprise with its unexpected animations

Currently developing a static website with CSS animations: * { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease- ...

When ALIGN-ITEMS: CENTER is removed, the <a> element expands to fill the entire line

Currently, I am delving into the world of CSS and grappling with a particular behavior that has caught my attention. section{ display: flex; flex-direction: column; align-items: center; } .banner-area a.banner-btn{ padding: 15px 35px; backgrou ...

Guide to attaching a page content button to a fixed header

I am currently developing a webpage with a sticky header, and I want to include an animated button that moves onto the header when scrolled past. You can check out my code snippet here: https://jsfiddle.net/ykL50pjf/ The specific ID for the button is #t ...

Structure of Divs with Bootstrap

Looking to create a layout with two divs side by side like the image below: Example However, when the screen width increases, the layout changes to this: Current Here is the code: Is there anyone skilled in this area who can guide me through it? Your a ...

What is the best way to ensure that the content fits within a div with a given max-width set by the parent div?

image description goes here I have a container set to a maximum width of 80%, but when the text inside extends beyond that, the container remains stuck at 80% instead of adjusting its size accordingly. Can anyone provide a solution for this issue? ...