Commit 0a90af25 authored by webchick's avatar webchick

Issue #2102019 by nod_: Fixed Vertical tabs looks broken on small screens.

parent 5b24f7bc
......@@ -4067,7 +4067,7 @@ function form_pre_render_vertical_tabs($element) {
*/
function theme_vertical_tabs($variables) {
$element = $variables['element'];
return '<div class="vertical-tabs-panes">' . $element['#children'] . '</div>';
return '<div data-vertical-tabs-panes>' . $element['#children'] . '</div>';
}
/**
......
......@@ -20,8 +20,8 @@ Drupal.behaviors.verticalTabs = {
return;
}
$(context).find('.vertical-tabs-panes').once('vertical-tabs', function () {
var $this = $(this);
$(context).find('[data-vertical-tabs-panes]').once('vertical-tabs', function () {
var $this = $(this).addClass('vertical-tabs-panes');
var focusID = $this.find(':hidden.vertical-tabs-active-tab').val();
var tab_focus;
......
......@@ -121,9 +121,9 @@ function testGroupElements() {
$elements = $this->xpath('//fieldset[@id="edit-fieldset"]//div[@id="edit-meta"]//label');
$this->assertTrue(count($elements) == 1);
$this->drupalGet('form-test/group-vertical-tabs');
$elements = $this->xpath('//div[@class="vertical-tabs-panes"]//details[@id="edit-meta"]//label');
$elements = $this->xpath('//div[@data-vertical-tabs-panes]//details[@id="edit-meta"]//label');
$this->assertTrue(count($elements) == 1);
$elements = $this->xpath('//div[@class="vertical-tabs-panes"]//details[@id="edit-meta-2"]//label');
$elements = $this->xpath('//div[@data-vertical-tabs-panes]//details[@id="edit-meta-2"]//label');
$this->assertTrue(count($elements) == 1);
}
......
......@@ -55,13 +55,13 @@ function testJavaScriptOrdering() {
function testWrapperNotShownWhenEmpty() {
// Test admin user can see vertical tabs and wrapper.
$this->drupalGet('form_test/vertical-tabs');
$wrapper = $this->xpath("//div[@class='vertical-tabs-panes']");
$wrapper = $this->xpath("//div[@data-vertical-tabs-panes]");
$this->assertTrue(isset($wrapper[0]), 'Vertical tab panes found.');
// Test wrapper markup not present for non-privileged web user.
$this->drupalLogin($this->web_user);
$this->drupalGet('form_test/vertical-tabs');
$wrapper = $this->xpath("//div[@class='vertical-tabs-panes']");
$wrapper = $this->xpath("//div[@data-vertical-tabs-panes]");
$this->assertFalse(isset($wrapper[0]), 'Vertical tab wrappers are not displayed to unprivileged users.');
}
}
......@@ -68,15 +68,15 @@
.vertical-tab-button.selected a:focus {
color: #007ecc;
}
.vertical-tabs-panes {
[data-vertical-tabs-panes] {
background-color: #fcfcfa;
}
html.js .vertical-tabs-panes {
.vertical-tabs-panes {
margin: 0 0 0 240px; /* LTR */
padding: 10px 15px 10px 15px;
border-left: 1px solid #a6a5a1; /* LTR */
}
html.js[dir="rtl"] .vertical-tabs-panes {
[dir="rtl"] .vertical-tabs-panes {
margin: 0 240px 0 0;
border-left: none;
border-right: 1px solid #a6a5a1;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment