Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

By default this looks like this horizontally.

1 Answer

rydavim
rydavim
18,780 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. :(