Subtab tutorial for Tabulous version 2.x.

[svavantsa]

Hi Techiferous,

I am using this gem in rails 4 and apparently it has installed tabulous 2.1.1. So far I have been using the tabs, and is going well for me, Thanks for the great work. But when it comes to subtabs, I am having trouble.

While I do see an excellent tutorial for the older version 1.x, for subtabs, I don't see a comprehensive tutorial for the latest version 2.x. I see fragments of code but not the entire code for the subtabs.

Can you be kind enough to flesh out a full-fledged sample for me?

My specific situation is: From a single table, I want to have multiple subtabs, for different parts of data all in the same table, same record. Is this possible at all?

Secondly, I have child records for a given table and I want to show subtabs for each of those child records. For example, Orders table, has line items. When the user sees an Orders tab, I want two subtabs, one for the Order information itself and another for the line items. In other words, when the user clicks on the Orders tab, it should go to the "Order Info" subtab. Next to this subtab, I want to show the "Line items" subtab. How do I do this using techiferous tabulous?

[techiferous]

Hi @svavantsa,

Unfortunately, tabulous wasn't designed to support dynamic tab content; it was designed for tabs and subtabs to point to a particular controller action (not record). You can see some previous people struggling with getting tabulous to support dynamic tabs here https://github.com/techiferous/tabulous/issues/27 and here https://github.com/techiferous/tabulous/issues/44 which could give you some ideas.

My advice would be to roll your own tab code as things could get ugly trying to wrestle with tabulous here, but feel free to try.

[svavantsa]

Fair enough. My question is how do I create a subtab, even static ones.

Surya Avantsa

Pardon me tipos wile swyping on the phone. On Dec 12, 2014 5:43 PM, "Wyatt Greene" notifications@github.com wrote:

Hi @svavantsa https://github.com/svavantsa,

Unfortunately, tabulous wasn't designed to support dynamic tab content; it was designed for tabs and subtabs to point to a particular controller action (not record). You can see some previous people struggling with getting tabulous to support dynamic tabs here #27 https://github.com/techiferous/tabulous/issues/27 and here #44 https://github.com/techiferous/tabulous/issues/44 which could give you some ideas.

My advice would be to roll your own tab code as things could get ugly trying to wrestle with tabulous here, but feel free to try.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-66847111.

[techiferous]

There is a subtabs test application (for different versions of Rails) here: https://github.com/techiferous/tabulous/tree/master/spec/applications/subtabs

And here's an example tabulous.rb file from that app: https://github.com/techiferous/tabulous/blob/master/spec/applications/subtabs/rails_4-1-1/app/tabs/tabulous.rb

If that doesn't help let me know.

[svavantsa]

Wyatt,

Thank you so much for the sample code. Even to be able to test it in my application, I had to literally wait until I was ready for the controller for the sub tab contents..hence the delay in responding to you.

I tried the subtab text as given in your sample tabulous.rb file. But it is not working for me. I don't see the subtab whatsoever. (I got past the initial syntax errors)

I noticed in your sample that the name of the controller at the tab level is galaxies and the name of the controller for the subtab is elliptical_galaxies. Is this just coincidental or is that the naming convention for the subtab controller.

In my case, the controller for the tab is fsip_cases and the controller for the subtab is negotiation_and_mediation_sessions. This is because the Negotiation and Mediation Sessions is a child table of the Fsip_cases table. Should I be calling the negotiation_and_mediation_sessions controller as negotiation_and_mediation_sessions_fsip_cases, instead for this tabulous to work, by any chance?

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Fri, Dec 12, 2014 at 6:20 PM, Wyatt Greene notifications@github.com wrote:

There is a subtabs test application (for different versions of Rails) here: https://github.com/techiferous/tabulous/tree/master/spec/applications/subtabs

And here's an example tabulous.rb file from that app: https://github.com/techiferous/tabulous/blob/master/spec/applications/subtabs/rails_4-1-1/app/tabs/tabulous.rb

If that doesn't help let me know.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-66850577.

[svavantsa]

Wyatt,

Correction: I must take back everything I said about the issue I am facing. Because the subtab IS working, except that it was not visible until I hovered my mouse to where it was supposed to be. And then it became visible, but the way it looks is a little odd. Until then it was of the same color as the background of the screen, That should have to do with the css for the subtab, correct?

But if that's the case, is there a way I can make the subtab look exactly like the tabs look, except a smaller font?

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Tue, Feb 10, 2015 at 6:19 PM, Surya Avantsa svavantsa@gmail.com wrote:

Wyatt,

Thank you so much for the sample code. Even to be able to test it in my application, I had to literally wait until I was ready for the controller for the sub tab contents..hence the delay in responding to you.

I tried the subtab text as given in your sample tabulous.rb file. But it is not working for me. I don't see the subtab whatsoever. (I got past the initial syntax errors)

I noticed in your sample that the name of the controller at the tab level is galaxies and the name of the controller for the subtab is elliptical_galaxies. Is this just coincidental or is that the naming convention for the subtab controller.

In my case, the controller for the tab is fsip_cases and the controller for the subtab is negotiation_and_mediation_sessions. This is because the Negotiation and Mediation Sessions is a child table of the Fsip_cases table. Should I be calling the negotiation_and_mediation_sessions controller as negotiation_and_mediation_sessions_fsip_cases, instead for this tabulous to work, by any chance?

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Fri, Dec 12, 2014 at 6:20 PM, Wyatt Greene notifications@github.com wrote:

There is a subtabs test application (for different versions of Rails) here: https://github.com/techiferous/tabulous/tree/master/spec/applications/subtabs

And here's an example tabulous.rb file from that app: https://github.com/techiferous/tabulous/blob/master/spec/applications/subtabs/rails_4-1-1/app/tabs/tabulous.rb

If that doesn't help let me know.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-66850577 .

[svavantsa]

I think at this time, I need to be able to tweak the css for the subtabs. In view-source, I do find the css for the subtabs as follows:

style type="text/css">

    body {
      margin: 0;
      padding: 0;
    }

    .tabs, .tabs ul, .tabs ul li, .tabs ul li span, .tabs ul li a,
    .subtabs, .subtabs ul, .subtabs ul li, .subtabs ul li span, .subtabs ul li a {
      margin: 0;
      padding: 0;
      line-height: 1;
    }

    .tabs, .tabs a, .tabs a:visited, .tabs a:hover {
      color: white;
    }

    .tabs li.disabled, .tabs li.disabled a, .tabs li.disabled a:visited, .tabs li.disabled a:hover,
    .subtabs li.disabled, .subtabs li.disabled a, .subtabs li.disabled a:visited, .subtabs li.disabled a:hover {
      color: #888;
    }

    .tabs a {
      text-decoration: none;
    }

    .tabs ul {
      font-size: 24px;
      height: 57px;
      list-style-type: none;
      background-color: white;
      padding: 0 0 0 50px;
    }

    .tabs ul li {
      padding-top: 25px;
      padding-right: 5px;
      float: left;
    }

    .tabs ul li .tab {
      background-color: #aaa;
      padding: 5px 15px 3px 15px;
      float: left;
      -webkit-border-top-left-radius: 8px;
      -khtml-border-radius-topleft: 8px;
      -moz-border-radius-topleft: 8px;
      border-top-left-radius: 8px;
      -webkit-border-top-right-radius: 8px;
      -khtml-border-radius-topright: 8px;
      -moz-border-radius-topright: 8px;
      border-top-right-radius: 8px;
    }

    .tabs ul li.active .tab {
      background-color: #2e6da4;
      padding-bottom: 14px;
    }

    .tabs ul li a:hover {
      background-color: #ddd;
    }

    .tabs ul, .subtabs ul {
      /* float clearing */
      overflow: hidden;
      display: inline-block; /* Necessary to trigger "hasLayout" in IE */
      display: block; /* Sets element back to block */
    }

    .subtabs ul {
      margin-top: 5px;
    }

    .subtabs, .subtabs a, .subtabs a:visited {
      color: white;
    }

    .subtabs li.active {
      font-weight: bold;
    }

    .subtabs a {
      text-decoration: none;
    }

    .subtabs ul {
      font-size: 16px;
      height: 30px;
      list-style-type: none;
      padding: 0 0 0 50px;
    }

    .subtabs ul li {
      padding: 10px;
      float: left;
    }

    .subtabs ul li a:hover {
      text-decoration: underline;
    }

    </style>

But it is not clear where this contents is coming from, so that I can tweak it to suit my needs. Any help would be great.

[svavantsa]

Got the name of the file controlling these CSS properties. It is the css_scaffolding.rb file under the

C:\Ruby193\lib\ruby\gems\1.9.1\gems\tabulous-2.1.1\lib\tabulous

folder. How do I override these styles in my app?

[svavantsa]

Well...I have made some progress in changing the css_scaffolding.rb file to change the subtab background color to white and now I see the subtabs. But I want to be able to change the inactive_background_color and the inactive_text_color for the subtabs. I don't see these properties for subtabs defined in that file. Can someone help me here?

[techiferous]

Hi @svavantsa,

Here is the relevant documentation: https://github.com/techiferous/tabulous/blob/master/REFERENCE.md#css-scaffolding

What you need to do is completely remove the use_css_scaffolding declaration in your tabulous.rb file. Then, write your own CSS to style the tabs exactly as you wish and put that CSS in the same place the rest of the CSS in your Rails app lives. The CSS you pasted above is a good start.

The CSS that comes with tabulous is meant for rapid prototyping and is there just so there is something that looks and behaves like a set of tabs. The tabulous CSS is fully intended to be ripped out and replaced with your own custom CSS.

[svavantsa]

Thank you. If I understand you right, are you saying once I delete that "use_css_scaffolding" section in the tabulous.rb file then the css_scaffolding.rb file will no longer be used?

The css that I pasted above is actually from that css_scaffolding.rb file. It looks like I can reuse that in my own css file and customize it to my heart's content. Correct?

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Wed, Feb 11, 2015 at 6:57 PM, Wyatt Greene notifications@github.com wrote:

Hi @svavantsa https://github.com/svavantsa,

Here is the relevant documentation: https://github.com/techiferous/tabulous/blob/master/REFERENCE.md#css-scaffolding

What you need to do is completely remove the use_css_scaffolding declaration in your tabulous.rb file. Then, write your own CSS to style the tabs exactly as you wish and put that CSS in the same place the rest of the CSS in your Rails app lives. The CSS you pasted above is a good start.

The CSS that comes with tabulous is meant for rapid prototyping and is there just so there is something that looks and behaves like a set of tabs. The tabulous CSS is fully intended to be ripped out and replaced with your own custom CSS.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-73991442.

[techiferous]

Yes, you are understanding it exactly right.

[svavantsa]

I have been working on this today and with some success. However, I am still unable to influence the way the subtabs look like. Presently the subtabs have a wierd look and I want them to look the same as the tabs and have the same hover colors, disabled/inactive colors for background, text colors, the rounded corners etc. So I duplicated the section below:

.tabs ul li .tab { background-color: #aaaaaa; padding: 5px 15px 3px 15px; float: left;

-webkit-border-top-left-radius: 8px;
-khtml-border-radius-topleft: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
-webkit-border-top-left-radius: 8px;
-khtml-border-radius-topleft: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;

} and renamed it as .subtabs ul li .subtab. This has absolutely no effect on the subtabs. What am I missing?

I appreciate your help.

[techiferous]

Hi @svavantsa,

Fortunately your problem is only with the CSS so it should make it easier to troubleshoot. If you wanted me to help you with the CSS, set up the HTML and CSS on http://jsfiddle.net/ which will make it easier to debug. Or if you have access to someone who knows CSS, a few minutes of pair programming will probably get you what you need.

[svavantsa]

Thank you for offering your help. I'd definitely owe you something.

On the jsfiddle, I can set up the CSS directly from the tabulous.css file that I created for this purpose. But for HTML, what would be the appropriate code to put there from my application? I can send you the contents of the tabulous.rb file, but that wouldn't be HTML per say, right? Or I can send you the application.html.erb file. Which one would be helpful?

As for knowing someone with CSS, currently, I am the only one on the team. And now you are too. :-)

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:05 PM, Wyatt Greene notifications@github.com wrote:

Hi @svavantsa https://github.com/svavantsa,

Fortunately your problem is only with the CSS so it should make it easier to troubleshoot. If you wanted me to help you with the CSS, set up the HTML and CSS on http://jsfiddle.net/ which will make it easier to debug. Or if you have access to someone who knows CSS, a few minutes of pair programming will probably get you what you need.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74180368.

[svavantsa]

I took the HTML rendered by the app and I put it there on the jsfiddle. Would that help?

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:22 PM, Surya Avantsa svavantsa@gmail.com wrote:

Thank you for offering your help. I'd definitely owe you something.

On the jsfiddle, I can set up the CSS directly from the tabulous.css file that I created for this purpose. But for HTML, what would be the appropriate code to put there from my application? I can send you the contents of the tabulous.rb file, but that wouldn't be HTML per say, right? Or I can send you the application.html.erb file. Which one would be helpful?

As for knowing someone with CSS, currently, I am the only one on the team. And now you are too. :-)

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:05 PM, Wyatt Greene notifications@github.com wrote:

Hi @svavantsa https://github.com/svavantsa,

Fortunately your problem is only with the CSS so it should make it easier to troubleshoot. If you wanted me to help you with the CSS, set up the HTML and CSS on http://jsfiddle.net/ which will make it easier to debug. Or if you have access to someone who knows CSS, a few minutes of pair programming will probably get you what you need.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74180368 .

[svavantsa]

http://jsfiddle.net/suryava/zg7qgnos/

Here is the jsfiddle link.

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:25 PM, Surya Avantsa svavantsa@gmail.com wrote:

I took the HTML rendered by the app and I put it there on the jsfiddle. Would that help?

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:22 PM, Surya Avantsa svavantsa@gmail.com wrote:

Thank you for offering your help. I'd definitely owe you something.

On the jsfiddle, I can set up the CSS directly from the tabulous.css file that I created for this purpose. But for HTML, what would be the appropriate code to put there from my application? I can send you the contents of the tabulous.rb file, but that wouldn't be HTML per say, right? Or I can send you the application.html.erb file. Which one would be helpful?

As for knowing someone with CSS, currently, I am the only one on the team. And now you are too. :-)

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:05 PM, Wyatt Greene notifications@github.com wrote:

Hi @svavantsa https://github.com/svavantsa,

Fortunately your problem is only with the CSS so it should make it easier to troubleshoot. If you wanted me to help you with the CSS, set up the HTML and CSS on http://jsfiddle.net/ which will make it easier to debug. Or if you have access to someone who knows CSS, a few minutes of pair programming will probably get you what you need.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74180368 .

[techiferous]

I'm not seeing the HTML in the jsfiddle. And yes, just copying the HTML from "view source" in your browser will do (making sure there is no private info!) :)

[svavantsa]

Sorry about that. Try this link now.

http://jsfiddle.net/suryava/zg7qgnos/1/

I just saved it after coding the HTML.

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:27 PM, Wyatt Greene notifications@github.com wrote:

I'm not seeing the HTML in the jsfiddle. And yes, just copying the HTML from "view source" in your browser will do (making sure there is no private info!) :)

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74182959.

[svavantsa]

Wyatt,

I had written a short write up with what I am seeking to accomplish. Please see http://jsfiddle.net/suryava/zg7qgnos/2/

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:32 PM, Surya Avantsa svavantsa@gmail.com wrote:

Sorry about that. Try this link now.

http://jsfiddle.net/suryava/zg7qgnos/1/

I just saved it after coding the HTML.

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:27 PM, Wyatt Greene notifications@github.com wrote:

I'm not seeing the HTML in the jsfiddle. And yes, just copying the HTML from "view source" in your browser will do (making sure there is no private info!) :)

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74182959 .

[techiferous]

Ok, try this. Completely delete all of the styles specific to subtabs (basically, everything from the line ".subtabs ul {" and after). Click Run to have the jsFiddle update and you'll see the subtabs become completely unstyled.

Now manually go through the rest of the styles and make all of the styles that apply to the .tabs class also apply to the .subtabs class like this:

.tabs ul li {

becomes

.tabs ul li, .subtabs ul li {

and

.tabs ul li .tab {

becomes

.tabs ul li .tab, .subtabs ul li .tab {

all the way through the styles.

[svavantsa]

Yes. I will. I did think of it, but I thought I might mess it up. But I'll try it now.

Thanks Wyatt.

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:43 PM, Wyatt Greene notifications@github.com wrote:

Ok, try this. Completely delete all of the styles specific to subtabs (basically, everything from the line ".subtabs ul {" and after). Click Run to have the jsFiddle update and you'll see the subtabs become completely unstyled.

Now manually go through the rest of the styles and make all of the styles that apply to the .tabs class also apply to the .subtabs class like this:

.tabs ul li {

becomes

.tabs ul li, .subtabs ul li {

and

.tabs ul li .tab {

becomes

.tabs ul li .tab, .subtabs ul li .tab {

all the way through the styles.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74184847.

[svavantsa]

Hi Wyatt,

Thanks a lot for that idea. I tried it and it worked great. It makes a lot of sense to do it that way.

However, I am still finding it nearly impossible to have the subtabs show up with the rounded corners like the tabs do.

Look at the latest jsfiddle

http://jsfiddle.net/suryava/zg7qgnos/6/

While everything else works perfectly well just be adding the .sub to the elements, the rounded corners style just wouldn't work for the subtabs.

What do you think I may be missing?

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:45 PM, Surya Avantsa svavantsa@gmail.com wrote:

Yes. I will. I did think of it, but I thought I might mess it up. But I'll try it now.

Thanks Wyatt.

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 7:43 PM, Wyatt Greene notifications@github.com wrote:

Ok, try this. Completely delete all of the styles specific to subtabs (basically, everything from the line ".subtabs ul {" and after). Click Run to have the jsFiddle update and you'll see the subtabs become completely unstyled.

Now manually go through the rest of the styles and make all of the styles that apply to the .tabs class also apply to the .subtabs class like this:

.tabs ul li {

becomes

.tabs ul li, .subtabs ul li {

and

.tabs ul li .tab {

becomes

.tabs ul li .tab, .subtabs ul li .tab {

all the way through the styles.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74184847 .

[techiferous]

Good, I'm glad this is helping you. As for the rounded corners, you just happened to miss a style. Look at the line that starts

.tabs ul li .tab

And apply those rules to .subtabs as well.

[svavantsa]

No I did not miss that. I know it's not in the jsfiddle I sent last, but I already tried that.

I just took it off because it wasn't making any difference. But I can include it and send it over again. On Feb 12, 2015 9:41 PM, "Wyatt Greene" notifications@github.com wrote:

Good, I'm glad this is helping you. As for the rounded corners, you just happened to miss a style. Look at the line that starts

.tabs ul li .tab

And apply those rules to .subtabs as well.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74195931.

[svavantsa]

http://jsfiddle.net/suryava/zg7qgnos/7/

Please see this one, line 65 and 66.

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 9:46 PM, Surya Avantsa svavantsa@gmail.com wrote:

No I did not miss that. I know it's not in the jsfiddle I sent last, but I already tried that.

I just took it off because it wasn't making any difference. But I can include it and send it over again. On Feb 12, 2015 9:41 PM, "Wyatt Greene" notifications@github.com wrote:

Good, I'm glad this is helping you. As for the rounded corners, you just happened to miss a style. Look at the line that starts

.tabs ul li .tab

And apply those rules to .subtabs as well.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74195931 .

[techiferous]

change

.subtabs ul li .subtab

to

.subtabs ul li .tab

[svavantsa]

Yay!. I did and it worked. Wonder how that made the difference.

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Thu, Feb 12, 2015 at 9:56 PM, Wyatt Greene notifications@github.com wrote:

change

.subtabs ul li .subtab

to

.subtabs ul li .tab

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74197168.

[techiferous]

You're welcome! It made the difference because there is no CSS class called "subtab", so that rule did not apply to any element in the HTML.

[svavantsa]

Oh. Ok. Thanks again for your help.

Do you think it's a good idea to incorporate these changes in the original code? Just a thought. On Feb 13, 2015 7:18 AM, "Wyatt Greene" notifications@github.com wrote:

You're welcome! It made the difference because there is no CSS class called "subtab", so that rule did not apply to any element in the HTML.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74245509.

[techiferous]

Nah, it's not worth the effort to try to perfect the throw-away CSS scaffolding that comes with tabulous. It's just meant to be a quick-and-dirty placeholder CSS until you put in your own CSS.

[svavantsa]

Wyatt,

Somehow I am unable to create a new discussion or even an issue on github (even though I am signed in).

This is more a question than it is an issue. How can I add my own classes to the tabs and subtabs so I can manipulate their behavior later on? I want to be able to drag and drop the tabs (horizontally only) like the tabs on Chrome for example. Can I add a class draggable, ui-widget-content etc?

`

I can be dragged only horizontally

`

The idea is to write jquery code to let the users drag them. See this:

http://jqueryui.com/draggable/#constrain-movement

Thank You,

Surya Avantsa

On Fri, Feb 13, 2015 at 7:05 PM, Wyatt Greene notifications@github.com wrote:

Nah, it's not worth the effort to try to perfect the throw-away CSS scaffolding that comes with tabulous. It's just meant to be a quick-and-dirty placeholder CSS until you put in your own CSS.

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-74349207.

[techiferous]

You can have complete control of the HTML that tabulous produces by writing your own custom renderer. See here for details: https://github.com/techiferous/tabulous/blob/master/REFERENCE.md#renderer and here for an example: https://github.com/techiferous/tabulous/tree/master/spec/applications/custom_renderer/rails_4-2-0/app/tabs

[svavantsa]

Wyatt,

Thank you so much for getting back to me so quickly.

Following the custom renderer class, I was able to add the classes I want although the drag function is not working. Do you have any ideas on how to be able to drag the tabs or the subtabs?

Thank You,

Surya Avantsa

http://vame.me/suryaavantsa

On Wed, Mar 4, 2015 at 7:15 PM, Wyatt Greene notifications@github.com wrote:

You can have complete control of the HTML that tabulous produces by writing your own custom renderer. See here for details: https://github.com/techiferous/tabulous/blob/master/REFERENCE.md#renderer and here for an example: https://github.com/techiferous/tabulous/tree/master/spec/applications/custom_renderer/rails_4-2-0/app/tabs

— Reply to this email directly or view it on GitHub https://github.com/techiferous/tabulous/issues/51#issuecomment-77279996.

[techiferous]

No, I don't have any ideas about dragging the tabs and subtabs. Also, if you want them to stay in that position, that probably won't work with tabulous. Tabulous offers just the basic tab functionality.

That said, if you want to try to get it to work, first troubleshoot your code outside of tabulous and then hook it in.