Search code examples
htmlmaterial-designmaterial-componentsmaterial-components-webmdc-components

Put MDC Radio Buttons on Separate Rows

HTML Noob here: I am trying to get two MDC radio buttons in a form to appear aligned on separate rows (one below another). I have tried putting break tags in various places but it doesn't seem to have any effect. 

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shrine (MDC Web Example App)</title>
    <link rel="shortcut icon" href="https://material.io/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>
<form action="home.html">
    <div class="mdc-form-field">
        <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
            <div class="mdc-radio__background">
                <div class="mdc-radio__outer-circle"></div>
                <div class="mdc-radio__inner-circle"></div>
            </div>
        </div><br>
        <label for="radio-1">Radio 1</label>
    </div>
    <div class="mdc-form-field">
        <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="radio-2" name="radios" checked>
            <div class="mdc-radio__background">
                <div class="mdc-radio__outer-circle"></div>
                <div class="mdc-radio__inner-circle"></div>
            </div>
        </div>
        <label for="radio-2">Radio 2</label>
    </div>
    <br>
</form>

<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

</body>
</html>

I can get standard radio buttons to appear on separate rows using break tags as follows:

  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other

How can I get these radio-1 and radio-2 to appear on separate rows?

Solution

  • I think you just entered the brake at the wrong spot, it should be between the two divs of the "mdc-form-fields":

        <label for="radio-1">Radio 1</label>
</div>
<br>
<div class="mdc-form-field">
    <div class="mdc-radio">

    There are other solutions with a grid system, but this is the simple one