Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs are not scrollable in desktop screens ! #4536

Open
shivarajnaidu opened this issue Apr 13, 2017 · 6 comments
Open

Tabs are not scrollable in desktop screens ! #4536

shivarajnaidu opened this issue Apr 13, 2017 · 6 comments

Comments

@shivarajnaidu
Copy link

shivarajnaidu commented Apr 13, 2017

Description

I used following code to produce tabs in my web page..
When i see it in desktop screen it only showing 6 tabs instead of showing all 8 tabs with scrollbar..
But its working fine as expected in mobile..

 <div class="row">
   <div class="col s12">
     <ul class="tabs">
       <li class="tab col s3 m2"><a href="#test1">Test 1</a></li>
       <li class="tab col s3 m2"><a class="active" href="#test2">Test 2</a></li>
       <li class="tab col s3 m2 disabled"><a href="#test3">Disabled Tab</a></li>
       <li class="tab col s3 m2"><a href="#test4">Test 4</a></li>
       <li class="tab col s3 m2"><a href="#test5">Test 5</a></li>
       <li class="tab col s3 m2"><a href="#test6">Test 6</a></li>
       <li class="tab col s3 m2"><a href="#test7">Test 6</a></li>
       <li class="tab col s3 m2"><a href="#test8">Test 7</a></li>
     </ul>
   </div>
   <div id="test1" class="col s12">Test 1</div>
   <div id="test2" class="col s12">Test 2</div>
   <div id="test3" class="col s12">Test 3</div>
   <div id="test4" class="col s12">Test 4</div>
   <div id="test5" class="col s12">Test 5</div>
   <div id="test6" class="col s12">Test 6</div>
   <div id="test7" class="col s12">Test 7</div>
   <div id="test8" class="col s12">Test 8</div>
 </div>

Repro Steps

Step 1 : git clone https://github.com/shivarajnaidu/uv-materializecss-angularjs-template.git
Step 2 : cd uv-materializecss-angularjs-template && npm install
Step 3 : start server by running npm start
Step 4 : visit http://127.0.0.1:8080 or http://localhost:8080

Screenshots

##Medium Screen Only Showing 6 of 8 tabs..
Medium Screen Only Showing 6 of 8 tabs

##Small Screen SHowing All 8 tabs With Scrollbar
Small Screen SHowing All 8 tabs With Scrollbar

@bassie1995
Copy link

Simply copying and pasting some extra tabs on the tabs page shows that it works on the Materialize site.
Maybe this is an issue with Angular or your use of it? Copying and pasting extra tabs in this page doesn't work either.

@tomscholz
Copy link
Contributor

@shivarajnaidu Are you using a laptop? Sometimes the scrollbar isn't displayed. Depends on the OS and browser

@fega fega added this to Feature Requests in Feature request board Apr 13, 2017
@tomscholz tomscholz removed this from Feature Requests in Feature request board Apr 13, 2017
@shivarajnaidu
Copy link
Author

Yes I am using laptop.. But i have tested in laptop as well as my office workstation (large screens)..
And also tested in chrome and firefox.. getting same issue...
Thanks for your response guys..

@shivarajnaidu
Copy link
Author

Depends on the OS and browser !!!!

@brockklein
Copy link

@shivarajnaidu how did you end up enable scrolling regardless of the OS/browser?

@Whip
Copy link

Whip commented Mar 28, 2018

You should remove the col classes from tabs. They gave me all the trouble.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants