Hello everyone,
Is it possible to extend the width only for a specific custom page in Moodle 4?
I have created a custom page and I am trying to extend the width only for my custom page like the site admin page.
I tried adding $course-content-maxwidth: 100% !default;. However, it will reflect the whole site. What should be done to reflect the max-width, only on my custom page?
Hi,
Your custom page has probably an id in the body or in a main div ? If not add one and target only the one with this id. You can do it in CSS only.
If it's not possible with the id add a unique class.
Hope it's helped.
Dominique.
Your custom page has probably an id in the body or in a main div ? If not add one and target only the one with this id. You can do it in CSS only.
If it's not possible with the id add a unique class.
Hope it's helped.
Dominique.
Hi Dominique,
Thank you for your response. Initially, I haven't created any ID or class. So I went to Page API documentation and found the bodyid and add_body_class. I got "page-mycustompage" as bodyid. However, when I add "page-mycustompage-maxwidth: 100% !default;" in Raw SCSS its affecting the whole site. Could you please share an example?
Thank you for your response. Initially, I haven't created any ID or class. So I went to Page API documentation and found the bodyid and add_body_class. I got "page-mycustompage" as bodyid. However, when I add "page-mycustompage-maxwidth: 100% !default;" in Raw SCSS its affecting the whole site. Could you please share an example?
Hi Sarath,
By default for plugin Page they've this id in the body : page-mod-page-view
You can use it to target only the page module (all of it).
But it's depend what you want to achieve. Max-width mean that your page will do max 100% not that the width is 100%.
You can use width attribute and put it to 100% and/or also use min-width and put it at 100%.
css:
#page-mod-page-view {
width: 100%;
min-width: 100%;
}
But the left and the righ column will still displayed so it's 100% of the space allowed for the center column.
If you can do a capture of what you want to achieve maybee I can help you more.
Dominique.
Hi Dominique,
I'll explain. I have created a local plugin with some basic form elements. I am trying to extend the width of this page. Please find the below screenshot.
I also have another local plugin for a simple report with some form elements. So If I sort the width for this one, I could implement the same in the report plugin as well.
Hi,
it's not easy without seeing the html. If you don't mind to save the html page and post it (or git hub). I'll watch it.
Maybe the 'problem' is outside the form.
Dominique.
it's not easy without seeing the html. If you don't mind to save the html page and post it (or git hub). I'll watch it.
Maybe the 'problem' is outside the form.
Dominique.
Hi,
At the end your answer was in your question : )
$PAGE->set_pagelayout('admin');
To look like an admin page
Dominique.
At the end your answer was in your question : )
$PAGE->set_pagelayout('admin');
To look like an admin page
Dominique.
Hello,
So if I understand well, I do not have to adjust CSS but something at the html?
I have a same problem since the standard width of moodle 4.0 seemt to be small
So if I understand well, I do not have to adjust CSS but something at the html?
I have a same problem since the standard width of moodle 4.0 seemt to be small
That's something different, Luc, and in the Boost Union Theme (which looks exactly like Boost otherwise) you can adapt that width generally.
But the question here was just for a single page.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser. best steam generator irons