Topic: Rails 6 documentation

qwrobins free asked 4 years ago


I'm very interested in purchasing MDB, but I can't find any documentation on getting MDB working with the new asset pipeline process in Rails 6. Is there any documentation or is it being worked on at all?

Thanks, Quentin


Mateusz Łubianka staff commented 4 years ago

Hi @qwrobins I am sorry but we don't have any info about MDB with Rails 6.

Best,


matt.milan free answered 3 years ago


To add to the wonderful tutorial provided by @Matthew Dailey, I'd like to share a minimal repo I threw together that demonstrates a working dev configuration capable of displaying the mdb-ui-kit styles and js functionality.

https://github.com/mattmilan/mdb_rails


Marcin Luczak staff commented 3 years ago

Thank you, too, @matt.milan, it is always better to have multiple solutions :)

Keep coding, Marcin


maxk priority commented 3 years ago

Thanks for creating this repo. I've cloned the repo and it runs fine. I am trying to add a select field to the page and it has no styling. Also I am trying to $('.mdb-select').materialSelect(); but materialSelect() function doesn't seem to exist. I am missing something here I guess. Any help please. Thanks


Marcin Luczak staff commented 3 years ago

As I've mentioned under your other post, you have to make sure all you are using $('.mdb-select').materialSelect(); after all MDB scripts are loaded into the page. We are not using Rails here in MDB so unfortunately, I'm unable to check your code.


Matthew Dailey free answered 3 years ago


I guess this post is a year late, but for anyone trying to figure it out:

The missing element of how to configure the Rails 6 Webpacker setup to work with MDB is not so easy to figure out, and there are some hiccups (like syntax errors in the MDB CSS according to postcss, getting form controls to work using Turbolinks hooks and some hard-to-notice JavaScript at the bottom of the MDB Form documentation page....)

So I wrote a tutorial for my students to help them with this configuration. It's at https://cis.ait.ac.th/course_offerings/11/webpacker-javascript-css-companion. Maybe it will help others. For the MDB team, you could consider using this to update your Rails tutorial.


Marcin Luczak staff commented 3 years ago

Hi @Matthew Dailey

Thank you for this great contribution to our community :) We will of course consider updating our tutorial.

Keep coding, Marcin


matt.milan free commented 3 years ago

I have to laugh at the timing on this - I've also been working on this over the last couple of days and came back to post my results so far - only to find that another Matt has beaten me to the punch!


keithrbennett free answered 4 years ago


"...except for the javascript part which will use webpacker..."

This is exactly the part I am unable to figure out myself. Thank you for contributing those instructions, but I think the library authors should feel responsible to do this, and I'm very disappointed that they don't.


Grzegorz Bujański staff commented 4 years ago

Hi. Sorry about that, but unfortunately, there are so many frameworks that we are not able to prepare instructions for each of them. That is why we appreciate each such instruction prepared by users.


kenc138 pro answered 4 years ago


Hey qwrobins,

I wrote a guide for getting MDB working in Rails here. The process is the same in Rails 6, except for the javascript part which will use webpacker instead of the old javascript manifest under /assets/javascripts

You can find out how to use webpacker in Rails 6.0 with a quick Google search, and then apply what you find to this tutorial. Good luck.


Mateusz Łubianka staff commented 4 years ago

@kenc138,

Thank you very much for your work :)

Best,



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: Laptop
  • Browser: Chrome
  • OS: Ubuntu 19.10
  • Provided sample code: No
  • Provided link: No