remove border from dijit layout tabcontainer and content panes

Question

I have a dijit/layout/tablcontainer with content panes as the tabs. Is there anyway I can remove the outside border? I don't see any border properties in either widget. I've tried css for the div the widgets are within and not having any luck. I'm using a black background and the border appears white.

Here are some more details in response to Rohan's comment:

I have three divs: one that contains the dijit/layout/tabcontainer and two that contain the dijit/layout/contentpanes wrapped inside the tabcontainer div. The css I'm trying is below

  #tc {
width: 350px;
height: 300px;
background-color: black;
margin: 0 auto;
border-width: 0px;
/*margin-left: auto;
margin-right: auto;*/
}
#FSHours {
width: 350px;
height: 250px;
background-color: black;
margin: 0 auto;
border-width: 0px;
}
#FSTickets {
width: 350px;
height: 250px;
background-color: black;
margin: 0 auto;
border-width: 0px;
}

Maybe its not possible, but I'm hoping to remove/hide the border around the control with the title 'Field Staff Tickets' that you can see in the screen shot

Thanks

Pete

Can you share what you tried & what output are you expecting? — Rohan Shewale

Rohan Shewale Rohan Shewale · Accepted Answer · 2020-04-30T11:42:51

Seems you want to remove the style from tab titles in tab container, the dijit classes for tab title are dijitTab & dijitTabChecked.

You can try setting

/* if #tc is your tabContainer id */
#tc .dijitTab {
    background-image: none;
    border: 0;
}

#tc .dijitTab.dijitTabChecked {
    /* some style to indicade active tab */
    background-color: #f8f8f8;
}

Hope this helps, or you will need to update your question accordingly.

remove border from dijit layout tabcontainer and content panes

1 Answers