How to horizontally align Yii's CHtml radioButtonList using CSS

I am currently using yii framework for my development and I have encountered an issue. While writing CSS, I was able to align my <input tags in HTML properly. However, when I applied the same CSS to yii, the alignment got messed up. Can anyone offer some assistance with this?

I am aiming for the following layout:

Below is the code snippet from yii:

<div id="gender">
        <label>Gender :</label>
        <?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array('separator'=>,'')); ?>
    </div>

CSS Styling:

 <style type="text/css">          
           div#gender {
                    margin-top:20px;
                    margin-left:200px;
           }      

           div#gender label
           {
                   font-weight: bold;
                   font-size: 0.9em;
                   float:left;
                   margin-left:2px;
                   text-align:left;
                   width:100px;
            }

</style>

The output appears as shown in the image below:

cssyiiradiobuttonlist

Answer №1

<?php echo CHtml::radioButtonList('gender_code', '', array('Male' => 'Male','Female' => 'Female'), array(
    'labelOptions' => array('style' => 'display:inline'), // include this code
    'separator' => '',
)); ?>

Answer №2

It appears that you could use

div#gender input
{
    float:left;
}

Answer №3

To implement this styling, insert the following CSS snippet at the bottom of your css/main.css file:

input[type=radio] + label,
input[type=checkbox] + label {
    display: inline !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

The CSS navigation bar is not properly aligned in the center

This menu was constructed by me: JSBIN EDIT ; JSBIN DEMO Upon closer inspection, it appears that the menu is not centered in the middle of the bar; rather, it is centered higher up. My goal is to have it positioned lower, right in the middle. I ...

javascripthtmlcss

Create a circular rolling image effect using CSS3 and jQuery when the page is loaded

My div box features a rounded image that I want to roll like a ball on the floor after the page loads. After rolling, I want to position the image perfectly at the center of the box. css: #box{width:900px;height:150px;position:relative;background:red;ove ...

jqueryhtmlcsscss-transitionscss-transforms

What is the best way to design a Bootstrap grid layout that includes a responsive left column with a minimum width and a scrollable right column?

I'm so close to getting the desired look and behavior, but I'm facing a problem with the scrolling in the right column. The scrollbar is visible but it's not scrolling the content on the right side. It should look like this: . Currently, i ...

htmlcsstwitter-bootstrapbootstrap-5

bootstrap v4 push pull missing

Exploring the latest updates in Bootstrap v4: https://getbootstrap.com/docs/4.0/migration/#grid-system-1 ...The push and pull modifier classes have been replaced by the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4 ...

htmlcssbootstrap-4

What is the best method for adding space around a Bootstrap card?

Here is the HTML template that I am working with: <div class='row'> <div class='col-md-6'> <div class='card mx-auto'> <div id='main'> {% for candidate ...

htmlcsstwitter-bootstrapbootstrap-4

Can a Material UI Select element be made unresponsive to hover effects?

When a user hovers over an element, I want to achieve the following functionality: document.getElementById("dropdownCategory").disabled = true; <Tooltip arrow placement="right" title={props.description} > <FormControl id="dro ...

cssreactjsmaterial-ui

svg rect mistakenly appearing as a rounded polygon

I found a cool SVG pie chart on this codepen that I want to modify. The original chart is 50 x 50 and animated, but I want to make it 20 x 20. To resize the pie chart, I tried changing the width, height, radius, and center points in the code. I also adjus ...

csssvg

The content box is not aligning properly with the content inside, causing it to vanish instead of overflowing with

There seems to be an issue with the content boxes on one of my pages. They all use the same CSS, but for some reason, there is a scroll bar in one of the content boxes and the footer doesn't align properly. The problem arises when I add overflow:auto ...

htmlcss

Slow transition with a gradual appearance and disappearance for the background

I am currently implementing a fading background image effect on my web page, where the current image fades out as the next one fades in. Here is my code: var backgrounds = []; backgrounds[0] = './img/bg.jpg'; backgrounds[1] = '. ...

javascriptjqueryhtmlcss

Using Javascript to dynamically update custom CSS properties

I am currently utilizing the paper-scroll-header-panel along with a custom CSS property paper-scroll-header-panel { --paper-scroll-header-panel-full-header: { background-image: url(images/abcd.jpg); }; } in order to customize th ...

javascriptcsspolymerpolymer-1.0

What is the best way to design this shape using CSS?

Can one generate this geometric figure using CSS instead of an SVG? It's essentially a rectangle with a curved inversion at the bottom. Any assistance would be greatly appreciated! https://i.sstatic.net/HPFjL.png ...

cssshapescurve

The switch toggle design resembles a checkbox in CSS styling

Can someone assist me in troubleshooting an issue with loading CSS files from mdbootstrap in this example: I have imported the necessary mdbootstrap CSS and JS links along with a custom CSS file, but it doesn't seem to be working properly. Any help w ...

cssbootstrap-4mdbootstrap

What is the reason that the text-overflow property does not function properly within a nested flexbox

Why does my overflow text only show ellipsis when one parent element with display: flex is removed? It seems the text width determines the parent's width rather than using ellipsis. To test this behavior, try reducing the browser width in the provided ...

htmlcss

What is the precise description of the CSS property font-size when measured in pixels?

When defining the CSS property font-size, it can be set to a specified length in pixels. What exactly does this measurement describe? Is it the width or height of a particular character (such as 'm'), is it an attribute within the font file desc ...

htmlcssfontstypeface

Struggling to design a functional mobile keyboard

I've been working on creating a mobile keyboard, but I'm facing some issues with the JavaScript part. The problem seems to be in my code as the keyboard isn't responding when I try to type. Here's a snippet of the JavaScript I'm us ...

javascriptjqueryhtmlcsskeyboard

What is the best way to create non-standard text wrapping in HTML and CSS that is both semantic and sleek, avoiding square or circular shapes?

Is there a way to achieve text wrapping like this using semantic and clean HTML and CSS that is compatible with all browsers? The only solution I can think of is adding different classes to the <p> element. However, the drawback of this approach is ...

jquerycssxhtml

Adjust picture to fit in div and align vertically

JSFiddle In my fluid layout, I have a div with a required aspect ratio of 1:1. This div can contain text, an image, or both. The challenge is to vertically align the text and ensure the image fits within the div without exceeding its boundaries or losing ...

css

Is there a way to implement this toolbar in Ionic Angular?

https://i.sstatic.net/sGd1o.png I am looking to replicate the toolbar shown in the image above using Ionic. As a beginner in Ionic development, I am finding it challenging to translate the design into code. I attempted to use a grid layout, but the varyin ...

javahtmlcssionic-frameworkionic4

Is it possible to place a secondary read more button next to the first one using CSS?

If you notice the code snippet, you will see that a "read more" button appears. How can I add another "read more" button to align side by side? I may even want to include three "read more" buttons, each opening in a separate modal box. ...

htmlcss

Troubleshooting CSS3 pulse animation failure in Internet Explorer and Firefox

My animated background is looping infinitely and working perfectly in Chrome and Safari. However, I'm having trouble getting it to work in IE and FF. I've tried looking at other people's questions on this topic but still can't figure it ...

htmlcss