CODEWITHSUNDEEP
cssmaterialize
B00AJ
B00AJ

Reputation: 31

Materialize css Radio buttons not visible

I am trying to add materialize radio buttons onto my page but for some reason the actual radio buttons do not show up, It's a sharepoint site where I am linking to the materialize js and css files, the other text input fields are working and I just copied and pasted the example from the materialize docs. While looking for an answer to the problem I noticed that on one of the docs pages from google the same issue was happening. I've attached a screenshot of this and it can be found here. Any idea how I can get these radio icons to show up?

http://materializecss.com/forms.html

enter image description here

Edit: Here is my example code 

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    </head>
    <body>
      <form action="#">
        <p>
          <label>
            <input name="group1" type="radio" checked />
            <span>Red</span>
          </label>
        </p>
        <p>
          <label>
            <input name="group1" type="radio" />
            <span>Yellow</span>
          </label>
        </p>
        <p>
          <label>
            <input class="with-gap" name="group1" type="radio"  />
            <span>Green</span>
          </label>
        </p>
        <p>
          <label>
            <input name="group1" type="radio" disabled="disabled" />
            <span>Brown</span>
          </label>
        </p>
      </form>
    </body>
    </html>

and I want it to show up like it does here

http://materializecss.com/radio-buttons.html

Upvotes: 3

Views: 11626

Answers (9)

hoogw
hoogw

Reputation: 5525

I have same error fixed by add style tag in html to overwrite opacity to 1

materialize css set radio opacity to 0, we must undo it to 1

how to fix this issue, click here

or issue 2 , click here

your html add following style tag to overwrite it

                        <!--   bug fix,   radio button is hidden at openlayer base map switcher, due to materialize css set radio opacity to 0 , fix by undo opacity to 1 -->

                                  <!--  issue and fix
                                      https://github.com/walkermatt/ol-layerswitcher/issues/388
                                      https://github.com/walkermatt/ol-layerswitcher-examples/issues/2
                                      https://stackoverflow.com/questions/49757521/materialize-css-radio-buttons-not-visible
                                    -->
                                  
                                    
                                  <style>
                                        [type="radio"]:not(:checked), [type="radio"]:checked {
                                            position: relative; 
                                            opacity: 1; 
                                        }
                                            
                                  </style>

                        <!--   bug fix,   radio button is hidden at openlayer base map switcher, due to materialize css set radio opacity to 0 , fix by undo opacity to 1 -->

Upvotes: 0

Дима Шестаев
Дима Шестаев

Reputation: 141

Just try this one (it's just a copy of the link attached in the question:

<form action="#">
    <p>
        <input name="group1" type="radio" id="test1" />
        <label for="test1">Red</label>
    </p>
    <p>
        <input name="group1" type="radio" id="test2" />
        <label for="test2">Yellow</label>
    </p>
    <p>
        <input class="with-gap" name="group1" type="radio" id="test3"  />
        <label for="test3">Green</label>
    </p>
    <p>
        <input name="group1" type="radio" id="test4" disabled="disabled" />
        <label for="test4">Brown</label>
    </p>
</form>

Upvotes: 0

Angie Wang
Angie Wang

Reputation: 11

Label for attribute should be same as radio button id.

<input id="choice_1" name="group1" type="radio" checked/>   
<label for="choice_1">Red</label>

<input id="choice_2" name="group1" type="radio" />  
<label for="choice_2">Yellow</label>

Upvotes: 1

Maghfirah Suyuti
Maghfirah Suyuti

Reputation: 1

To be simple, you can try this

<p>
  <input class="with-gap" name="group1" type="radio" id="red" checked />
  <label for="red">Red</label>
</p>

Upvotes: 0

R&#233;gis Faria
R&#233;gis Faria

Reputation: 11

To maintain the Materialize radio appearance, just Add this code to your Style:

[type="radio"]:not(:checked) + span, [type="radio"]:checked + span {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    -webkit-transition: .28s ease;
    transition: .28s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[type="radio"] + span:before, [type="radio"] + span:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 16px;
    height: 16px;
    z-index: 0;
    -webkit-transition: .28s ease;
    transition: .28s ease
}

[type="radio"]:not(:checked) + span:before, [type="radio"]:not(:checked) + span:after,
[type="radio"]:checked + span:before, [type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before, [type="radio"].with-gap:checked + span:after {
    border-radius: 50%
}

[type="radio"]:not(:checked) + span:before, [type="radio"]:not(:checked) + span:after {
    border: 2px solid #5a5a5a
}

[type="radio"]:not(:checked) + span:after {
    -webkit-transform: scale(0);
    transform: scale(0)
}

[type="radio"]:checked + span:before {
    border: 2px solid transparent
}

[type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
    border: 2px solid #26a69a
}

[type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:after {
    background-color: #26a69a
}

[type="radio"]:checked + span:after {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
}

[type="radio"].with-gap:checked + span:after {
    -webkit-transform: scale(0.5);
    transform: scale(0.5)
}

[type="radio"].tabbed:focus + span:before {
    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1)
}

[type="radio"].with-gap:disabled:checked + span:before {
    border: 2px solid rgba(0, 0, 0, 0.42)
}

[type="radio"].with-gap:disabled:checked + span:after {
    border: none;
    background-color: rgba(0, 0, 0, 0.42)
}

[type="radio"]:disabled:not(:checked) + span:before, [type="radio"]:disabled:checked + span:before {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.42)
}

[type="radio"]:disabled + span {
    color: rgba(0, 0, 0, 0.42)
}

[type="radio"]:disabled:not(:checked) + span:before {
    border-color: rgba(0, 0, 0, 0.42)
}

[type="radio"]:disabled:checked + span:after {
    background-color: rgba(0, 0, 0, 0.42);
    border-color: #949494
}

Upvotes: 1

bencekd
bencekd

Reputation: 1595

I've run into the same error, and as B00AJ writes the problem with setting the opacity to 1 is that it only brings back the standard radio button.

Nevertheless I found out that if you use the following syntax you can use the buttons with materialize styling (as they should appear with the original syntax as per the documentation)

<input id="choice_1" name="group1" type="radio" checked/>   
<label for="choice_1">Red</label>

<input id="choice_2" name="group1" type="radio" />  
<label for="choice_2">Yellow</label>

Upvotes: 2

Cristian
Cristian

Reputation: 1

It seems that the problem is the location of the script tags in your file.

I copied the code from the materialize site but I put the link tag in the head and the script tags in the body, jquery first, then materialize. This way you don't need an extra css file.

Upvotes: 0

Jihoo Yim
Jihoo Yim

Reputation: 81

I checked through google developer's tool (F12) in chrome.

[type="radio"]:not(:checked), [type="radio"]:checked {
    position: absolute;
    opacity: 0; 
    pointer-events: none;
}

Because "opacity" property value is zero

Materialize showed standard codes examples :

  <label>
    <input name="group1" type="radio" checked />
    <span>Red</span>
  </label>

But your code :

  <input name="group1" type="radio" id="test1" />
  <label for="test1">Red</label>

Upvotes: 7

user6297534
user6297534

Reputation: 149

Please write below css as override to your own CSS file.

[type="radio"]:not(:checked), [type="radio"]:checked {
     position: relative; 
     opacity: 1; 
}

Just for your information the code responsible for invisible radio button is as follows:

[type="radio"]:not(:checked), [type="radio"]:checked {
     position: absolute; /* This is hiding radio buttons */
     opacity: 0; /* This is hiding radio buttons */
    pointer-events: none;
}

Upvotes: 3

Related Questions