Resizing Radio Button

How can I make Radio Buttons and Check Boxes change size relative to the system resolution?

Alright I found an answer to my own question by using the utility created by this post
and changing it a little bit to fit my needs. Most all of my code was fine, but the selectors I was using didn't seem to work for these two. I'll put the two altered files below...

RadioButton

.radio-button {
    /*-fx-font-size: 1em;*/
}

.radio-button .radio  {
    -fx-background-insets: 0em;
    -fx-border-insets: 0em;
    -fx-border-radius: 1em;
    -fx-padding: 0.25em;
}

.radio-button .dot {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-padding: 0.3em;
}

These were the only selectors needed for size changes. I had some of the other selectors for hover, focused, and such, but they were only for style with no size changes. The one big change was

.RadioButton -> .radio-button

CheckBox

.check-box {
    /*-fx-font-size: 1em;*/
}

.check-box .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
    -fx-padding: 0.2em;
}

.check-box .mark {
    -fx-background-insets: 0.083333em 0em 0.083333em 0em, 0em;
    -fx-padding: 0.4em;
    -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
}

Just like with RadioButton there were other selectors used for style, but not for sizing. All of the hover, focused, etc selectors will just default to the default values that I also used in the .box selector. The two -fx-padding tags affect the size of the mark and the box, and they were changed a little from my question. The main change though, just like RadioButton, was changing from

.CheckBox -> .check-box

I still don't really understand why this would cause any issue cause as long as the stylesheets are getting added correctly they should bothwork, but in my case the .check-box was the only one that functioned how I wanted.

Hopefully this helps anyone with similar issues!

Increase the size of radio buttons

If you dont want to change the scale, you can use CSS to create custom styling (checkbox used as an example). The advantage is you then arent limited to the browser specific look and feel of the control.

Demo Fiddle

HTML

<input type='checkbox' />

CSS

input[type=checkbox]{
    position:relative;
    margin:5px;
}
input[type=checkbox]:before{
    position:absolute;
    height:30px;
    width:30px;
    top:-5px;
    left:-5px;
    border:2px solid grey;
    content:'';
    background:white;
    border-radius:100%;
}
input[type=checkbox]:after{
    position:absolute;
    display:none;
    height:15px;
    width:15px;
    top:5px;
    left:5px;
    content:'';
    background:grey;
    border-radius:100%;
}
input[type=checkbox]:checked:after{
    display:block;
}

radio button is splitting in two lines when resize the page

Try this stylesheet with radio Buttons and it will work:

<style type="text/css">
    .radioBL input[type="radio"] {
        margin-right: 10px;
        word-break: break-all;
    }
 
    .radioBL label {
        display: inline !important;
    }
</style>

<asp:RadioButtonList  CssClass="radioBL" ID="test" runat="server" >
      <asp:ListItem CssClass="label"  Text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."></asp:ListItem>
      <asp:ListItem CssClass="label"  Text="Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."></asp:ListItem>
          
  </asp:RadioButtonList>

you will see this when you run it:

Getting radio buttons to realign at a smaller resolution

You can use a media query here, when the screen size gets below 600 make your input fields 100% width

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media only screen and (max-width: 600px) {
  input {
    width: 100%
  }
}

<div>
  <div class="col-sm-4 col-lg-8" style="width:100%">
    <input type="radio" class="gender" value="Male" @required>
    <label for="MALE">Male</label>

    <input type="radio" class="gender" value="Female">
    <label for="FEMALE">Female</label>

    <input type="radio" class="gender" value="Prefer not to say">
    <label for="PREFERNOTTOSAY"> Prefer not to say </label>

    <input type="radio" class="gender" value="Other">
    <label for="OTHER"> Other (please specify) </label>

    <input type="text" class="form-control c-form__input" value="">
  </div>
</div>
</div>

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

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>

---

Related Topics