Trädvy Permalänk
Medlem
Plats
Tranås
Registrerad
Okt 2009

"Trasig" on/off switch.

Hej. Sitter och pillar lite med html och css men kan inte få det till att fungera riktigt. Min On/off switch ser inte ut som den gör på https://proto.io/freebies/onoff/ där jag tagit den ifrån. Det är när jag kör koden tillsammans med lite annan kod jag tagit från http://materializecss.com/cards.html.

HTML KOD

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--Import free_onoffswitch.css--> <link type="text/css" rel="stylesheet" href="css/free_onoffswitch.css" media="screen,projection"/> <!--Import Google Icon Font--> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div class="card" style="width:15%"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="images/office.jpg"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> <p><a href="#">This is a link</a></p> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div> </div> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> <label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> <!--Import jQuery before materialize.js--> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> </body> </html>

Dold text

Så här ser det ut: Bild
Någon som har någon bra idé på vad som kan orsaka detta? Kan det vara något med typsnitt eller liknande?

Trädvy Permalänk
Medlem
Plats
Finland
Registrerad
Maj 2004

Om du själv testar att ta bort importen av materialize.min.css så ser du att knappen ser ut som den ska. Det är alltså något i den filen som förstör switchen.