search

samsono / Easy-Responsive-Tabs-to-Accordion

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.
Other
603 stars 260 forks source link

You need to add this "container" and adjust some CSS.... #59

Open leeuniverse opened 9 years ago

leeuniverse commented 9 years ago

Hello, appreciate the nice tab menu, especially the Vertical tab which is what I use. I encountered a couple of issues when inserting the menu into my website.

  1. I discovered that the menu (vertical at least) is not as "responsive" as it should be, the content box didn't actually adjust size. As well, the content box extended "beyond my page border on the Right of the page. So to fix this I created an extra DIV surrounding the HTML, that contains a "container" class such as this:

.vertical-tabs-container { position: relative; display: inline-block; width: 99%; margin: auto; }

You should add the div to the HTML and also add this class to your CSS. This makes the Menu fully responsive and fixes the content box being outside of a pages content. For example, I inserted the vertical menu into the content area of another Tabbed menu, and your menu's content box extended beyond the right border of the page..

  1. You'll also want to change the .resp-vtabs .resp-tabs-container css instead of 250px to this instead min-height: 350px; And you'll want to tell people that they will need to adjust this depending on how many tab options they have. The reason for this is you'll see one of the tabs "break" when checking responsiveness (i.e. adjusting your browser window for different sizes) because the content box isn't long enough in height.

You can see my website http://www.leeuniverse.com the Clan Menu for an example of your script atm.

Note also, I'm not a coder, so this may not be the perfect or best code, but it's at least a little better than what we had, because of the content box extending beyond the page, the content box also not being responsive, AND the tab text not "adjusting" being responsive for page size.

Note, this info only apply's to the Vertical Tab version. I haven't yet worked with the Horizontal one to know what happens.