Hey ladies and gents.
I’m working on a React app in Meteor and I’m hoping to use Materialize CSS for my UI stuff.
I installed the Materialize meteor package (had problems with dependencies withthe NPM version),
I can style everything using Materialize’s css style, everything works perfect – except the navbar.
The navbar (you can see the picture below) UL + LI elements display on a row below the actual navbar - No clue why this is happening, whether its a CSS problem, or the way my React component is set up.
My MainLayout code looks like this -
import React from 'react';
import AccountsUI from '../AccountsUI.jsx';
export const MainLayout = ({content}) => (
<div className="main-layout">
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
{content}
</div>
)
Any ideas?
Thanks!
Change your class to className. That should fix it.
1 Like
You rock! Cheers. DIdn’t even think of that.
No problem at all. Glad you got it working.
Hey, one more thing if you are familiar with Materialize + React integration.
I’m following a todo list tutorial, trying to get the Materialize checkboxes working with the checked + onClick functions I have currently.
This is what I’ve got (before introducing Materialize this worked) :
<input type="checkbox"
className="filled-in"
id="filled-in-box"
readOnly={true}
checked={this.props.task.complete}
onClick={this.toggleChecked.bind(this)}
/>
Now my checkbox doesn’t register an onClick or my checked prop either.
Do you have errors in the browser console? What do you mean not registering?
No errors in console.
As in, when I click the checkbox, it doesn’t check.
It should be “checked” if that task’s “complete” boolean is true, but that no longer works either.
I’ll explore it a bit more, it seems that when I inspect element in Chrome dev tools, the checkbox doesn’t get highlighted, but the label :
<input type="checkbox"
className="filled-in"
id="filled-in-box"
readOnly={true}
checked={this.props.task.complete}
onClick={this.toggleChecked.bind(this)}
/>
<label for="filled-in-box"> </label>
Is the one that I can click on with dev tools.
This is confusing me alot hahaha
Thanks so much by the way
When clicked does the checked value go from true to false if you console log it? If you could share a bit more code for the container and the rest of that component or if it’s on GitHub I can check it out.
Actually figured it out.
Seems like it’s a problem with the Label covering the Checkbox,
So what I did was :
<input type="checkbox"
className="filled-in"
id="filled-in-box"
readOnly={true}
checked={this.props.task.complete}
/>
<label for="filled-in-box" onClick={this.toggleChecked.bind(this)}> </label>
Added the onClick from the checkbox to the label instead.
Wish the label wasn’t necessary but oh well.
Thanks again, you’ve helped so much.
Haha well that’s strange. Not a problem. Glad I could help.
Hi,
I am using the navbar . Do you know how to initialize $(".button-collapse").sideNav(); ?Which part I should place it in React .
Put the componentDidMount() function at the top of your component then put that sidenav jQuery inside it and it will work.
Ya I did that, but I got this error
layout.main.jsx?e49f:17Uncaught TypeError: $(…).sideNav is not a function
Have you added the materialize package?
yes, I installed via npm.
How are you importing it? I tried the NPM one with no luck so I installed the atmosphere package and it all works.
sorry, I though I was make a mistake. I also got a problem when using npm one.
I just installed the package using the meteor poetic:materialize-scss one . Now works fine.
Thanks very much.
No problem. Glad you got it working.
