Elegance : how to use all available width ?

Elegance : how to use all available width ?

Cédric Mallet -
回帖数：12

Hi

We are using the Elegance theme and we are very happy with it.

We use a two-columns display anf the courses content are iSPring presentation displayed in the SCORM player. To get maximum size the right column in empty when viewing the course with student profile.

One thing we used to have with other themes such as Clean, and we are trying to have again, is that the center column should take all available size, ie extend to the right to use the space made empty by the right column.

This is how the course list looks like (with the right column used) :

 

And the problem with the empty right column :

 

Thank you !

平均分： -
回复Cédric Mallet

Re: Elegance : how to use all available width ?

Richard Oelmann -
Core developers的头像 Plugin developers的头像 Testers的头像

1. Is this only happening with the SCORM activities? or does it happen on other pages when you remove all the blocks

2. Is the Navigation block properly removed or is it hidden? {Thinking aloud -  does Moodle still think its there even though its not displayed? This might be related to the logic of when columns are displayed when empty, if Moodle doesn't think the column is actually empty because the block exists in it but is hidden?}

平均分： -
回复Cédric Mallet

Re: Elegance : how to use all available width ?

Mary Evans -

How are you choosing to display the SCORM package when setting it up?

  1. Embedded
  2. Pop-up

I'm only asking as the first option (1.) has no blocks, and so is displayed in a page of its own. Whereas (2.) is displayed in a page that has blocks, but should not when using SCORM, but unfortunately that is a design feature of the themes you are using.

You can change this by making the $THEME->layout for 'popup' in Elegance/config.php to use the 'embedded.php' layout file which will provide 100% width for SCORM.

If you checkout MDL-43011 you will see Dan Marsden (Componant Lead for SCORM)  is trying to get a specific layout for SCORM.

Cheers

Mary

平均分： -
回复Cédric Mallet

Re: Elegance : how to use all available width ?

Emma Richardson -
Documentation writers的头像 Particularly helpful Moodlers的头像 Plugin developers的头像

I have found that if I am logged in as admin or an editor there are many places that the empty column still shows but when you actually log in as a student, it does not.  Have you tried that?

平均分： -
回复Emma Richardson

Re: Elegance : how to use all available width ?

Cédric Mallet -

Thank you all for your replies.

The problem is not related to SCORM, I have the same behavior on the course content pages. What is more a SCORM player-related issue is that the player size itself is incorrect : it is too high, especially on large screens. But this is a different issue. Coming back to the width issue, it happens with SCORM content displayed in the same window or in a pop-up.

The navigation bar (and the admin as well) are actually hidden to Students from permission settings, but they are available to Admins. I have the same problem with Teachers and Managers.

I did not have this problem with Clean or Essential, the middle column used to extend to use all available width when the right column was empty. I guess a simple piece of code or CSS fix would solve the issue and restore the behavior from Essential, but this is just out of my reach !

 

平均分： -
回复Cédric Mallet

Re: Elegance : how to use all available width ?

Cédric Mallet -

I tried some debugging with Chrome, I may have found the root..First I have to say my knowledge of CSS is very poor, so I might be misleading here..

The problem seems to come from the <div id="region-main"> block, it does not have the correct width (makes sense..)

I could extend it by adding this custom CSS value in the theme settings

#region-main {
width: 100%;
}

but it pushes the right column on the bottom of the screen...I guess the point would be to change the width of "region-main" to 100% instead of 75% when the right column is empty..

If anyone with programming skills could let me know if all of those make sense, I would appreciate !

平均分： -
回复Cédric Mallet

Re: Elegance : how to use all available width ?

Mary Evans -

Hi,

As I was trying to explain...the problem with SCORM is 50% to do with the package itself and 50% to do with the the layout file used in Pop-Up.

If you look in the Elegance/config.php you will find these lines of code...

    // Pages that appear in pop-up windows - no navigation, no blocks, no header.
    'popup' => array(
        'file' => 'default.php',
        'regions' => array(),
        'options' => array('nofooter'=>true, 'nonavbar'=>false),
    ),
You need to change the highlighted line to...
file => 'embedded.php',
so that it reads like this...
    // Pages that appear in pop-up windows - no navigation, no blocks, no header.
    'popup' => array(
        'file' => 'embedded.php',
        'regions' => array(),
        'options' => array('nofooter'=>true, 'nonavbar'=>false),
    ),
Save the file back to your Moodle server and then Purge all cache.
This should fix SCORM with regards to the layout problem.
The general problem with the layout is hard to define but is a combination of layout CSS and also the fact that Elegance is a 'Work in Progress' and as such can be a little unpredictable.  Hence the layout.
Yes there is a problem with the CSS, that is obvious, but then there is a problem in Moodle with layout issues too, so it could be a combination of Theme and Moodle Javascript.
A solution is not easy without trying to replicate the issue. Currently I am not using Elegance but I will test it this evening now that you have highlighted this problem.
Cheers
Mary
平均分：Useful (1)
回复Mary Evans

Re: Elegance : how to use all available width ?

KirK Chapman -

Fabulous, Mary!!!装酷

Fixed me right up!  I had loaded two large (1024 x 600) SCORM packages in Elegance and was having the same issue as Cédric. Goodbye scroll bar!

Thanks again,

 Peace

平均分： -
回复KirK Chapman

Re: Elegance : how to use all available width ?

Mary Evans -

Yeah!

平均分： -
回复Mary Evans

Re: Elegance : how to use all available width ?

Cédric Mallet -

Unfortunately it did not fix the issue on my side 害羞...The SCORM player would not extend to the right when shown in the same window, and its size is incorrect in a popup : the player resizes itself automatically but it takes too much height. It seems like the player is not taking into account the top title bar, hence the bottom part of the player (the iSpring buttons) is missing.

 

Same Window: player too high/right space left empty

 

 

 Popup : bottom bar missing due to the title 

 

 

平均分： -
回复Mary Evans

Re: Elegance : how to use all available width ?

Foot Tsang -

Sorry, I experienced the same as Cedric, after the amendment.



May I know if there is any other solution?  Thank you!

平均分： -
回复Foot Tsang

Re: Elegance : how to use all available width ?

Mary Evans -

Is there any change you could email me a scorm package so I can test this out. A small test package would do if you have such a thing?

I'll send you y email address via the messanger.

Thanks

Mary

平均分： -