Tabs overlap incorrectly when overlapping to 2nd or more rows

[moorejon]

I have an installation of Moodle 2.7.3+ (Build: 20141128). Archaius version 2014100301

I am noticing on any page that uses tabs that if the screen is too narrow for all the tabs to fit on a single row that there are issues with overlapping. The bottom row partially covers the text of the above row. If a tab from the top row is selected the background rendering for the curved button cuts off portions of the lower row (although not cover the text). It looks as though the two rows are vertically too close together.

I first noticed when using the configurable reports module when creating a report, but you can also force it to happen by going to the Users -> Permissions -> Define Roles and make the screen narrow until the tabs need a second row.

I tried playing a bit with the CSS but couldn't seem to find the correct combo to resolve. I recall I had to download a parent theme by hand, so its possible I may not have the correct underlaying version of something. Can you reproduce the behavior?

[dmuneras]

Hi @moorejon,

Yes, it was something I forgot to change a long time ago, it happens because they are the old tabs from the parent theme.

You can fix it using the problem in different ways:

If you use less, you can add this styles to archaius_responsive.less, if you read the README of the theme you will be able to use LESS.

Option 1

  .tabtree .tabrow0 li{
    display: block;
    margin: 10px;
    width: 100%;
    float: none;
  }

If you don't want to use less, you can add the following rule to your custom css.

Option 2

  .tabtree .tabrow0 li{
    display: block;
    margin: 5px;
    float: left;
  }

If you have a better idea to make it looks better let me know.

Regards, Daniel.

[moorejon]

I tried option 2, since it was easiest to test on our staging site. It makes the text viewable. It's not exactly perfect in terms of the display because there is now extra padding around the tabs which has the background color show throw in the gaps, but a huge improvement. I have attached an image below, but not sure if it git system will process correctly.

[image: Inline image 1]

On Wed, Jan 7, 2015 at 7:55 AM, Daniel Múnera Sánchez < notifications@github.com> wrote:

Hi @moorejon https://github.com/moorejon,

Yes, it was something I forgot to change a long time ago, it happens because they are the old tabs from the parent theme.

You can fix it using the problem in different ways:

If you use less, you can add this styles to archaius_responsive.less, if you read the README of the theme you will be able to use LESS. Option 1

.tabtree .tabrow0 li{ display: block; margin: 10px; width: 100%; float: none; }

[image: screen shot 2015-01-07 at 8 44 30 am] https://cloud.githubusercontent.com/assets/344518/5646386/895bf30c-9649-11e4-86a5-fc795ac60d44.png

If you don't want to use less, you can add the following rule to your custom css.

[image: screen shot 2015-01-07 at 8 45 00 am] https://cloud.githubusercontent.com/assets/344518/5646387/895deb80-9649-11e4-9566-23a86a43544e.png Option 2

.tabtree .tabrow0 li{ display: block; margin: 5px; float: left; }

[image: screen shot 2015-01-07 at 8 51 36 am] https://cloud.githubusercontent.com/assets/344518/5646463/7b1c22c0-964a-11e4-86d5-c977fef0e443.png [image: screen shot 2015-01-07 at 8 51 43 am] https://cloud.githubusercontent.com/assets/344518/5646462/7b19020c-964a-11e4-87e9-dfe38a35a1f4.png

If you have a better idea to make it looks better let me know.

Regards, Daniel.

— Reply to this email directly or view it on GitHub https://github.com/dmuneras/moodle-theme_archaius/issues/28#issuecomment-69024206 .