Jump to content

Mysterious white line wireTabs


Recommended Posts

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)

post-577-0-56950900-1426417797_thumb.png

// 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 by Martijn Geerts
JS part added (thanks kongondo pointing me out that JS is needed)
Link to comment
Share on other sites

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. 

post-577-0-16970700-1426419828_thumb.png

    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();

    }
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

This way it should be

post-577-0-14232200-1426421030.png

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

post-577-0-23258700-1426421256_thumb.png

Tabs need additional javascript to render.

$(document).ready(function() {
    $('#content .container').WireTabs({
        items: $(".Inputfields li.WireTab"),
        rememberTabs: true
    });
});
Link to comment
Share on other sites

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 by kongondo
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...:-)

Link to comment
Share on other sites

@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 by Martijn Geerts
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Using form when not needed feels so 1999 :P .

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.

  • Like 1
Link to comment
Share on other sites

  • 10 months later...

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.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...