Maintain consistent tab height

Wappler General Need Help
1

Does anybody know how to prevent the scroll event that takes place when using tabs?

I have tabbed content in the middle of a page, and with longer content inside them, there is a scroll event that manipulates the page scroll.

I’ve tried all sorts of js event prevention, return false, javascript void, etc. but I cannot find the magic here.

Using standard tabs:

<ul class="nav nav-tabs" id="navTabs_steps_notes" role="tablist">
     <li class="nav-item">
          <a class="nav-link active" id="tabLink_steps" data-toggle="tab" href="#" data-target="#tab_steps" role="tab" aria-controls="tab_steps" aria-selected="true">Steps</a>
     </li>
     <li class="nav-item">
          <a class="nav-link" id="navLink_notes" data-toggle="tab" href="#" data-target="#tab_notes" role="tab" aria-controls="tab_notes" aria-selected="false">Notes</a>
    </li>
</ul>
2

Throw the tabs inside a section, give the section an id, ie tabsection1, add a smooth scroll to the section and specify the id (#tabsection1) as the position, then when the tab is clicked it should remain static… Not a js fix but gets the job done until you get a better answer @mebeingken

:slight_smile:

1 Like
3

Thanks Dave!

I must not be doing as you suggest as this isn’t doing it.

Screen Shot 2021-05-29 at 12.44.26 PM
Screen Shot 2021-05-29 at 12.44.26 PM1598×1192 107 KB

4

Hey Ken what exactly happens? Where do your tabs scroll to?

5

Place the tab in to the section itself Ken, like below sir:

<section id="tabsection1" class="mt-0 mb-0 ml-0 mr-0">

                                <ul class="nav nav-tabs" id="navTabs_steps_notes" role="tablist" dmx-on:click="ScrollControl.goto('#tabsection1')">

                                    <li class="nav-item">

                                        <a class="nav-link active" id="tabLink_steps" data-toggle="tab" href="#" data-target="#tab_steps" role="tab" aria-controls="tab_steps" aria-selected="true">Steps</a>

                                    </li>

                                    <li class="nav-item">

                                        <a class="nav-link" id="navLink_notes" data-toggle="tab" href="#" data-target="#tab_notes" role="tab" aria-controls="tab_notes" aria-selected="false">Notes</a>

                                    </li>

                                </ul>

                            </section>
6

Think Ken maybe busy for a moment Teodor so hope he doesn't mind me answering for him in the interim... By default they scroll back to the top of the page.

7

Thanks Teodor for checking in. This is what I'm trying to avoid -- when clicking on Notes, it scrolls the page.

That's what I thought I tried first. I'll go back and try it again!

8

Tested it again and all works as expected Ken. Hopefully Teodor can offer a more refined solution.

1 Like
9

Thanks Dave. I'll pick this up again later (Need to get back to the soccer match. :slight_smile: )

It looks like even on a vanilla layout with basic tabs I'm still seeing the issue, but I need to drill into more.

10

Can you maybe provide a link to your page? I can’t recreate this is issue when inserting tabs with content on the page.

11

@Teodor put me back on track. This had nothing to do with tab clicks, it had to do with the differences in the tab content height. When moving from a “long tab” to a “short tab” the page length would adjust and appear to be a scroll.

I modified a nice script that maintains the height by setting all the tab panes within a tab group to the longest tab:

    var maxHeight = 0;

    $("#tabContent1 > .tab-pane").each(function(){
      if ($(this).height() > maxHeight) { 
        maxHeight = $(this).height(); 
        
      }
    });

      $("#tabContent1 > .tab-pane").height(maxHeight);

Thanks Teodor!

5 Likes
12

@mebeingken thank you for your script. I have the same issue with tabs and didn‘t find out what is causing the scroll.

1 Like
13

Glad it helped Marcel. I’m still perfecting the script to deal with multiple groups of tabs to make it clean in all situations. I’m experimenting right now with adding a page buffer to the bottom so I don’t get any gaps with stacking in mobile.

But for a single tab group, the script shown works.

1 Like