Make responsiveness for vertical/horizontal tabs configurable

Updated helper text for #2

I just tried the patch, applies cleanly to 3.x-dev ( c7b3194 ).

One thing that I wish it did was allow for completely disabling the details feature. You can effectively disable it by setting a ridiculously low breakpoint ( 1px ), but there is still a flash of the details fieldset.

Otherwise, I think it works as advertised.

The patch does not apply for the Drupal 8.6.9 version and return the below error while applying the patch using Git apply command:

error: patch failed: src/Plugin/field_group/FieldGroupFormatter/Tabs.php:54
error: src/Plugin/field_group/FieldGroupFormatter/Tabs.php: patch does not apply

Ok, my bad!

The patch should be applied on the Dev version only and it is working like charm!

Thank you so much,

This patch is working great however it shows a gap at the right side border of the page !

Reproduce the issue:
1) Set the Width Breakpoint setting equal to: "1".
2) Set the direction to "horizontal".
3) From your mobile phone, visit a node url where the above settings is applicable.
4) With your finger, Try to move the screen to the left side and you will notice the same result as the image above. (the black background will appear)

You can see it in action here:
http://testdrupal.ml/node/126

the big problem is because of this black background, other block design on the same page will appear broken !!!

Thank you,

I noticed that the above explained width overflowed made due to this patch, is coming from /modules/contrib/field_group/formatters/tabs/horizontal-tabs.css file and can be resolved using the below:

.horizontal-tabs-pane {
    padding: 0; /*this value must be set to 0*/
}

Any help please on how to fix the width overflowed issue due to this patch ?

Same issue here!
spent hours searching for the reason behind the broken display in small screen until I found this issue here...

@C.E.A did you manage to solve this issue ? Can you please share your solution ?

@Drutech I could not find a solution for the black background gap showed at the right side border of the page...
waiting for maintainers to take more actions/tests toward this issue !

+++ b/src/Plugin/field_group/FieldGroupFormatter/Tabs.php
@@ -106,6 +111,13 @@ class Tabs extends FieldGroupFormatterBase {
+    $form['width_breakpoint'] = [

we need a new configuration option in the schema, see config/schema/field_group.field_group_formatter_plugin.schema.yml - need to add this to the entry for field_group.field_group_formatter_plugin.tab

This is neither a bug or critical

Re-rolling for #19

Re-rolled for #19

I don't think we need tests here, there are no tests already for the tab formatter so I think the burden should not be on this issue to add them.

I can't reproduce the black band seen in #12

Screenshot showing the breakpoint in action

@larowlan thank you for your time and support,

I have tested the patch with more than 3 projects with same results about the black background.

Reproduce the issue:
1) Set the Width Breakpoint setting equal to: "1".
2) Set the direction to "horizontal".
3) From your mobile phone (or resize the desktop browser to about hald width), visit a node url where the above settings is applicable.
4) With your finger, Try to move the screen to the left side and you will notice the same result as the image above. (the black background will appear)

You can see it in action here:
http://testdrupal.ml/node/126

It is very important to reduce the width breakpoint settings to lower than 100px.

The tab buttons direction must be set to HORIZONTAL.

Thank you

The gap only appears when you drag the page.

Can you confirm it doesn't occur without this patch?

@C.E.A, I tried to reproduce on your test link, but I don't get the black bar:

Edit: Um, I didn't see that black bar in my browser, maybe my black theme???

Now I just tested on my actual phone ( instead of Dev Tools ), I don't have a black bar. Will upload. I am using a large phone ( Note 8 ).

From my actual phone.

@scottsawyer @larowlan Thank you for your time and support,

I just noticed that the black background is displayed only for logged in users... so please do log in using the below credentials which assigned the permission of viewing any node:

Username:
testuser

Password:
123456789

When you are logged in and visit http://testdrupal.ml/node/126, you will notice for sure the black background (I just tested)

@larowlan

Can you confirm it doesn't occur without this patch?

Yes, I confirm it doesn't occur without this patch...

To be more sure, when you are logged in, visit any page that does not have field group of type tabs configured and you will not see this black background issue...

This black gap will appear only for node have field group configured of type tabs.

Thank you

@scottsawyer in you comment #25, I can see the black gap in the screenshot provided by you...

I confirm I can see the black background gap mentioned by @C.E.A using the test url provided.

Also I have the same issue on my dev website.

Please any help ?!

@scottsawyer @larowlan @C.E.A can someone provide a workaround for this black background gap at the right side of the screen for small sizes (mobile screens) ?
It is breaking up my website design !

Thank you...

@sergiiL @larowlan the last dev release of this module (28-Mar-2019) is not compatible with the patches in #5 or #22.

Any page having field group of type "HORIZONTAL Tabs" is NOT SCROLLABLE ANYMORE if the patch in #5 or #22 is applied!

Can someone please update the patch here to be compatible with the latest DEV release ??

NOTE 1: The page scroll is broken for IOS mobile devices only (for android devices it is working as expected)

Reproduce the issue:
Set the "Width Breakpoint" to less than or = "100" px so the horizontal tabs will always be displayed and then test it from any IOS mobile device... You will notice that the page is no longer SCROLLABLE.

NOTE 2: if logged in with administrator role, you will not be able to reproduce the issue... Please login with normal authenticated user.

thank you, it really urgent !!!

Same issue as explained in #31,
The use of Horizontal tabs while patch #5 is applied using the last Dev release of this module is preventing the page (IOS Mobile devices only) from being scrollable anymore. (The tabs cannot be seen due to non scrollable page)

I have a back up of the previous dev release version (10-May-2017), I have install it on the site and applied to it patch #5, the site is working on IOS device with no issue.

what made me wonder what is going on !
If logged in as administrator user, you cannot reproduce the error, you must log in as normal authenticated user from an iPhone to reproduce this error.

For anybody who is willing to look into this specific issue, the patch#22 is working just fine but there is a CRITICAL BUG REPORT explained in comment #31 (The page become NOT SCROLL-ABLE if patch#22 is applied along with field group of type "Horizontal" tabs)
Results:No Horizontal tab are shown in addition to any field inside the horizontal tabs are all hidden.

To reproduce the issue:

• Set the "Width Breakpoint" to = "1" px so the horizontal tabs will always be displayed on small devices
• Create MORE than 1 "Horizontal Tab".

then test it from any IOS mobile device... and you will notice that the page is no longer SCROLLABLE and all fields are hidden.

I am using for now the the Commit #2e8c7106 installed using composer require 'drupal/field_group:3.x-dev'#2e8c7106 which is the last commit I found that does NOT generate this issue.

All commit SHA after 18 Mar, 2019 will generate the issue explained in comment #31.

I could not found the problem behind the issue but I hope someone else will have the ability to fix this issue for good !

Thank you,

The issue explained in #31: Any page having field group of type "HORIZONTAL Tabs" is NOT SCROLL-ABLE ANYMORE if the patch in #5 or #22 is applied!

Tested with last version of the module 8.x-3.0-rc1 and still encounter this issue.

Any help from experts please!

thank you for patch.

An issue becomes not critical if a patch is applied. Asked for a retest of #22.

Hello

Patch #22 adds the "Width Breakpoint" field but does'nt work with Vertical Tabs

Both patches #5 & #22 are not compatible nor with the last stable version of this module (8.x-3.0 updated 28 January 2020) neither with the dev version (8.x-3.x-dev updated 28 Jan 2020)

can someone check it out please ?

@larowlan

thank you,

Here is a new patch. It works with 8.x-3.x and 8.x-3.x-dev

Patch #41 tested on two different projects using module version 8.x-3.x and working as expected.

Here is an updated patch with removed unused use statement use Drupal\Core\Render\Element;

Patch #44 tested and working as it should.

hi
patch #44 is working, I have the "width breakpoint" field in configuration and i put 900 in it, but I think I didn't understand what it is for because, as you can see in the 2 screenshots, the change of comportment formy tabs still is around 1300 px screen width

do you speak about something else ?

with tabs / window : 1300px

without tabs / window : 1100px

I really want to keep first comportment at 1100px width

Without this patch, the tabs will be display as accordions in small screens (mobile phones)...

For example, I have a project where I want the "tabs" to always be displayed as "tabs" in whatever was the screen size... So I set the "width breakpoint" field to: 1

And now I always have "tabs" for extra small screen sizes to extra large screen sizes.

with the patch #44 and with the "width breakpoint" field to: 1 I still have accordions like my second screenshot, no tabs under 1340px screen width

I think I got it... am I the only one using Claro as admin theme ?

I am using this patch on 5 projects and working as expected for me.

I am using seven as admin theme.

solved, with Claro this patch is useless, CSS have to be modified in the vertical-tabs.css from Claro directly, with for exemple (I putted that in a CSS injector asset) :

- originally this media query is with min-width 85em, in my case I need 60 em to include tablets like classic iPad -

@media screen and (min-width:60em) {
  .vertical-tabs__menu {
    display: block;
    width: 20em;
    /*position:sticky;
    top:80px;*/
    }
   .vertical-tabs__items--processed {
    margin-left: 20em; /* LTR */
    border-top-left-radius: 0; /* LTR */
  }

  .js[dir="rtl"] .vertical-tabs__items--processed {
    margin-right: 20em;
    margin-left: 0;
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
  }
  
   .js .vertical-tabs__item {
    overflow: hidden;
    margin: 0;
    border: 0;
  }

  .js .vertical-tabs__item--first,
  .js .vertical-tabs__item--last {
    border-radius: 0;
  }

  .js .vertical-tabs__item > summary {
    display: none;
  }
}

Patch #44 tested and working
+1

Thx for the patch, I committed it to dev

It looks like this commit broke tests on the Dev branch, which seems likely given that tests were not run on the committed patch.

Please revert the commit and reopen this issue until tests are passing here. Thanks!

I mentioned this in #3183073: [META] Plan for Field Group 8.x-3.2 Release.