Created consistent spacing between tabs and tabbed content.

[dalyUSN]

Hi @skttl

Great package! Only just getting round to trying it out and I spotted there could be an improvement made with a bit of the spacing between tabs and the tabbed content.

First tab with your original code - spacing is correct.

All other tabs with your original code - spacing is incorrect.

I can see you were adding a content push div (.matryoshka-tabbed-content-push) of 20px in height that was accounting for the lack of margin on top of content areas. However, this would then have a knock-on effect on all other tabs, as they would also be pushed down by the margin-bottom set to the previous content area by default in Umbraco 8.

Therefore, I have removed the height set on the content push area and instead added margin-bottom to the tabs list (.matryoshka-tabs-list). Since the tabs list (.matryoshka-tabs-list) will be a sticky item we can still set margin below it and that will create a space between itself and the items below. A sticky item is essentially still a relative item until is reached, it is at that point it becomes sticky.

All other tabs with my new code - spacing is correct.

Hope that all makes sense. Let me know how you get on with testing it but I've tested in a few scenarios in different browsers and have had consistent results so far.

Thanks Paul

[skttl]

Already fixed by #26

[dalyUSN]

Ah ok, I hadn't spotted #26

Although reviewing #26 it looks like it is still reliant on the empty div "matryoshka-tabbed-content-push" in order to style the positioning of each tab pane. Moving the margin to "matryoshka-tabs-list" would mean that the empty div could be removed entirely and avoids overriding styles applied to "umb-group-panel" from a global Umbraco CMS level.

Thanks Paul