CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Dbercules
Dbercules

Reputation: 719

Resize text fields contained by Radio Button (form-check) div

I have a div which is "col-xs-8 col-xs-offset 2" that centers a form in the middle of the screen. Within this form I have two text areas and 4 radio buttons with corresponding text inputs for each. My problem is that while the text areas span the width of the container and resize appropriately when the window is resized, the inputs beside the radio button remain the same size until the browser is resized below their original length at which point they resize smaller. I would like these radio button text inputs to span in the same manner that the text areas do.

I hope this 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>

Resizing Process: Screenshot

Upvotes: 3

Views: 903

Answers (1)

Cave Johnson
Cave Johnson

Reputation: 6778

Bootstrap has something called "Input Groups" that you might want to try. You can put the radio button next to a text input in an input group and the text input will fill up the remaining space. Look at some examples here: https://getbootstrap.com/components/#input-groups-checkboxes-radios

Here is something I put together using your code. Click on "Run code snippet" and then click "Full page" to see it in full page mode. Then you can resize the window to see how it will scale.

<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>

Upvotes: 4

Related Questions