How to make a responsive layout table? (moodle 3.6)

How to make a responsive layout table? (moodle 3.6)

by Mauro Ramón -
Number of replies: 7

Hi there,

I found an excellent topic on this matter, but the code mentioned there is outdated.

The post is in https://moodle.org/mod/forum/discuss.php?d=267662

And the author is Mary Evans

By now, we are using Moodle 3.6.2 and a theme, Fordson 3.6.1


I couldn't find demo code that works in Moodle 3.6, cause classes have changed since then. I can understand and use html and css, but it's kind of difficult to find a repository of examples made with responsive blocks like row, col , etc.

It´s all I need. Regards, 
mauro Ramon.

Average of ratings: -
In reply to Mauro Ramón

Re: How to make a responsive layout table? (moodle 3.6)

by Mary Evans -

https://getbootstrap.com/docs/4.0/layout/grid/

Thats a good starting page it tells you all you need to know about Bootstrap 4 which is what Moodle 3.6 is using.

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: How to make a responsive layout table? (moodle 3.6)

by Mauro Ramón -

Ok thanks Mary will try that and post solution (if I succeed)

Regards, M.


EDIT: YEP!!! Your suggestion works fine.

As soon as I can make it a codepen or jsfiddle, I´ll post here.

Thanks a lot!!

Average of ratings: -
In reply to Mary Evans

Re: How to make a responsive layout table? (moodle 3.6)

by Mauro Ramón -

The code works like a charm in a page.

But... if I try to put inside a label, it stops to work. Looks like Moodle Labels have some kind of restriction or " class cleaner"  when talking of Boostrap layout classes.


Any help??  
NOTE: You can use the code in this Codepen

https://codepen.io/mauretoo/pen/zbmNjw

And try to put it inside a Moodle label. Er.... it does not work!!

...Help!!! 

Average of ratings: -
In reply to Mauro Ramón

Re: How to make a responsive layout table? (moodle 3.6)

by Mary Evans -

I have always thought Labels are the worst thing ever in Moodle, even before Moodle developers moved to useing Bootstrap platform.

It might be the way it is created, but I dare say too it could also be the Text Editor. I like to use TinyMCE but Moodle‘s default editor is ATTO. 

I‘ll take a look at the Lable Module and see it it can be changed.

Mary

Average of ratings: -
In reply to Mary Evans

Re: How to make a responsive layout table? (moodle 3.6)

by Mauro Ramón -

Hi Mary,

very kind of you to reply my..."label html editing dilemma".

I am trying to make a label (responsive), by using inline css, flexbox properties, but it´s only giving me headaches so far.

You´re probably right that:

- maybe the labels structure don´t wrap with a boostrap class whatever you are feeding via ATTO. And therefore it cannot apply the BS4 grid classes. (In short it don´t work)

- maybe ATTO cuts  down classes but... nope. What I put in the editor, it´s what  the code editor (<>) shows when you try to edit the content. So I guess the code goes correctly into de Moodle DB.

I will keep trying to make it work, maybe I shoud try good&old table markup.

Please if you found something on the "label's editing paradox", please share your thoughts on it.
Regards,

M.


Average of ratings: -
In reply to Mauro Ramón

Re: How to make a responsive layout table? (moodle 3.6)

by Mary Evans -

I’ll see if I can come up with a fix for this...

but don’t hold your breath. 

LOL

Mary

Average of ratings: -