Yes, it's possible right [out of the box][m1]:

[![enter image description here][1]][2]

Just [initialize the plugin][m2] like this:

    // Initialize collapse button
    $(".button-collapse").sideNav();

### [Demo in Plunker][3]

### Demo in Stack Snippets





    $(".button-collapse").sideNav();



    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.js"></script>

    <nav>
      <ul class="right hide-on-med-and-down">
        <li><a href="#!">First Sidebar Link</a></li>
        <li><a href="#!">Second Sidebar Link</a></li>
      </ul>
      <ul id="slide-out" class="side-nav">
        <li><a href="#!">First Sidebar Link</a></li>
        <li><a href="#!">Second Sidebar Link</a></li>
      </ul>
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    </nav>



For testing, just enable emulation in the chrome developer tools, reload the page, and swipe in from the edge.




[1]: http://i.stack.imgur.com/7dOGa.gif
[2]: http://i.stack.imgur.com/t8c6q.gif
[3]: http://plnkr.co/edit/ERtNi8yru4DfojXErCsx?p=preview
[m1]: http://materializecss.com/mobile.html
[m2]: http://materializecss.com/side-nav.html#options

I know [Materialize.css][1] has an option to swipe left to dismiss the open sidemenu, but is it possible to open the menu by swiping right as found in most android phones. 

I have a meteor.js implementation for a android app and would want to know if such a feature offered out of the box. 


[1]: http://materializecss.com/

Materialize.css Swipe right to open menu

Ripples are created by the local function named `Trigger` inside of the library. Since it's locally declared, we can't execute it directly, but we can add a custom event type in the `options.on` setting.

The only road bump we'll hit is that all ripples **must come from somewhere** (*both intuitively and programatically*), and the trigger function will rely on getting this info from the event coordinates passed in like this [ripple.js#L107][1]:



    var x = e.pageX - $this.offset().left - $ripple.width() / 2;
    var y = e.pageY - $this.offset().top - $ripple.height() / 2;

To fake this, we'll have to build and [trigger][6] our own custom [jQuery Event object][2] from scratch and then stub out the `pageX` and `pageY` properties by finding the center our our new object using [`$.offset`][3], [`.outerWidth()`][4], and [`.outerHeight()`][5] like this 



<pre><code>$.ripple(".btn", {
  on: 'mousedown <b>ripple</b>', // The event(s) to trigger a ripple effect
});

function InvokeRipple($el) {
  var event = jQuery.Event("<b>ripple</b>");
  event.<b>pageX</b> = $el.offset().left + $el.outerWidth() / 2;
  event.<b>pageY</b> = $el.offset().top + $el.outerHeight() / 2;
  $($el).<b>trigger</b>(event)
}
</code></pre>

### Demo in [jsFiddle][7] & Stack Snippets






    $.ripple(".btn", {
      on: 'mousedown ripple', // The event to trigger a ripple effect
      opacity: 0.4,    // The opacity of the ripple
      color: "auto",   // Set the background color. "auto" will use the text color
      duration: 0.7,   // The duration of the ripple
      easing: 'linear' // The CSS3 easing function of the ripple
    });

    $("#click").click(function() {
      InvokeRipple($("#info"))
    });

    function InvokeRipple($el) {
    	var event = jQuery.Event("ripple");
      event.pageX = $el.offset().left + $el.outerWidth() / 2;
      event.pageY = $el.offset().top + $el.outerHeight() / 2;
      $($el).trigger(event)
    }





    body {
      padding: 15px;
    }



    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>
      

    <button class="btn btn-primary btn-lg" id="click" >Invoke Ripple on other button</button>
    <button class="btn btn-info btn-lg" id="info" >More Info</button>




[1]: https://github.com/jakiestfu/Ripple.js/blob/v1.2.1/src/ripple.js#L107
[2]: https://api.jquery.com/category/events/event-object/
[3]: https://api.jquery.com/offset/
[4]: https://api.jquery.com/outerwidth/
[5]: https://api.jquery.com/outerheight/
[6]: https://api.jquery.com/trigger/
[7]: https://jsfiddle.net/KyleMit/7dsu3qnd/4/

**Ripple.JS** ([GitHub][1] | [Demo][2] | [CDN][3]) adds a Material style ripple to HTML Elements like this:



    $.ripple(".btn", {
      on: 'mousedown', // The event to trigger a ripple effect
      opacity: 0.4,    // The opacity of the ripple
      color: "auto",   // Set the background color. "auto" will use the text color
      duration: 0.7,   // The duration of the ripple
      easing: 'linear' // The CSS3 easing function of the ripple
    });

### *Q: Is there a way to programmatically invoke  this?*

**Demo in [jsFiddle][5] & Stack Snippets**





    $.ripple(".btn", {
      on: 'mousedown', // The event to trigger a ripple effect
      opacity: 0.4,    // The opacity of the ripple
      color: "auto",   // Set the background color. "auto" will use the text color
      duration: 0.7,   // The duration of the ripple
      easing: 'linear' // The CSS3 easing function of the ripple
    });



    body {
      padding: 15px;
    }



    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>
      

    <button class="btn btn-primary btn-lg" >Click Me</button>





[1]: https://github.com/jakiestfu/Ripple.js
[2]: http://jakiestfu.github.io/Ripple.js/demo/
[3]: https://cdnjs.com/libraries/Ripple.js
[4]: https://i.stack.imgur.com/GttQR.gif
[5]: https://jsfiddle.net/KyleMit/7dsu3qnd/3/

Programmatically invoke rippleJs

The core problem faced by the implementation of the Paper Theme is it does so by styling the `<input type="checkbox" />` elements using `:before` or `:after` pseudo-elements. 

Per this the [W3C specs][14] and this answer in [can I use a pseudo-element on an input field?][1]

> **`:before` and `:after` render inside a container and `<input>`s can not contain elements**

The fact that it works in chrome is the exception, not the rule, but we're not out of luck ...

# Pure CSS Approach

So we'll want to avoid styling anything *within* the actual checkbox itself, but we can apply those same styles to the label instead, which will still toggle the checkbox that it describes.   

### **Step 1** - Label Based Toggle

We do have to restructure the HTML so that checkbox comes *before* the label, instead of *inside* it.  We'll do that so we can use the `:checked` and adjacent sibling selector `+` to conditionally style the label based on whether or not the checkbox is checked.



<pre><code><i>&lt;!-- Old Format --&gt;</i>
&lt;div class="checkbox"&gt;
  &lt;label&gt;
    &lt;input type="checkbox" value="check1"/&gt;
    Check Label Text
  &lt;/label&gt;
&lt;/div&gt;

<i>&lt;!-- New Format --&gt;</i>
&lt;div class="label-check"&gt;
   &lt;input type="checkbox" value="check1" <b>id="myCheck"</b>&gt;
   &lt;label <b>for="myCheck"</b>&gt;Check Label Text&lt;/label&gt;
&lt;/div&gt;
</code></pre>

>**Note**: In order for this solution to work, you do need to make sure that you have **valid HTML** with unique IDs for every input and corresponding `for` attributes in the labels that describe them.

At this point in time, we can ditch the inputs, and style the labels with our own `:before` pseudo elements that *look* like checkboxes or radio buttons.  To keep things simple for now, in step one, we can mimic the controls with the following Unicode Characters ... [☐][2], [☑][3], [⭘][4], [◉][5]

Here's an bare bones version with the basic gist of the CSS to style each label conditionally:



    input[type='checkbox'],[type='radio']     { display: none; }
    [type='checkbox']         + label::before { content: "\2610";}
    [type='checkbox']:checked + label::before { content: "\2611";}
    [type='radio']            + label::before { content: "\2B58";}
    [type='radio']:checked    + label::before { content: "\25C9";}

We can also improve on this baseline quite a bit by adding some colorization, hovering effects, cursor properties, transition effects, and text shadows to make the unicode characters look and feel like actual buttons.  

Here's a more fleshed out demo in [**jsFiddle**][6] and Stack Snippets:





    body {
      font-size:1.3em;
      color: #2b2b2b;
      background:white;
    }
    .label-check input {  display:none; }

    .label-check label::before {
      width: 1.4em;
      text-align: center;
      display: inline-block;
      cursor: pointer;
      color: black;
      transition: color .3s ease;
      text-shadow: 0px 0px 1px #cccccc;
    }
    .label-check label:hover::before {
      text-shadow: 0px 0px 1px #6286d0;
    }
    .label-check [type='checkbox']:checked + label::before,
    .label-check [type='radio']:checked    + label::before{ 
      color: #056dce;
    }

    .label-check [type='checkbox']         + label::before { content: "\2610";}
    .label-check [type='checkbox']:checked + label::before { content: "\2611";}
    .label-check [type='radio']            + label::before { content: "\2B58";}
    .label-check [type='radio']:checked    + label::before { content: "\25C9";}



    <h3>
      Inputs... we don't need no stinkin Inputs
    </h3>

    <div class="label-check">
      <div>
        <input type="checkbox" name="checkGrp1" id="check1_Opt1">
        <label for="check1_Opt1">A Label Here 1</label>
      </div>
      <div>
        <input type="checkbox" name="checkGrp1" id="check1_Opt2" checked>
        <label for="check1_Opt2">A Label Here 2</label>
      </div>
    </div>

    <div class="label-check">
      <div>
        <input type="radio" name="radioGrp1" id="radio1_Opt1">
        <label for="radio1_Opt1">Radio Label 1</label>
      </div>
      <div>
        <input type="radio" name="radioGrp1" id="radio1_Opt2" checked>
        <label for="radio1_Opt2">Radio Label 2</label>
      </div>  
    </div>



### **Step 2** - Apply Material Style to `label:before` with CSS

With the concept of using a the label's stylized pseudo elements as a toggle in play, we can apply Paper's styles / CSS instead of just `{ content: "\2610";}` to give our checkboxes a Material look and feel.

To do that, let's look at how the styles were *supposed* to work.  We can look at the source code that describes checks and radios on Github in  [bootstrap.css#L7182][7]

The `:after` element is being used to style the surrounding box/circle while the `:before` element adds the inner selection when the box is `:checked`.

Here are the high level styles for the **checkbox**:

[![Material Checkbox CSS][8]][8]

>**Note**: The check mark is made by rotating a rectangle 45 degrees and adding a white border to the bottom and right.

And here's a high level view of the styles for the **radio button**:

[![Material Radio CSS][9]][9]

>**Note**: The radio button container and inside is just a regular CSS circle (`border-radius:50%`) with varying sizes which can animate by scaling up or down.

So we'll migrate any pseudo elements found on the checkbox input to it's adjacent label like this:


<pre><code>/* old */ input[type="radio"]:before
/* new */ input[type="radio"] <b>+ label</b>:before
</code></pre>

After some careful conversion, here's a demo in [**jsFiddle**][13] and Stack Snippets:





    body {
      padding: 0 25px;
      font-size: 1.2em;
    }


    .checkbox, .radio {
        margin: 10px;
    }
    .checkbox, .radio {
        position: relative;
    }


    .label-check label {
      padding-left: 20px;
    }
    .label-check input[type="radio"],
    .label-check input[type="checkbox"] {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
        opacity: 0;
        position: absolute;
        margin: 0;
        z-index: -1;
        width: 0;
        height: 0;
        overflow: hidden;
        left: 0;
        pointer-events: none;
    }
    .label-check input[type="radio"]:focus {
      outline: none;
    }
    .label-check input[type="radio"] + label:before,
    .label-check input[type="radio"] + label:after {
      content: "";
      display: block;
      position: absolute;
      left: -10px;
      top: 1px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      -webkit-transition: 240ms;
      -o-transition: 240ms;
      transition: 240ms;
    }
    .label-check input[type="radio"] + label:before {
        left: -8px;
        top: 3px;
    }
    .label-check input[type="radio"] + label:before {
      background-color: #2196f3;
      -webkit-transform: scale(0);
          -ms-transform: scale(0);
           -o-transform: scale(0);
              transform: scale(0);
    }
    .label-check input[type="radio"] + label:after{
      top: 1px;
      border: 2px solid #666666;
      z-index:1;
    }
    .label-check input[type="radio"]:checked + label:before {
      -webkit-transform: scale(0.6);
          -ms-transform: scale(0.6);
           -o-transform: scale(0.6);
              transform: scale(0.6);
    }
    .label-check input[type="radio"]:disabled:checked + label:before {
      background-color: #bbbbbb;
    }
    .label-check input[type="radio"]:checked + label:after {
      border-color: #2196f3;
    }
    .label-check input[type="radio"]:disabled + label:after,
    .label-check  input[type="radio"]:disabled:checked + label:after {
      border-color: #bbbbbb;
    }
    .label-check input[type="checkbox"]:focus {
      outline: none;
    }
    .label-check input[type="checkbox"]:focus + label:after{
      border-color: #2196f3;
    }
    .label-check input[type="checkbox"] + label:after {
      content: "";
      position: absolute;
      top: 2px;
      left: -10px; 
      display: block;
      width: 18px;
      height: 18px;
      margin-top: -2px;
      margin-right: 5px;
      border: 2px solid #666666;
      border-radius: 2px;
      -webkit-transition: 240ms;
           -o-transition: 240ms;
              transition: 240ms;
    }
    .label-check input[type="checkbox"]:checked + label:before {
      content: "";
      position: absolute;
      top: 2px;
      left: -3px;
      display: table;
      width: 6px;
      height: 12px;
      border: 2px solid #fff;
      border-top-width: 0;
      border-left-width: 0;
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
           -o-transform: rotate(45deg);
              transform: rotate(45deg);
      z-index:1;
    }
    .label-check input[type="checkbox"]:checked + label:after{
      background-color: #2196f3;
      border-color: #2196f3;
    }
    .label-check input[type="checkbox"]:disabled + label:after {
      border-color: #bbbbbb;
    }
    .label-check  input[type="checkbox"]:disabled:checked + label:after {
      background-color: #bbbbbb;
      border-color: transparent;
    }



    <h3>
     Material Label Based Checks
    </h3>

    <div class="label-check">
      <div class="checkbox">
        <input type="checkbox" name="checkGrp1" id="check1_Opt1">
        <label for="check1_Opt1">A Label Here 1</label>
      </div>
      <div class="checkbox">
        <input type="checkbox" name="checkGrp1" id="check1_Opt2" checked>
        <label for="check1_Opt2">A Label Here 2</label>
      </div>
    </div>

    <div class="label-check">
      <div class="radio">
        <input type="radio" name="radioGrp1" id="radio1_Opt1">
        <label for="radio1_Opt1">Radio Label 1</label>
      </div>
      <div class="radio">
        <input type="radio" name="radioGrp1" id="radio1_Opt2" checked>
        <label for="radio1_Opt2">Radio Label 2</label>
      </div>  
    </div>



# HTML/JS Approach

There are some other material implementations that have hit this target in a cross browser friendly way.  All of which typically rely on:

1.  **Hiding the actual `<input>` element**
2.  **Placing a stylized checkbox box inside of the label** 

In some cases,  this relies on formatting the HTML appropriately yourself at design time, or generating it when the site initializes.  

For example, [FezVrasta's Material Design for Bootstrap][10], in both [V3][11] and [V4][12] will take an HTML structure like this:



    <div class="checkbox">
      <label>
        <input type="checkbox"> 
        Notifications
      </label>
    </div>

And insert a new span when you call `$.material.init()` so the result looks like this:



<pre><code>&lt;div class="checkbox"&gt;
  &lt;label&gt;
    &lt;input type="checkbox"&gt;
    <b>&lt;span class="checkbox-material"&gt;
      &lt;span class="check"&gt;&lt;/span&gt;
    &lt;/span&gt;</b>
    Notifications
  &lt;/label&gt;
&lt;/div&gt;
</code></pre>

While this relies on the initialization to occur, it allows much more fine grained control of the CSS checkbox and radio button rather than shoving it all into pseudo elements.


  [1]: https://stackoverflow.com/a/4660434/1366033
  [2]: https://www.fileformat.info/info/unicode/char/2610/index.htm "Ballot Box U+2610"
  [3]: https://www.fileformat.info/info/unicode/char/2611/index.htm "BALLOT BOX WITH CHECK U+2611"
  [4]: http://www.fileformat.info/info/unicode/char/2b58/index.htm "HEAVY CIRCLE U+2B58"
  [5]: http://www.fileformat.info/info/unicode/char/25c9/index.htm "FISHEYE U+25C9"
  [6]: https://jsfiddle.net/KyleMit/xt4bm1sb/
  [7]: https://github.com/thomaspark/bootswatch/blob/v3.3.7/paper/bootstrap.css#L7182
  [8]: https://i.stack.imgur.com/vmtrX.png
  [9]: https://i.stack.imgur.com/L5wEL.png
  [10]: https://github.com/FezVrasta/bootstrap-material-design
  [11]: https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html#checkbox
  [12]: https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/material-design/forms/
  [13]: https://jsfiddle.net/KyleMit/fj6n5vt2/
  [14]: https://www.w3.org/TR/CSS2/generate.html#before-after-content "W3C Specs"

According to [**Google's Material guidelines** for selection controls][1] (checkboxes, radio buttons, switches), these input fields should look like this:

[![Material Selection Inputs][2]][2]

The [Bootstrap Paper Theme for v3.x][3] (now called [Materia in v4][4]) is styled to hit this design target

In chrome, inputs are stylized correctly, but all other browsers merely fallback to native input controls, which disrupts the consistency of the design metaphor.

Here's an MCVE in [jsFiddle][6] / Stack Snippets that will work / fail depending on browser:





    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" rel="stylesheet"/>


    <div class="checkbox">
      <label><input type="checkbox" value="check1"/> Check Opt 1 </label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" value="check2" checked/> Check Opt 2</label>
    </div>

    <div class="radio">
      <label><input type="radio" value="radio1" name="grp1" />Radio Opt 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" value="radio2" name="grp1" checked/>Radio Opt 2</label>
    </div>



And here how the previous code fares in each browser:

[![Browser Compatability][5]][5]


Is there a possible workaround for this or are we at the mercy of the browser to style inputs how they deem fit?

This question was also asked on the project's issues page in [github issue #497][7], but closed citing browser incompatibility

  [1]: https://material.io/guidelines/components/selection-controls.html
  [2]: https://i.stack.imgur.com/sD3FL.png
  [3]: https://bootswatch.com/3/paper/#forms
  [4]: https://bootswatch.com/materia/#forms
  [5]: https://i.stack.imgur.com/oTSXZ.png
  [6]: https://jsfiddle.net/KyleMit/c8tpo5ep/
  [7]: https://github.com/thomaspark/bootswatch/issues/497

Bootstrap Paper's material style of radio/checkbox inputs broken in IE/FF

For potential re-use, the [official doc samples][1] accomplish this with [`makeStyles`][2] like this:

```js
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
}));
```

Then `useStyles` generates class names like this:

```js
const classes = useStyles();
```

Then add to your `FormControl` component like this:

```jsx
<FormControl className={classes.formControl}>
```

### Demo in Stack Snippets





    const { FormControl, InputLabel, Select, MenuItem, makeStyles } = MaterialUI;

    const App = function () {

      const useStyles = makeStyles((theme) => ({
        formControl: {
          margin: theme.spacing(1),
          minWidth: 120,
        },
      }));

      const classes = useStyles();

      return (
        <div className="App">
          <FormControl className={classes.formControl}>
            <InputLabel id="demo-simple-select-label">Age</InputLabel>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={''}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
          </FormControl>
        </div>
      )
    }

    ReactDOM.render(
       <App />,
       document.getElementById('root')
    );



    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@material-ui/core@4.11.3/umd/material-ui.development.js"></script>

    <div id="root"></div>



[1]: https://github.com/mui-org/material-ui/blob/v4.11.3/docs/src/pages/components/selects/SimpleSelect.js#L9-L29
[2]: https://material-ui.com/styles/advanced/#makestyles

I am trying to set the MUI `Select` component's width. For this I have to provide a class to the `FormControl` component, such as `mw-120` which links to a CSS class defining the `min-width` of 120px.

Material UI Select component:

    <FormControl className='mw-120'>
        <InputLabel htmlFor='selected-language'>Language</InputLabel>
        <Select value={this.state.selectedLanguage}
                onChange={(e) => this.onLanguageChange(e.target.value)}
                inputProps={{
                    name: 'language',
                    id: 'selected-language',
                }}>
            {menuItems}
        </Select>
    </FormControl>

CSS class:

    .mw-120 {
        min-width: 120px;
    }

While I would expect the size of the `Select` component to now have a width of 120px minimum, the component remains exactly the same after rendering, as shown in the following picture. In other words, it is to narrow. The width is not big enough. The width should be greater than the label `Language`.

[![width of Select component too small][1]][1]

An element analysis within the Chrome Developer Tools has shown that the main DIV element of that component has a class `.MuiFormControl-root-234` that contains `min-width: 0;`, and it is located/ranked higher than my `.mw-120` class. I guess this overrides my `.mw-120` class, right? Is there any other way to influence the width of the Material UI Select component? There are no helpful examples of influencing the width of this component on the [Material UI Select component page][2].


  [1]: https://i.stack.imgur.com/aRmEJ.png
  [2]: https://material-ui.com/demos/selects/