CODEWITHSUNDEEP
cssasp.net-mvcasp.net-mvc-4bootstrap-4
Kerieks
Kerieks

Reputation: 1064

Radio buttons to look like buttons

I'm new to MVC Razor and need to change how a radio button list is displayed. Currently all the options are together (no spaces between them), but I need to display them to look like buttons. How do I "detach" them to look like buttons and act like a radio button list?

This is what it currently looks like:

enter image description here

And this is what I need them to look like:

enter image description here

I need to apply this style for all radio buttons throughout the project. Here is how they are created:

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div data-toggle="buttons" class="btn-group">
                                <label class="btn btn-radio">
                                    @Html.RadioButtonFor(m => m.Address.RiskIsResidence, "Yes", new { name = "radIsResidence" }) Yes
                                </label>

                                <label class="btn btn-radio">
                                    @Html.RadioButtonFor(m => m.Address.RiskIsResidence, "No", new { name = "radIsResidence" }) No
                                </label>
                            </div>
                        </div>

The CSS: 

    .btn-radio {
/*border-radius: 30px;*/
border: 1px solid #dcdcdc;
cursor: pointer;
display: inline-block;
font-weight: 400;
/* padding: .75em 1em; */
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-width: 110px;
font-size: 14px;
letter-spacing: 2px;
line-height: 30px;
height: 50px;
text-align: center;
text-transform: none;
}

.btn-radio:hover {
    border: 1px solid #1e73e9 !important;
}

Is there some styling that I can appply or what is the alternative to be able to do this?

Upvotes: 0

Views: 218

Answers (1)

Tetsuya Yamamoto
Tetsuya Yamamoto

Reputation: 24957

The problem seem coming from this div element, which has btn-group class:

<div data-toggle="buttons" class="btn-group">

As mentioned in Bootstrap 4 documentation, btn-group used to group multiple buttons so that they're looked like in a series of buttons. If you want little gaps between radio buttons, then simply remove btn-group class, as provided in below snippet:

$(function () {
    $('label').click(function () {
        $(this).addClass('btn-primary').siblings().removeClass('btn-primary');
    });
});
.btn-radio {
    border: 1px solid #dcdcdc;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-width: 110px;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 30px;
    height: 50px;
    text-align: center;
    text-transform: none;
}

.btn-radio:hover {
    border: 1px solid #1e73e9 !important;
}


input[type="radio"] {
  display: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div data-toggle="buttons">
         <label class="btn btn-radio">
             <input id="RiskIsResidence" name="RiskIsResidence" type="radio" value="Yes"> Yes
         </label>
         <label class="btn btn-radio btn-primary">
             <input checked="checked" id="RiskIsResidence" name="RiskIsResidence" type="radio" value="No"> No
         </label>
    </div>
</div>

This fiddle also contains the same solution as the snippet above, but using @Html.RadioButtonFor() helper instead of hardcoded input value.

Upvotes: 1

Related Questions