2

I've found a conflict between the Bootstrap theme and the dropdown_language modules, whereby Bootstrap appears to rewrite the output of the form defined by the module. The module uses a form item type of 'dropbutton', and in its expected state, clicking either the current language label (in this case, English) or the dropdown arrow, will open the menu. But in bootstrap, the current language label acts as a submit button and just refreshes the page without doing anything.

Bartik:

Bartik

Bootstrap:

Bootstrap

The entire HTML output of the form is massively different too, and a large amount of the classes added have been ignored during the rewrite. Compare the output of bartik's and bootstrap's HTML output:

Bartik:

<div class="dropbutton-wrapper dropbutton-multiple">
  <div class="dropbutton-widget">
    <ul class="dropdown-language-item dropbutton">
      <li class="en dropbutton-action"><a href="/node/29" class="language-link active-language" hreflang="en">English</a>
      </li>
      <li class="dropbutton-toggle">
        <button type="button"><span class="dropbutton-arrow"><span class="visually-hidden">List additional actions</span></span>
        </button>
      </li>
      <li class="pl dropbutton-action secondary-action"><a href="/pl/node/29" class="language-link" hreflang="pl">Polish</a>
      </li>
    </ul>
  </div>
</div>

Bootstrap:

<div class="dropdown-language-item btn-group dropdown">
  <button class="button js-form-submit form-submit btn-default btn" data-dropdown-target="#dropdown-item" type="submit" name="op" value="English">English</button>
  <button class="btn-default btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="/node/29" id="dropdown-item" class="hidden">English</a>
    </li>
    <li><a href="/node/29">Polish</a>
    </li>
  </ul>
</div>

So my question is, what do I need to do to prevent this output modification from happening? Does the problem lie with Bootstrap or the dropdown_language module's implementation? Looking at dropdown_language's code, it appears to be doing everything normally. Can it be overridden with a theme function? I saw something utilising theme_button but that's only D7. Thanks in advance

  • May I just add that, my god how I wish I could strip out Bootstrap. But not my call :'( – Matt Fletcher Oct 2 '17 at 10:26
  • The Bootstrap theme likely has many overrides for form elements, like Dropbutton. One thingn to try is implement the theme function from Bootstrap that is overriding drop buttons, and just call the original function instead in core Drupal (pass it the original arguments), or try leaving the function body blank. I don't use Bootstrap so I'm not sure how they did it, but thats where I would begin looking. You could also copy in the original HTML to the twig template (if it has one) for dropbuttons to your theme and overwrite the HTML. – Kevin Oct 2 '17 at 13:02
  • dropdown_language and bootstrap aren't compatible out of the box; here's an issue for a similar module regarding bootstrap support with some ideas for solutions: drupal.org/node/2416693 – Patrick Kenny Oct 3 '17 at 3:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.