Themes

Space between activities - Adaptable theme

 
Picture of Jennifer Hoyte
Space between activities - Adaptable theme
 

I just upgraded to Moodle 3.4.1+ (Build 20180125)

and Adaptable theme 1.6.0.2 2018011502.

Since then the course front page with the list of activities has extra spaces between activities so much more vertical space is taken up in displaying each week.

Now it looks like this:

extra space between activities

Before, it looked like this:

spacingbef

Any ideas what I can do?  I have reviewed many settings and added custom css.  all to no avail.

(Edited by Helen Foster to add theme name to discussion subject - original submission Saturday, 27 January 2018, 12:05 AM)

 
Average of ratings: -
Picture of Joost Elshoff
Re: Space between activities
Particularly helpful MoodlersTesters

As this is a Theme question and most of those can be answered in the Themes forum of this community, your question is best asked there. 

 
Average of ratings: -
Picture of Helen Foster
Re: Space between activities
Core developersDocumentation writersMoodle HQParticularly helpful MoodlersPlugin developersTestersTranslators

Thanks Joost, I am going to move this discussion to the Themes forum as you suggest.

 
Average of ratings: -
Me^^
Re: Space between activities - Adaptable theme
 

Hi Jennifer,

Have you had any luck in solving this issue? If so could you share with the rest of us please. As I have had the same issue as yourself, but only manage to reduce the spacing fractionally through the adaptable settings. As custom CSS for whatever unsolved reason is not doing the job on my site currently.


 
Average of ratings: -
Picture of Jennifer Hoyte
Re: Space between activities - Adaptable theme
 

Yes, sorry.  I forgot that this question was posted.

Here is what I got to work.  It can be fine-tuned, and it still does not work for a label.  But I ran out of time tracking it down.  Had to list each type of element in the Custom CSS.

div.activity-wrapper {
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
}

.section li.activity {
        margin: 0px 0 0px 0;
border: 0px;
}

.section li.modtype_assign div.activity-wrapper {
margin: 0px 0 0px 0;
}

.section li.modtype_forum div.activity-wrapper {
margin: 0px 0 0px 0;
}
.section li.modtype_quiz div.activity-wrapper {
margin: 0px 0 0px 0;
}
.section li.modtype_label div.activity-wrapper {
margin: 0px 0 0px 0;
padding: 0px;
}

.section .activity .availabilityinfo {
    margin-left: 30px;
    margin-top: 0em;
}

.availabilityinfo .label-info {
    font-size: 14px;
    padding: 0px;
}
.section li.contentwithoutlink div.activity-wrapper {
margin: 0px 0 0px 0;
border: 0px;
    padding: 0px 10px 0px 0px;

}

Hope this helps.  if you get it better, please let me know.  smile

 
Average of ratings: Useful (1)
Me^^
Re: Space between activities - Adaptable theme
 

Hi Jennifer,

Thank you very much for replying, I have the same CSS as you for the activities that we use on site and like yourself I have got it working however I am still struggling with labels. And since the way our courses are structured labels make up a big part of the course.

Mary Evans gave me hand with some CSS for reducing the padding with labels in another thread (See below) :

.section .activity.modtype_label.label {
padding: 0 !important;
}
&
div.activity-wrapper {
    margin: 10px 0 10px 0 !important;
    padding: 1px 10px 1px 10px !important;
}


However I still cannot get the above to work. If you do use the above CSS and do have any success could you please let me know. As then I will be able to get one step closer to why I am still having issues with this recent growth in the Adaptable padding update.

Thank you smile

Callum


 
Average of ratings: -
It's only an avatar...
Re: Space between activities - Adaptable theme
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Callum, 

If the CSS is not working, then it is more than likely the CSS class selectors are wrong.

You need to check what the Moodle CSS is first using the WebDeveloper tools in your browser.

Cheers

Mary

 
Average of ratings: -
Me^^
Re: Space between activities - Adaptable theme
 

Hi Mary,

The CSS you helped with in the previous thread is correct, on a separate instance of Moodle, I tried the exact same CSS in essential theme rather than adaptable and works like a charm. 

I have also tried and tested nearly every CSS class you could possibly imagine for the padding regarding labels over the last two weeks for adaptable after the upgrade and still no luck... 

I'm thinking I should update Moodle to 3.4 and see if I can get a different result with adaptable. As Jennifer is seeming to have a bit more luck than I in this situation.

And yes I am purging the site cache and local cache after every CSS change.

Cheers

Callum

 
Average of ratings: -
It's only an avatar...
Re: Space between activities - Adaptable theme
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Jennifer,

It should work for ALL with just using this:

div.activity-wrapper {
   padding: 5px 10px;
   margin: 0 10px;
}

Providing you add it to the

Site Administration > Appearance > Themes > Adaptable > CSS & JS Settings > Custom CSS

Don't forget to save your settings.

Hope this helps?

Mary

 
Average of ratings: -
Picture of Jennifer Hoyte
Re: Space between activities - Adaptable theme
 

Thanks but no that is not working.  It just moves it up slightly.

 
Average of ratings: -
It's only an avatar...
Re: Space between activities - Adaptable theme
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Just adjust the padding top and bottom from 5px to 0 but leave the right and left 10px

 
Average of ratings: -
Picture of Jennifer Hoyte
Re: Space between activities - Adaptable theme
 

This is what I have tried:

div.activity-wrapper {
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
}

Still does not move it up closer.

 
Average of ratings: -
It's only an avatar...
Re: Space between activities - Adaptable theme
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi,

Sorry about that, I was viewing my own website that uses Moodle 3.4, using my iPad and it looked OK, but now on my old WindowsXP LapTop I can see it needs extra CSS to close up the gaps.

Try this it should fix it:

.section li.activity {
    padding: 0.1em 0.2em;
}

Hope this helps?

M

 
Average of ratings: Useful (2)
Picture of Jennifer Hoyte
Re: Space between activities - Adaptable theme
 

Yes!  That did it.  Thank you.

Couple tweaks I had to make to it so that the whole of the completion checkbox showed up:

.section li.activity {
        padding: 0.2em 0.2em;
}

Then to move up the Restricted line closer, I had to add the following:

.section .activity .availabilityinfo {
    margin-left: 30px;
    margin-top: 0em;
}

However the label is still not coming closer to the item that follows it.

Here is how it looks now:



 
Average of ratings: Useful (1)
It's only an avatar...
Re: Space between activities - Adaptable theme
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi,

Labels are made up of a series of containers (dividers or divs as we call them). These divs are there because the Label doubles up as a container for lots of things, as well just being a 'Label'.

If you check the CSS you will find it has a bottom margin, at least I think its a margin, but it could be padding or even both...hence the big gap!

Cheers

Mary


 
Average of ratings: -
Picture of Jennifer Hoyte
Re: Space between activities - Adaptable theme
 

Got it.  Thank you Mary.

I went through every single div, markup etc - there is actually a pretty neat window that opens at the bottom when you click Inspect Element, that shows the layout spacing around every line you click on.

so the only things that changed the spacing was resetting it for the p element and the actions-right (this is where it spaces over to place the completion check box).  Dunno why this is not an issue for the other activity items.  oh well.

so here is the css:

.section li.modtype_label p {
margin: 0px 0 0px 0;
padding: 0em;
}

.section li.modtype_label div.actions-right {
  padding: 0em;
}

Hope this works for you Callum.


 
Average of ratings: Useful (2)
Me^^
Re: Space between activities - Adaptable theme
 

Hi Jennifer,

I had all but given up yesterday after work and decided to merge all labels & activities in each section, effectively making each section into a separate functioning webpage. Then but all activities into an orphaned section and make custom icons for them referenced back within the correct course section. This then gave back the desired look, for one course lol.

I have now come in this morning and tried your CSS and it works for other courses but still not to the extent as it once was, even with the above 0px/em padding & margin.

But not too worry apparently feedback so far (client included) has been that people actual prefer it to have a bit more space between activities.

Thank you both Jennifer and Mary for helping with this problem.

Cheers

Callum

 
Average of ratings: -
Picture of Jennifer Hoyte
Re: Space between activities - Adaptable theme
 

ok.  glad we got something figured out.

More space maybe, but not as much as was there before.  That just stretched a week's work across the whole screen.  smile

 
Average of ratings: Useful (1)
Picture of Jez H
Re: Space between activities - Adaptable theme
Particularly helpful MoodlersPlugin developers

Hi Callum,

We will take a look at this and see if we can improve it. I am guessing this was caused by new features we added to show activity status in the course page. For example adaptable will now show assignment submission status for students below the icon...

 
Average of ratings: -
Picture of Jennifer Hoyte
Re: Space between activities - Adaptable theme
 

Yeahhh!  Second that!

 
Average of ratings: -
Me^^
Re: Space between activities - Adaptable theme
 

Hi Jez,

I am sorry about the late rely, If you could take a look that be fantastic. Adaptable is one of the best themes that I have used, out of all the things we done with the theme this is the only issue we have ever run into. Added functionality has created extra padding which is perfectly reasonable, our users on bigger screen with higher resolutions have not really noticed too much of a difference. However we have a fair amount of users on laptops with screen resolutions of 1280 x 720 or less and they have really noticed that extra padding (more scrolling).

Thank you smile

 
Average of ratings: -
on the Great Wall
Re: Space between activities - Adaptable theme
Particularly helpful Moodlers

+1 on the discussion..

Used code provided as also seeing this problem of too much spacing between activities, thus Scroll of Death was creeping in on big courses. 

Even thru we use Collapsible topic's. 

Thanks for making life a bit easier..

 
Average of ratings: -
It's only an avatar...
Re: Space between activities - Adaptable theme
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Jenifer, 

Just a quick note to say that if you have all four values the same for padding or margins then you really only need to add one zero with NO px or em after it as the zero alone has no value other than an empty space.

You can also use this to reset the margin and padding to zero first then follow up with your own preference

.section li.modtype_label p {
margin: 0;
padding: 0;
}

Hope this helps?

Mary

 
Average of ratings: Useful (2)
Picture of Jennifer Hoyte
Re: Space between activities - Adaptable theme
 

Cool.  thanks Mary.

 
Average of ratings: -
Picture of Manoj Solanki
Re: Space between activities - Adaptable theme
Plugin developers

Hi,

Sorry about the issues you have had Jennifer and others that mentioned it.  I think we could add settings to control the extra padding that is now present between sections on a course page. That way users can adjust or completely remove it.  What do you think?

In the interim, I was able to remove extra padding by adding the following css code to custom css. If it doesn't, perhaps check if any other custom css is interfering with these declarations. I shaved a little bit of padding off the label with the last two declarations.    Have attached a screenshot to show it looks on a test Moodle installation (version 3.4).  Hope this helps.

.section li.activity {
    padding-top: 0;
    padding-bottom: 0;
}

div.activity-wrapper {
    margin: 0;
    padding: 5px 10px 5px 10px;
}

li.label .activity-wrapper .no-overflow {
   padding: 0;
}
/* For a label, this gets rid of margin space that comes from bootstrap base (the parent theme) in the case where you have "p" tags in the label html code itself.  A similar example might work for other html tags if they're adding extra space */
li.label .activity-wrapper .no-overflow p { margin: 0; }

 
Average of ratings: Useful (1)
Picture of Jennifer Hoyte
Re: Space between activities - Adaptable theme
 

Thanks so much.

Yes I would like there to be options that we can set the spacing or just turn it on or off.

I will try the CSS you provided.  But one scenario it does not cover is the Restricted row that shows below an item.  There is still extra spacing around that.

 
Average of ratings: -
Picture of Manoj Solanki
Re: Space between activities - Adaptable theme
Plugin developers

Hi Jennifer,

Ok thanks for the feedback. When you say restricted row are you referring to an activity that has restriction access in effect?  Can you post a screenshot? 

M

 
Average of ratings: -
Picture of Jennifer Hoyte
Re: Space between activities - Adaptable theme
 

Sure Manoj,

Here you go.

First the before shot:

before

Added this CSS:

.section .activity .availabilityinfo {
    margin-left: 30px;
    margin-top: 0em;
}

How it looks now:

after


Hope this helps.

 
Average of ratings: -
Picture of Manoj Solanki
Re: Space between activities - Adaptable theme
Plugin developers

Hi Jennifer,

I tried something similar:

.section .activity .availabilityinfo  {
    margin: 0 0 0 30px; /* you may want extra margin on the last number if the Restricted text box is too close to elements around it */
}

You might be able to shave a little more off the bottom by modifying the bottom padding on div.activity-wrapper, e.g. :

div.activity-wrapper {
 margin: 0;
 padding: 5px 10px 0 10px;
}

M

 
Average of ratings: -
Picture of Jennifer Hoyte
Re: Space between activities - Adaptable theme
 

Yes thanks Manoj. 

Changing that rightmost number indents the Restricted note under the item. 

 Modifying the 3rd setting of the activity wrapper padding does move them closer but it also cuts off the bottom of the Completion check box on the previous line. 

Seems the lowest it can go if Track Completion is on is 5 pc top and 5px bottom. 

 
Average of ratings: -