List item in an unordered list centering.

List item in an unordered list centering.

by Gareth J Barnard -
Number of replies: 19
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi all,

Firstly apologies for posting this on the theme's forum, but this is where the CSS Guru's hang out.  On CONTRIB-4579 I have been asked to centre the grid icons on the Grid format to fill the space (please see the image).  Currently I'm going nuts trying to solve it.  I need to either center the grid icons as a whole list of 'li's in a 'ul' in a 'div' or spread out the 'li's within the 'ul'.

I've tried changing:

.course-content ul.gridicons li {
width: 212px;
overflow: hidden;
float: left;
margin: 2px 2px;
padding: 0px;
background-color: white;
color: black;
font-size: 12px;
display: block;
}

to:

.course-content ul.gridicons li {
width: 212px;
overflow: hidden;
margin: 2px 2px;
padding: 0px;
background-color: white;
color: black;
font-size: 12px;
display: inline-table;
}

I'm using the latest M2.5 and Grid Format that I released a few days ago.

Thanks,

Gareth

Attachment gf.png
Average of ratings: -
In reply to Gareth J Barnard

Re: List item in an unordered list centering.

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Well, you could potentially use flexbox - its ideally suited to what you want to do, I think. Unfortunately, as I'm finding at the moment (building a theme with it to see how far I can make it useful), the browser support is not great yet (http://caniuse.com/#feat=flexbox), but it can be worked around with the browser specific pre-fixes and various fallbacks.

Also I seem to recall that display:inline-table is not supported on older IE? Not sure about that though. You may want to try inline-block instead?

On the whole though I think I'd go for centering the whole ul by adding margin:0 auto; to it (or the div its in). I know this will leave potential gaps at the sides, but its probably much easier than trying to calculate the gaps you'd need responsively when the number of items isn't fixed either - and given that different browsers appear to calculate the box-model in slightly different ways too ;)

Richard

Average of ratings: -
In reply to Richard Oelmann

Re: List item in an unordered list centering.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Richard smile

I'll have to ditch the 'inline-table' because of IE.  I've tried the whole 'margin: 0 auto' thing, but no joy sad - humm.

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: List item in an unordered list centering.

by David Scotson -
Just a quick guess, but since the LI is 212px wide, don't you know that the UL is 3x that, so 636px? And then with that width specified, can't you just set the margins to auto?

If you could rely on a grid system (like Bootstrap's) being available then this is basically what they're for.
Average of ratings: -
In reply to David Scotson

Re: List item in an unordered list centering.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks David, but unfortunately setting all of the margins to '0 auto' does not appear to do the trick sad

Average of ratings: -
In reply to Gareth J Barnard

Re: List item in an unordered list centering.

by Mary Evans -

Hi Gareth, where can I find the layout for this grid?

I need to see how it is designed and how it works or should work?

Also setting margin: 0 auto, has no effect unless you specify a width of some description. If your outer containier is 3 x width of each grid box then the overall width needs to be that figure.

div#grid-container { width:650px; margin: 0 auto;}

should centre it.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: List item in an unordered list centering.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mary,

It's the latest M2.5 version of the Grid Format -> https://moodle.org/plugins/view.php?plugin=format_grid <- thank you smile.  The number of boxes needs to be dynamic with space s there is also plans afoot to have the box size customisable.

I'm just looking at http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/ to see if that might solve it with a min-width of 212px.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: List item in an unordered list centering.

by Mary Evans -

OK...try this...

/* Grid styles
-------------------------*/
#icon-container {
    width: 90%;
    margin: 20px auto;
    padding: 10px;
    background-color: white;
    text-align: center;
    height: auto;
}
#icon-container ul.icons {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
#icon-container ul.icons li {
    height: auto;
    max-height: 250px;
    padding: 10px;
    margin: 5px;
    width: 29%;
    text-align: left;
    display: inline-block;
}
@media screen and (max-width:768px) {
    #icon-container ul.icons li {
           width:44%
    }
}
@media screen and (min-width:240px) and (max-width:480px) {
    #icon-container ul.icons li {
        width: 90%;
    }
}

Average of ratings: -
In reply to Mary Evans

Re: List item in an unordered list centering.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Mary,

Thank you, I really appreciate your help smile.  But it does not work sad... please see attached screen shot.

I've placed the code on https://github.com/gjb2048/moodle-courseformat_grid/blob/MOODLE_25_CONTRIB_4579/styles.css in it's own branch to fiddle with.  I tried removing the internal component widths too, but to no avail.

Gareth

Attachment contrib_4579_1.png
Average of ratings: -
In reply to Gareth J Barnard

Re: List item in an unordered list centering.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

It also has to work dynamically when there is no blocks in an area....

Attachment contrib_4579_2.png
Average of ratings: -
In reply to Gareth J Barnard

Re: List item in an unordered list centering.

by David Scotson -
In your screenshot you've got #gridiconcontainer, but in your github gist you've got #gridicon-container (with an extra hyphen).
Average of ratings: -
In reply to David Scotson

Re: List item in an unordered list centering.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Oh fudge!

Average of ratings: -
In reply to Gareth J Barnard

Re: List item in an unordered list centering.

by Mary Evans -

Well I can't help it if you decided to change the renderer.php

It did not have grid infront it was just iconContainer which is wrong anyway as Caps are not correct in Moodle CSS but then I thought you would be quick enough to spot that.

Changing id and classes mid way thru development is always a bad idea as more oft than not one gets it all wrong as you appear to have done

Slow down, you work to fast! You got to make the morning last...

Here is what you have in the renderer...

echo html_writer::start_tag('div', array('id' => 'gridiconcontainer'));

echo html_writer::start_tag('ul', array('class' => 'gridicons'));

And as David says you added hyphens to the CSS.

LOL 

Average of ratings: -
In reply to Mary Evans

Re: List item in an unordered list centering.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Strange as tagged version 2.5.3.2 on https://moodle.org/plugins/view.php?plugin=format_grid has #gridiconcontainer.  The hyphen is my mistake.

Average of ratings: -
In reply to Gareth J Barnard

Re: List item in an unordered list centering.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ok, getting there... but odd thing as can only solve with 'inline-table' which IE does not support in used versions...

Attachment contrib_4579_3.png
Average of ratings: -
In reply to Gareth J Barnard

Re: List item in an unordered list centering.

by Mary Evans -

Why are you using inline-table?

It should be inline-block

Average of ratings: -
In reply to Mary Evans

Re: List item in an unordered list centering.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Mary,

Odd with the Github thing unless you were using the 'master' branch which is way behind the 'MOODLE_25' branch (as with a plugin I operate within the current stable release so that fixes apply to what people are using not what will become) - sorry.

I'm using 'inline-table' because with 'inline-block' you get icon droop as shown by the screenshot.  But looks like IE8 supports 'inline-table' http://www.browsersupport.net/CSS/display%3Ainline-table which fixes this and is the minimum requirement for M2.5 http://docs.moodle.org/dev/Moodle_2.5_release_notes.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: List item in an unordered list centering.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Bingo!..... https://github.com/gjb2048/moodle-courseformat_grid/blob/MOODLE_25_CONTRIB_4579/styles.css.... thank you everyone for helping, appreciated.

Gareth

Attachment contrib_4579_4.png
Average of ratings: -