1

I am using yii2 jui widget without any modification. but the border wrapping the tabs widget is not rendered correctly. see attached picture.

I have tried to wrap the whole content into a new div with inline border html like

<div style=style="border:1px solid black;"> tab contents</div>

But this custom border is just overlapping the one going below Admission Date Package label.

JUI Tabs widget

The related CSS code is like this:

    <div id="w1-tab0" aria-labelledby="ui-id-1" class="ui-tabs-panel 
ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false">
<div class="col-lg-6"><div class="form-group field-patientdetail-admission_date">

*:before, *:after {
    box-sizing: border-box;
}
*:before, *:after {
    box-sizing: border-box;
}
.ui-tabs .ui-tabs-panel {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-width: 0;
    display: block;
    padding: 1em 1.4em;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 4px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 4px;
}
.ui-widget-content {
    background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #ffffff;
    border: 1px solid #aaaaaa;
    color: #222222;
}
* {
    box-sizing: border-box;
}
.ui-widget-content {
    color: #222222;
}
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
Pawan
  • 3,864
  • 17
  • 50
  • 83
  • are you aware that you have two times repeating "style=" in your
    tab contents
    ? This may cause incorrect HTML parsing and therefore unexpected results     – Matej P. Nov 30 '14 at 11:41
  • Yes I understand. I assume that the default border will wrap around the tab contents and it is not. So I have tried with another div, which also overlapping the original border, but not the contents in the tabs. – Pawan Nov 30 '14 at 11:47
  • maybe try bootstrap tabs? – Ruben Dec 04 '14 at 12:41

1 Answers1

1

You are probably using float:left for the form elements. This takes them out of the normal flow for the tabs. You can take a look here for some solutions to the problem. How do you keep parents of floated elements from collapsing?

Community
  • 1
  • 1
Mihai P.
  • 9,307
  • 3
  • 38
  • 49