Adjust the size of text fields within Radio Button divs (form-checks)

I'm having an issue with my div element that has the classes "col-xs-8 col-xs-offset 2" centering a form in the middle of the screen. Inside this form, there are two text areas and 4 radio buttons with corresponding text inputs for each. The problem I'm facing is that while the text areas adjust their width smoothly when resizing the window, the radio button inputs remain fixed until the browser window is resized below their original length, at which point they start to resize smaller. I would like these radio button text inputs to adjust their width just like the text areas do.

Hopefully, this explanation is clear enough.

<link rel="stylesheet" href="style.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body class="container-fluid">

    <div class="row">

        <ol class="breadcrumb">
            <li><a href="#"><span class="glyphicon glyphicon-home"</span></a></li>
                <li><a href="#">Create Quiz</a></li>
            </ol>

        <form method ="POST">
            <div class="col-xs-8 col-xs-offset-2">
                <fieldset class="form-group"> 
                    <legend class="text-center">
                        <label for="quiz_title" >Quiz Title:</label>
                    </legend>

                    <div class="form-group">
                        <label for="question_text">Question</label>
                        <textarea class="form-control" id="explanation_text" rows="2"></textarea>
                    </div>

                    <div class="form-check">    
                        <input type="radio" class="form-check-input" name="answer" id="option1" value="radio_option1" required="required">
                        <label for="option1" class="form-check-label"> Answers: <a><span class="glyphicon glyphicon-pencil"></span></a>
                            <input class="form-control" type="text" id="option1" required="required">
                        </label>
                    </div>

                    <div class="form-check">    
                        <input type="radio" class="form-check-input" name="answer" id="option2" value="radio_option2" >
                        <label for="option2" class="form-check-label">
                            <input class="form-control" type="text" id="option2" required="required">
                        </label>
                    </div>

                    <div class="form-check">    
                        <input type="radio" class="form-check-input" name="answer" id="option3" value="radio_option3">
                        <label for="option3" class="form-check-label">
                            <input class="form-control" type="text" id="option3" required="required">
                        </label>
                    </div>

                    <div class="form-check">    
                        <input type="radio" class="form-check-input" name="answer" id="option4" value="radio_option4">
                        <label for="option4" class="form-check-label">
                            <input class="form-control" type="text" maxlength="5" id="option4" required="required">
                        </label>
                    </div>

                    <div class="form-group">
                        <label for="explanation_text">Explanation</label>
                        <textarea class="form-control" id="explanation_text" rows="2" placeholder="Optional..."></textarea>
                    </div>

                </fieldset>         
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="col-xs-6">
                        <button type="submit" class="btn btn-primary center-block pull-right" name="question_submit"> Save Question </button>
                    </div>
                    <div class="col-xs-6">
                        <button type="submit" class="btn btn-primary center-block pull-left" name="quiz_submit"> Save Quiz </button>
                    </div>
                </div>
            </div>

        </form>
    </div>

</body>

Screenshot of Resizing: https://i.sstatic.net/xERbP.png

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

If you're looking to combine a radio button with a text input in Bootstrap, consider using "Input Groups." This allows the text input to fill up the remaining space next to the radio button. Check out some examples here: https://getbootstrap.com/components/#input-groups-checkboxes-radios

I've modified your code slightly to showcase how this can be implemented. Run the code snippet and click on "Full page" to view it in full-page mode. Feel free to resize the window to see how it scales.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">

    <ol class="breadcrumb">
        <li><a href="#"><span class="glyphicon glyphicon-home"</span></a></li>
        <li><a href="#">Create Quiz</a></li>
    </ol>

    <form method="POST">
        <div class="col-xs-8 col-xs-offset-2">
            <fieldset class="form-group">
                <legend class="text-center">
                    <label for="quiz_title">Quiz Title:</label>
                </legend>

                <div class="form-group">
                    <label for="question_text">Question</label>
                    <textarea class="form-control" id="explanation_text" rows="2"></textarea>
                </div>

                <label for="option1">Answers: <a><span class="glyphicon glyphicon-pencil"></span></a></label>

                <div class="input-group" style="margin-bottom:10px;">
                    <span class="input-group-addon">
                        <input type="radio" name="answer" id="option1" value="radio_option1" required="required">
                    </span>
                    <input type="text" class="form-control" id="option1" required="required">
                </div>

                <div class="input-group" style="margin-bottom:10px;">
                    <span class="input-group-addon">
                        <input type="radio" name="answer" id="option2" value="radio_option2" required="required">
                    </span>
                    <input type="text" class="form-control" id="option2" required="required">
                </div>

                <div class="input-group" style="margin-bottom:10px;">
                    <span class="input-group-addon">
                        <input type="radio" name="answer" id="option3" value="radio_option3" required="required">
                    </span>
                    <input type="text" class="form-control" id="option3" required="required">
                </div>

                <div class="input-group" style="margin-bottom:10px;">
                    <span class="input-group-addon">
                        <input type="radio" name="answer" id="option4" value="radio_option4" required="required">
                    </span>
                    <input type="text" class="form-control" id="option4" required="required">
                </div>

                <div class="form-group">
                    <label for="explanation_text">Explanation</label>
                    <textarea class="form-control" id="explanation_text" rows="2" placeholder="Optional..."></textarea>
                </div>

            </fieldset>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <div class="col-xs-6">
                    <button type="submit" class="btn btn-primary center-block pull-right" name="question_submit"> Save Question </button>
                </div>
                <div class="col-xs-6">
                    <button type="submit" class="btn btn-primary center-block pull-left" name="quiz_submit"> Save Quiz </button>
                </div>
            </div>
        </div>

    </form>
</div>
</div>

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 'HTMLButtonElement' type cannot be assigned to a 'string' type in TypeScript, error code: 2322

In my code, there is a function that generates "tr" and "td" elements within a table. Using a For Loop, I successfully insert "td" elements into "tr". While everything is working as expected, Visual Studio Code is throwing an error. Below is the code snip ...

javascripthtmlinnerhtml

How can I change the hover color of the navigation bar buttons in the Bootstrap freelancer template?

Having an issue with the hover color of the main navigation button menu while using the official freelancer template: https://github.com/BlackrockDigital/startbootstrap-freelancer The main button is displayed on narrower screens and should have a hover c ...

cssbootstrap-4

Tips for CSS: Preventing onhover animation from resetting with each hover

I've created an on-hover CSS animation that smoothly transitions between images. However, I encountered a lagging issue when the user quickly hovers over SECTION ONE and SECTION TWO before the animation ends, causing the animation to restart and lag. ...

javascripthtmlcss

What is the best way to provide two unique versions of websites using one domain?

I've embarked on a project that requires a complete rewrite. Instead of opting for a big bang release, we've decided to utilize the Strangler Pattern as outlined here. The current application (details below) will continue to run unchanged under ...

javascripthtmlreactjsnginxarchitecture

``I am experiencing an issue where Bootstrap fails to load when my HTML files are stored within

My first web app using Spring and Thymeleaf hit a snag when I stored my HTML files in the "templates" folder as required by Thymeleaf. Suddenly, my bootstrap, JS, CSS, and other resources stopped working. Despite moving the CDN links to the header and tryi ...

htmlintellij-ideabootstrap-4thymeleaf

Guide on incorporating CSS into a JavaScript function

Currently, I am utilizing a jQuery monthly calendar where each day is represented by a cell. When I click on a cell, I can trigger an alert message. However, I also want to modify the background color of the specific cell that was clicked. Unfortunately, ...

javascriptjquerycss

The inline display property does not function properly with the <li> element

Here is the HTML code snippet I am working with: <div class="nav"> <ul class="nav-dots"> <li class='ni n1'><a href="" class='nia'>dot</a></li> <li class='ni n2'><a href="" clas ...

htmlcss

Show a picture without specifying its file location

Looking for Suggestions on a New Title I am interested in using a script as the source attribute for an image, like this : <img src="img.js"/> Note: I am open to using any programming language, whether it be javascript or php. Here is what my fol ...

javascriptphphtml

What is the most effective way to utilize forms in order to send information from both an input field and a dropdown selection menu with just one button click

Currently utilizing Material UI and React for my project. I am dealing with data from a text field and a drop down select that I want to be 'submitted' when a button is clicked https://i.sstatic.net/fvxo0.png Below is the code with unnecessary ...

javascripthtmlreactjsformsmaterial-ui

Unusual spacing issue observed between <div> elements on Internet Explorer, but not on Firefox or Opera

I am facing a common question that many others may have asked before, but I haven't been able to find a solution to my specific issue. When viewing my website on FF, Opera, and IE on Windows 7, everything displays correctly. However, when using IE7 o ...

htmlcssinternet-explorer

After sending a test email, inline CSS in Gmail seems to be functioning to some extent

While working on applying inline CSS styling to HTML for email, I have encountered an issue where the styling partially works when sending a test email. Can anyone provide guidance on how to resolve this problem? Steps to reproduce: Step 1 - apply CSS st ...

htmlcsshtml-emailinline-styles

Is it possible to stop Angular requests from being made within dynamic innerhtml?

I have a particular element in my code that looks like this: <div [innerHtml]="htmlContent | sanitiseHtml"></div> The sanitiseHtml pipe is used to sanitize the HTML content. Unfortunately, when the htmlContent includes relative images, these ...

javascripthtmlangularinnerhtml

The value I selected is not appearing in angular-ui-select

The angular select UI seems to be malfunctioning. [http://plnkr.co/edit/CKHbiSQ4tZXTjOyxpyBK?p=preview][1] The select lists are experiencing issues. I am unable to manipulate option.text and option.value properly. I am trying to display the selected val ...

javascriptangularjshtmlangular-ui-select

Split the content of a textarea before it reaches the next element

I have a textarea in my html file and I am trying to prevent the text from overlapping with an emoji icon button. I would prefer not to use a z-index for the emoji as it may cause issues with other elements on the page. Below is the code snippet: HTML & ...

htmlcss

How to Insert a Background Image into Advanced Custom Fields (ACF) using CSS

Hey there, I'm facing a bit of a challenge with this particular section. In the past, I've only included ACF PHP within HTML when the background image was directly in the HTML code. Now, however, I have two shapes specified in my CSS using pseudo ...

phphtmlcsswordpressadvanced-custom-fields

What is the method for altering the font color of the orderlist when a checkbox is checked?

I am currently working on a list with checkboxes for car options. The list is stored in an array and I am struggling to change the font color using AngularJS and HTML. This resembles a to-do list page where each car option has checkboxes for "yes" and "no ...

htmlangularjs

Tips for updating sass import files as the body class changes

Is there a way to dynamically change the SCSS file with color variables based on the changing body class? For example, if my HTML includes: <body class="custom"> ... </body> I would like to load in style.scss: @import 'custom&a ...

cssimportsass

Removing the tick mark from a simulated checkbox

I'm looking for guidance on updating this code to manage unchecking an emulated checkbox. Let's start with the original input HTML: <input type="radio" name="rf538" id="rf538" class="page_checkbox"> Next, here is the CSS for the class pa ...

htmlcsscheckbox

The art of organizing information: Tables and data management

Looking for a solution with a table: <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> Trying to format the cells to display as: 1 2 3 4 ...

htmlcss

The execution of the code may encounter errors initially, but it generally runs without any issues on subsequent attempts

I recently developed a piece of code to ascertain whether a value in the database is null or not. Here's the snippet: var table; var active = false; function CheckActive(table){ this.table = "table" + table + ""; var db = window.openDatabas ...

javascripthtml