Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Align vertical with materialize

How can i align the tabs to disply vertical ? wihout assigning a class block to it? is there any pure materialize way?

       <div class="row card-panel grey lighten-5 z-depth-1">
        <div class="col s4">
          <ul class="tabs ">
            <li class="tab col s12"><a href="#test1">Test 1</a></li>
            <li class="tab col s12"><a class="active" href="#test2">Test 2</a></li>
            <li class="tab col s12"><a href="#test3">Disabled Tab</a></li>
            <li class="tab col s12"><a href="#test4">Test 4</a></li>
          </ul>
        </div>

        <div class="col s8">
          <div id="test1" class="col s12">Test 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  </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><!-- col -->
      </div>
Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

By default your list items should be displayed as "block" so it should already be aligned vertically? unless there is padding or margin which in that case you just remove them.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

By default this looks like this horizontally.

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

I'm not particularly familiar with the framework, but from looking through the documentation it doesn't seem like they have native support for that. Might something like a modified SideNav work better for you?

If not, you'll likely need to alter the CSS yourself or write your own javascript to handle the tabbing. No pure materialize way that I can find. Sorry. :(