Components: radio and checkbox are not rendered properly (native elements are visible)

[maciejtreder]

Bug

expected behavior

Radio and checkbox native elements should be hidden

current behavior

native elements are visible

Which versions of Angular, Material, OS, browsers are affected?

OSX - Safari, Chrome (I did not check other browsers)
angular - 2.4.3
material - 2.0.0-beta.1

[dahaupt]

@maciejsobala Can you provide a plunker, so we can reproduce your issue and investigate further?
Here is the template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

This should be fixed with including a theme, looks like you didn't have one.
Theming Guide: https://github.com/angular/material2/blob/master/guides/theming.md

[maciejtreder]

@dahaupt

1. Unfornatelly template provided by you is not working

1. I am using a theme:

My style.scss file begins with:

@import './palette';

And here is palette.scss

@import '../../../node_modules/@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include md-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.

$primary: md-palette($md-light-blue, 600);
$accent:  md-palette($md-light-blue, 800);
$secondary: md-palette($md-teal, 400);

// The warn palette is optional (defaults to red).
$warn:    md-palette($md-deep-orange);

$foreground: md-palette($md-teal);

$background: md-palette($md-blue-grey, 200);



// Create the theme object (a Sass map containing all of the palettes).
$theme: md-light-theme($primary, $accent, $warn);



// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($theme);

I am using 'raw-loader' and 'node-sass' for compiling styles:

{
          test: /\.scss$/,
          loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
        }

[maciejtreder]

I think, that the problem is that _a11y.scss file is not included to my final css bundle.

I see in my website code, takt checkbox input have class .cdk-visually-hidden,
but styles from _a11y.scss are not applied:

@mixin cdk-a11y {
  .cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-transform: none;
    width: 1px;
  }
}

[dahaupt]

@maciejsobala Why is the punker template not working? Working fine here, it's the official issue template by @DevVersion :)

[maciejtreder]

[adrian-mitangi]

I'm noticing the same issue with the version of material that I'm using "@angular/material": "^2.0.0-beta.1". I don't see a class declaration for .cdk-visually-hidden.

[maxailloud]

I have the same issue. .cdk-visually-hidden is not present and so I can see the native checkbox .

[andrewGlee]

I have the issue too. Fix for now is to add the .cdk-visually-hidden class, but this doesn't appear to be covered by the theming guide.

[maxailloud]

I fixed the problem by theming the material design, I used https://material.angular.io/guide/theming to do it.
Basically it will import the material design style, that's what currently missing.

[andrewGlee]

Thanks, yes that makes sense. I will probably end up going down that path, but at the end of the day, the guide for 'Using a pre-built theme' doesn't work, so I'm not sure why this issue is closed.

[JaserAkuly]

@maxailloud I am also using Angular Material, and having the same exact issue, unable to hide the extra square on top.

[dgavigan]

@JaserAkuly make sure the material css is loading properly. If you're using Webpack, make sure you're using the style-loader.

The CSS was loading with the main bundle. Extracting it out to its own file and ensuring it loaded first fixed my problem. Hope this helps!

[simeyla]

If you are trying to add the theme to a .css or .scss file with something like:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

You may need to disable view encapsulation

@Component({
selector: 'app-root',
template: require('./app.component.html'),
styles: [require('./app.component.scss')],
encapsulation: ViewEncapsulation.None
})

This is because the css gets rewritten to something like this :

.cdk-visually-hidden[_ngcontent-c0]{border:0;clip:rect(0 0 0 0);

You're better off including it globally as a static file. In other words this may explains why it may be failing for you but I'm not enough of an Angular expert to know the best solution - or other ways to include it where view encapsulation isn't used.

[avrilfanomar]

@simeyla thanks a lot for a "ViewEncapsulation.None" tip! That was problem in my case.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}