materialize

I want to open a modal window when the user be in a window, I mean, open a modal without a trigger button, I have this example. <button data-target="modal1" class="btn modal-trigger" id="btn-1">Modal</button> <div id="modal1" class="modal modal-fixed-footer"> <div class="modal-content"> <h4>Modal Header</h4> <p>A bunch of text</p> </div> <div class="modal-footer"> <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a> </div> It works if I click on the trigger button, but I don't want a click. I use this code when the window is ready: $(function() { function

I'm developing an app with React, I want to use the sidenav component http://materializecss.com/side-nav.html The problem is that I'm getting this error: Sidebar.js:8 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery___default(...)(...).sideNav is not a function at HTMLDocument.<anonymous> (Sidebar.js:8) at mightThrow (jquery.js:3534) at process (jquery.js:3602) I'm so confused with the way of import components, libraries. There are a lot of them and a lot of ways to configure it. What I've done is: Create the app with create-react-app Install materialize via npm npm install materialize

I wrote a simple code for materialize modal. HTML code: <a class="waves-effect waves-light btn view" data-target="modal1">View Scores</a> <!-- Modal Structure --> <div id="modal1" class="modal"> <div class="modal-content"> <h4>Modal Header</h4> <p>A bunch of text</p> </div> <div class="modal-footer"> <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a> </div> </div> JS code: $(document).ready(function() { // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered /*$('.view').click(function (){ $('#modal1').modal('open')

I just created buttons that pops up a modal once clicked and each button has a modal that shows a different exercise gif. However the modals are too small and it is preventing the user to see the whole gif, forcing them to scroll down. I want to remove the scroll bar and make the modal bigger so that the user can see the whole gif. Any help would be great, here is my codepen https://codepen.io/anon/pen/gPwved HTML <div id="modal1" class="modal"> <div class="modal-content"> <h4></h4> <p></p> </div> <div class="modal-footer"> <a href="#!" class=" modal-action modal-close waves-effect waves-green

Is it possible to adjust the height of the Navbar in Materialize? 64px is a bit too much for my site. I was going for 30px before I decided to materialize it. You have to override some CSS properties: nav { height: 30px; line-height: 30px; } nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons { height: 30px; line-height: 30px; } nav .button-collapse i { height: 30px; line-height: 30px; } nav .brand-logo { font-size: 1.6rem; } @media only screen and (min-width: 601px){ nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i { height: 30px; line-height: 30px; }

Using MaterializeCSS, how can I adjust/remove the vertical spacing between rows? Example code: <div class="row"> <div class="col s12" style="text-align: center;"> foobar </div> </div> <div class="row"> <div class="col s12" style="text-align: center;"> 12345 </div> </div> I figured it out. Put each col within a single row will eliminate the vertical spacing. <div class="row"> <div class="col s12" style="text-align: center;"> foobar </div> <div class="col s12" style="text-align: center;"> 12345 </div> </div> It is confusing but it works. Conceptually, I would think that a "row" is like a table

I have a basic setup of Materialize running and everything seems to be fine, except for the slide out side-nav. Here's my code. Menu: <ul class="right hide-on-med-and-down"> <li><a class="dropdown-button" data-constrainwidth="false" data-beloworigin="true" data-activates="about-drop" href="#!">About<i class="material-icons left">arrow_drop_down</i></a></li> <li><a class="modal-trigger" href="#signup">Signup</a></li> <li><a class="modal-trigger" href="#sign-in">Sign In</a></li> </ul> <ul id="slide-out" class="side-nav"> <li><a href="#">About</a></li> <li><a href="#">Signup</a></li> <li><a href=

I've been looking through some posts on the internet about Materialize in Rails, however this area seems to be very fuzzy. I am currently using the materialize-sass gem. I didn't find very many helpful posts, I decided to resort here. Here's my code for a page I have pages/discover.html.erb <%= stylesheet_link_tag "https://fonts.googleapis.com/icon?family=Material+Icons" %> <div class="row"> <div class="col s12 m5"> <div class="card"> <div class="card-image b"> <img src="http://i.huffpost.com/gen/1456585/images/o-CRAIG-COBB-facebook.jpg"> <span class="card-title">Cregg Cobb Is Back At It Again