Achieving consistent radiobutton width across various column widths

Struggling to match the size of the radio button area (input-group-addon) in col-sm-4 and col-sm-6 columns? Considering using min-width to achieve a consistent width but finding no success? Seeking uniform width for radio button controls? Check out this visual example showcasing the issue: first radiobutton wider than the second input-groups. imgur link

.form-control {
  width: 150px;
}

.radio-width {
  width: 30px;
}
<div class="container">
  <div class="form-group">
    <div class="col-sm-4">
      <div class="input-group">
        <span class="input-group-addon radio-width">
          <span class="control-label">
            <input type="radio" name="anyDate" value="anyDate"> 
          </span> 
        </span>
        <div class="input-group-addon">
          <input type="text" class="form-control">          
        </div>                            
      </div>
    </div>
    <div class="col-sm-6">
      <div class="input-group">
        <span class="input-group-addon radio-width">
          <span class="control-label">
            <input type="radio" name="dateRange" value="dateRange"> 
          </span> 
        </span>
        <div class="input-group-addon">
          <input type="text" class="form-control">      
        </div>                         
      </div>
    </div>
    <div class="col-sm-2">
      <input type="submit" value="Submit" class="btn btn-primary">
    </div>
  </div>
</div>

View the fiddle here: https://jsfiddle.net/DTcHh/20504/

Answer №1

It seems like there may be some confusion regarding the input-group-addon element. To correctly code an input-group-addon, it should look like this:

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

Therefore, your code should resemble the following structure:

<div class="input-group">
    <span class="input-group-addon"> <!-- avoid using radio-width attribute -->
        <input type="radio" name="anyDate" value="anyDate"> 
    </span>
    <input type="text" class="form-control input-full">      
</div>

You can view a live example on JSFiddle.

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

Fluid Grid System with columns of specific dimensions

Recently delving into the world of Foundation Framework, I've just begun utilizing it for my projects. My current task involves crafting a responsive design with the help of the Foundation Grid system. Specifically, I've set up a grid layout for ...

Unusual display of footer controlled by CSS in certain template pages

I recently made changes to the footer on a template-based website. I noticed that, for some unknown reason, the footer is not appearing at the bottom of the page as it should be. I wonder if the footer functionality is faulty altogether and if I only got ...

Discover the ultimate guide to harmonize IE 9 with the ingenious Bootstrap Multiselect plugin developed by davidstutz

I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...

Multiple instances of jquery click event firing when utilizing class selector

Here is the HTML code I have: <li><div class="myLink" id=1>A<div> <li><div class="myLink" id=2>b<div> <li><div class="myLink" id=3>c<div> <li><div class="myLink" id=4>d<div> <li> ...

Is there a way to divide text in half while preserving the HTML structure?

I am in need of setting up an RSS feed where only a portion (or a specified number of characters) of the article's text is displayed, while keeping all HTML tags intact (such as images or YouTube videos). For instance, what should happen if the chara ...

add text nodes with unnecessary quotation marks around my selection list

Looking to incorporate a select list into my website using a button. I must utilize nodes for access within the DOM to retrieve its value later, so innerHTML isn't an option. Experiencing difficulty as createTextNode seems to encase my list in quota ...

What's the reason for the icon not updating in the responsive mode?

I am venturing into the world of responsive web design for the first time. My aim is to create a website menu that drops down when the menu icon is clicked, using the onclick command in JavaScript. However, upon inspecting my browser, I noticed an uncaught ...

How to prevent text from extending beyond the maximum width limit set in HTML

I defined a max-width of 500px for the div element, but the text inside is overflowing the width instead of wrapping to the next line. Can someone please assist with which code needs to be modified? Here is the code snippet in question: The div is set t ...

What is the best way to adjust the height and width of an mp4 video in Internet Explorer?

I came across a code snippet that looks like this video { object-fit:fill; } <!DOCTYPE html> <html> <body> <video width="800" height="240" controls> <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4" ...

Storing HTML form information into a CSV file using Python and Flask

I am struggling with a small .py program that renders 2 HTML pages. One of the pages contains a basic form asking for a name and comment. I am having difficulty figuring out how to take the data entered in the form and store it into a csv file. While I h ...

What is the best method for transforming HTML into valid XHTML?

I'm dealing with a string of HTML, and in this particular example it appears as follows: <img src="somepic.jpg" someAtrib="1" > I'm currently attempting to create a regular expression that will match the 'img' node and add a sla ...

Remove the most recent row that was dynamically inserted into an HTML table

Currently, I am in the process of developing an ASP.NET Web Api 2.2 application using .NET Framework 4.5, C#, and jQuery. Within one of my views, I have set up the following table: <table id ="batchTable" class="order-list"> <thead> ...

Creating interactive tooltips in Shiny applications with the help of ShinyBS

I am attempting to incorporate the shinyBS package into my basic app. My goal is to generate dynamic tooltip text based on each radioButton selection. To better illustrate my issue, I have drafted a simple code snippet in HTML & JS. While I came acro ...

What is the best way to position scale descriptions correctly?

The alignment of the Low and High scale descriptions over the first and 7th option in the image below is not as precise as I had hoped. While attempting to create elements with styles that match the scale closely in Bootstrap, I encountered difficulties in ...

jQuery - draggable and resizable functionality

On my website, I offer a unique feature where users can create their customized web pages based on pre-built templates. Initially, users start with a predefined page that they can then personalize by editing text areas, adding images, videos, and more. T ...

Floating dropdown within a scrolling box

How can I ensure that the absolute positioned dropdown remains on top of the scrollable container and moves along with its relative parent when scrolling? Currently, the dropdown is displayed within the scrollable area. The desired layout is illustrated i ...

Use an external javascript file in AngularJS if permitted

To ensure that my HTML page only loads an external JavaScript file when the variable $scope.jsallowed is set to true, I attempted the following code implementation within my AngularJS based page: <script src="assets/js/slider.min.js" data-ng-if="jsallo ...

Validation of multiple rows

I am currently developing a barcode system, where my validation process depends on one specific row that is supposed to validate based on the requested quantity of an item. The validation works correctly for a single item, but I encounter issues when tryin ...

Preventing image overlap in Bootstrap when window size is reduced

Here is the code snippet: <div id="members"> <div class="container-fluid"> <div class="row"> <div id="members" class="col-md-12 text-center"> <h3>Text</h3> &l ...

Transform the image background on mouse hover using CSS

On my php page, I am dynamically visualizing thumbnails. To ensure that they are all the same size, I use the following method: <a class="zoom" href="..."> <img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $ ...