Mysterious white line wireTabs

[Martijn Geerts]

I have rendering issues with JqueryWireTabs.

Between the tabs and the wrapper there's 1px of margin or something. Can't figure out what it is.  (see image)

// js part

$(document).ready(function() {
    $('#content .container').WireTabs({
        items: $(".Inputfields li.WireTab"),
        rememberTabs: true
    });
});

    public function ___execute() {

        $wrapper = new InputfieldWrapper();

        $this->modules->get('JqueryWireTabs');

        foreach(array('One', 'Two', 'Three') as $number) {

            $tab = new InputfieldWrapper();
            $tab->attr('id', 'tab_' . $number);
            $tab->attr('title', $number);
            $tab->attr('class', 'WireTab');

            $markup = $this->modules->get('InputfieldMarkup');
            $markup->label = $this->_('Label ') . ' ' . $number;
            $markup->value  = "<h2>$number</h2>";

            $tab->append($markup);
            $wrapper->append($tab);
        }

        return $wrapper->render();
    }

I'm fighting this rendering issue now for quite a while. Could someone point me out what I do wrong.

Edited March 15, 2015 by Martijn Geerts
JS part added (thanks kongondo pointing me out that JS is needed)

[kongondo]

Only seen that where the tabs are not added to a form instead...So don't know if it is because you are adding a wrapper to a wrapper?

Edited March 15, 2015 by kongondo

[Martijn Geerts]

When I add it to a from, then the tab is overlapping the wrapper.

ps: I have used a wrapper because I do not need a form. 

    public function ___execute() {

        $form = $this->modules->get('InputfieldForm');
        $this->modules->get('JqueryWireTabs');

        foreach(array('One', 'Two', 'Three') as $number) {

            $tab = new InputfieldWrapper();
            $tab->attr('id', 'tab_' . $number);
            $tab->attr('title', $number);
            $tab->attr('class', 'WireTab');

            $markup = $this->modules->get('InputfieldMarkup');
            $markup->label = $this->_('Label ') . ' ' . $number;
            $markup->value  = "<h2>$number</h2>";

            $tab->append($markup);
            $form->append($tab);
        }

        return $form->render();

    }

[kongondo]

Uh? Isn't the overlap the intended behaviour (just like the tabs in 'page edit mode') or I am not getting you? 

But I still don't understand why it is not working without use of a form. Btw, in my testing, your code does not even render as tabs - maybe am missing something in the JS...

[Martijn Geerts]

This way it should be

See the the vertical borders of tab Two: (using form)

Tabs need additional javascript to render.

$(document).ready(function() {
    $('#content .container').WireTabs({
        items: $(".Inputfields li.WireTab"),
        rememberTabs: true
    });
});

[kongondo]

Ye, that's strange...

[Martijn Geerts]

Always hard continuing scripting when something annoys you...

[kongondo]

This is where it is coming from - the markup label:

$markup->label = $this->_('Label ') . ' ' . $number;

To test, comment that out (in your original code) and the white line disappears but the overlap is still present. So, nothing you can't solve using CSS I suppose
 

Edit:

See post #10 below for the CSS/HTML

Edited March 15, 2015 by kongondo

[LostKobrakai]

Did you try different browsers? I noticed rendering bugs in my WIP of my fields-to-templates stitching module and in this form the left border of fieldsets do get lost if I open them from collapsed mode. As I switched from Chrome to Firefox the issues where gone. Strangely the borders are there after initial render (collapsed) but are lost for the collapsed state as well after opening the fieldset once.

[kongondo]

In addition to what I said in post #8
 
The line is this border:

.Inputfields .InputfieldHeader, .Inputfields .InputfieldWrapper>.description {
background: none;
border: 1px solid #d7e2e6;
border-bottom: none;
color: #2F4248;
}

For the label

<label class="InputfieldHeader InputfieldStateToggle" for="">Label  One<i class="toggle-icon fa fa-angle-down" data-to="fa-angle-down fa-angle-right"></i></label>

I am guessing the Wrappers were designed (CSS) with 'forms' in mind? So, if you render in a form, it works...

[kongondo]

Did the above (see #8 and 10) solve the mystery for you?   

[Martijn Geerts]

If I render it with forms, legs sticking out. (post 5)

Somehow I can't even correct it with CSS.

I leave it for now because I want to continue...

Thank you Kongondo for your help !

[kongondo]

I feel you

[Martijn Geerts]

@Kongondo, I do think it has something to do with not getting the height properly for .WireTabs.nav or white-space injection on the javascript side.

(What Javascript does when manipulation the dom)

I have found a solution (not good) .with CSS for now.

Doesn't work for pill tabs

// CSS

.WireTabs.nav {
    height: 2.4em;
}

#content .WireTabs a {
    height: 2.4em;
}

And thanks for your answer @LostKobrakai

Edited March 15, 2015 by Martijn Geerts

[Martijn Geerts]

This solves it for now 

#content .WireTabs a {
    max-height: 37px;
}

#content .WireTabs {
    margin-top: -38px;
    top: 0;
    margin-bottom: 0;
}

[LostKobrakai]

And thanks for your answer @LostKobrakai

Did it help?

[Martijn Geerts]

Actually it didn't, but help is always appreciated

[Mike Rockett]

I had the same issue with ProcessJumplinks at one point. Can't remember what caused it, though... Drove me mad.

[Mike Rockett]

It might actually help to follow what I did with Jumplinks. Essentially, I just used InputfieldWrappers, and then wrapped those in a literal <form id="something">{render}</form>. Then I used the following CSS because all the Inputfields separated:

#something .InputfieldContent, #something .Inputfields {
    margin-top: 0;
    ....
}

As reference from Jumplinks:

Execute function: ProcessJumplinks.module#L820

Output method: ProcessJumplinks.module#L1022

CSS (Less) margin thingy: ProcessJumplinks.less#L42

[kongondo]

This is case where Martijn didn't have a use for forms  ....Otherwise (see post #2 and #3), it would have worked with ....$form = $this->modules->get('InputfieldForm');

[Mike Rockett]

Yeah, I just landed up using one because it worked... (Won't be a security issue, will it?)

[kongondo]

Naah, I don't see how it could be...

[Martijn Geerts]

Using form when not needed feels so 1999  .

The whole thing is quite weird when you know InputfieldForm extends wrapper.

I did make a note on GitHub, maybe Ryan or Soma does know how.

And about security, I follow kongondo's lead. No problem, definitely not in this case.

Thanks guys for the followup.

[kixe]

11 month old this topic but I run in same problems described in post #5  (PW 3.0.8)
After digging a while I found out that Javascript puts WireTabs outside the form whereas normally (for example in ProcessPageEdit) the WireTabs are inside the form. You need to adapt the css for the form in this case like:

#content .container > form {
    /*instead of: top: -2px;*/
    top: 0;
}

#content {
    /*instead of: padding-top: 1px;*/
    padding-top: 0;
}

This solution works for me.

[kongondo]

Moderator Note

Hi @Federico,

Please open a separate (new) thread regarding your issue. This thread addresses a specific issue - "WireTabs: mysterious white line". Your question is about using the module in general. Separating issues/queries helps searching for specific things easier plus helps in organisation.

I will delete your post once you have opened your thread.

Thanks.