How can I place two radio buttons in a single row with their labels, like the example shown in the picture?
How can I place two radio buttons in a single row with their labels, like the example shown in the picture?
Here is a solution to address your problem.
label {
display: block;
color: #7d7d7d;
}
.floatBlock {
margin: 0 1.81em 0 0;
}
.labelish {
color:#7d7d7d;
margin: 0;
}
.paymentOptions {
border: none;
display: flex;
flex-direction: row;
justify-content: flex-start;
break-before: always;
margin: 0 0 3em 0;
}
#purchaseOrder {
margin: 0 0 2em 0;
} <p class="labelish">Payment Method:</p>
<div id="paymentContainer" name="paymentContainer" class="paymentOptions">
<div id="payCC" class="floatBlock">
<label for="paymentCC"> <input id="paymentCC" name="paymentType" type="radio" value="CREDIT_CARD" /> Credit Card </label>
</div>
<div id="payInvoice" class="floatBlock">
<label for="paymentInv"> <input id="paymentInv" name="paymentType" type="radio" value="INVOICE" /> Invoice </label>
</div>
<div id="pay3rdParty" class="floatBlock">
<label for="payment3rd"> <input id="payment3rd" name="paymentType" type="radio" /> Third Party </label>
</div>
</div>Note: Inspired by codepen
If you want to achieve this layout, make sure to include the CSS property display: flex;:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: space-around;
padding: 16px;
}
.radio-container {
display: flex;
margin-right: 15px;
}
.radio-group {
display: flex;
justify-content: end;
flex-direction: column;
}<div class="container">
<div class="radio-container">
<p>radios 1</p>
<div class="radio-group">
<label><input type="radio" name="group1" />radio 1</label>
<label><input type="radio" name="group1" />radio 2</label>
</div>
</div>
<div class="radio-container">
<p>radioss 2</p>
<div class="radio-group">
<label><input type="radio" name="group2" />radio 1</label>
<label><input type="radio" name="group2" />radio 2</label>
</div>
</div>
<div class="radio-container">
<p>radioss 3</p>
<div class="radio-group">
<label><input type="radio" name="group3" />radio 1</label>
<label><input type="radio" name="group3" />radio 2</label>
</div>
</div>
</div>Possible Duplicate: Retrieve -moz-transform:rotate value using jQuery Firefox 15 - Chrome: $('#img2').css('transform'); return => "rotate(90deg)" Firefox 16 $('#img2').css('transform'); return => mat ...
When using the tinymce editor, I attempt to modify my images. I currently have an image within it and I am trying to dynamically change the path of this image with: tinymce.activeEditor.selection.getNode().src = '/my/path/' Surprisingly, this m ...
I remember a while ago, CNET had these amazing Social Share buttons that, when clicked, would reveal a "dropdown box" with the social network share dialog. Does anyone know how they achieved that? I've searched but couldn't find any information ...
I attempted to apply styles to two components in order to create space between them, visible on both larger and smaller displays. The code snippet appears as follows: <div> <CustomPageHeader pageTitle={t('offersPage.pageHeader')} ...
Is there a way to utilize an object as the @input parameter in HTML? For example: <app-home [param]="user.salary"></app-home> However, the type of my user object is structured like this: user:Person=new Employee(); The classes invol ...
Although the font Arial Black is commonly available on both Mac and PC systems, it is not accessible on iOS devices. Is there a way for a webpage to implement CSS techniques or tricks (such as assigning a class like "mobile" or "ios" to the body element), ...
My goal is to display a full background image on a website, ensuring that the bottom of the image aligns with the bottom of the browser window without any cropping. I want the image to be positioned at the bottom left corner, cutting off anything above o ...
Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...
Having successfully implemented a form with Bootstrap validation, I encountered an issue where the AJAX Post method fails to execute after validation. The catch clause does not capture any errors and only the ajax portion of the code doesn't run. Belo ...
I've been trying to find an answer to this question online but haven't had any luck. I designed a responsive bottom navbar with Bootstrap, but I'm encountering an issue when listing multiple items using the <li> tag - it creates a new ...
I've been struggling to vertically center the config button (#config) and none of the options I've tried worked the way I wanted. Here is a link to my CodePen: http://codepen.io/fenwil/pen/ONRXwz Here is the crucial part of the code that need ...
I created a game where the arrow keys control movement and the space bar shoots, but every time I press the down key or space bar, it scrolls to the bottom of the web page. Is there a way to adjust the CSS so that it focuses on the game div tag without ...
The instructions provided in the documentation for the quill module indicate that you can manually create a toolbar using HTML, and then pass the corresponding DOM element or selector to Quill. This will result in the ql-toolbar class being added to the to ...
I'm looking to implement a specific animation in Internet Explorer. The goal is to rotate an image like a coin, displaying a different image on the other side. I suspect that the issue lies with Backface-visibility in IE, but I'm not entirely sur ...
I encountered an issue with a div that has a background image. Upon loading the page, the background image fails to display initially. However, when I hover over the div and then move my mouse elsewhere (due to a specific function described below), the bac ...
Trying to utilize the Apps Script method setContent() in Google Apps Script to insert a link into a basic index.html file. var newDocLink = "https://docs.google.com/document/d/1loBt7T7-4qd0ORBXiTFeDQxuG..."; // newDocLink variable is set with a Googl ...
I'm currently experimenting with creating a color gradient in javascript using numerical values within some of the divs to indicate scale. However, I've run into an issue where as the values get larger, they are cut off due to the float:left prop ...
Check out my codesandbox example (here) showcasing how I have set up my current app with Material-UI grid. I have 5 components that need to be positioned in a specific way for different screen sizes. For screens sized lg and above, I want the components t ...
For my email template, I need to center text over an image. Although I attempted a solution from this source, the image is not being displayed. Below is the code snippet: <div align="center" style="margin: 0; padding: 0;"> <table border="0" c ...
There is a button on my website that, when clicked, reveals a form. The code I am using for this functionality is: $('#theform').addClass('hidden') $('#theform').removeClass('hidden'); <div id="theform" c ...