Input button missing class name

Created on 11 January 2023, almost 2 years ago
Updated 12 August 2024, 4 months ago

Problem/Motivation

Submit buttons for forms, for example search, login,.. ar missing a classname that gives the color.

<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/form/input--submit-button.html.twig' -->
<button data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Inloggen" class="button js-form-submit form-submit btn btn-">Inloggen</button>

<!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/form/input--submit-button.html.twig' -->

Zoom in on:
form-submit btn btn-

Class for example primary is missing.

Steps to reproduce

Update to at least 5.5.7

Proposed resolution

add bootstrap button classes in code.

Workaround

Go to Appearances > Settings and just clicking Save without changing any of settings:

  1. Save the base theme
  2. Save the sub-theme
🐛 Bug report
Status

Fixed

Version

5.5

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Status changed to Closed: duplicate almost 2 years ago
  • Status changed to Active almost 2 years ago
  • 🇺🇸United States Christian DeLoach

    hatuhay, I've installed the latest version (5.5.9) and continue to have this issue.

    I've confirmed that the scheme was updated (from the related issue https://www.drupal.org/project/bootstrap_barrio/issues/3333130 🐛 Missing schema definition for bootstrap_barrio_button_type Fixed ).

    I've gone to the theme's configuration page (Administration / Appearance / Appearance settings / Bootstrap Barrio), ensured that default button type was set to "Primary" (Components / Buttons / Default button type). I've even tried changing the setting to "Secondary" and while the change is saved and the correct value is displayed on subsequent redisplays of the theme's settings form, the bootstrap_barrio_button_type setting does not appear exist when theme_get_setting('bootstrap_barrio_button_type') is called by bootstrap_barrio_preprocess_input() (it keeps returning "null"). Any thoughts?

  • 🇺🇸United States Christian DeLoach

    Ugh, I just realized the fix requires an update of the subtheme's scheme if using a Bootstrap 5 - SASS Starter Kit subtheme.

    The related issue ( https://www.drupal.org/project/bootstrap_barrio/issues/3333130 🐛 Missing schema definition for bootstrap_barrio_button_type Fixed ) updates the Bootstrap Barrio's scheme file BUT a Bootstrap 5 - SASS Starter Kit subtheme has its own scheme file. Manually updating the subtheme's scheme file and resaving the subtheme's setting fixes the issue with the incomplete button class names.

  • Status changed to Closed: duplicate over 1 year ago
  • 🇺🇸United States leisurman

    #7 This fixed it for me but the button is full width now? The problem, the added .form-control class to the button adds the style - width: 100%;

  • 🇺🇸United States leisurman

    Does disabling - Convert input submit to button element. Pose any unwanted side effect? Doing this changes the markup from button data-drupal-selector to input data-drupal-selector. And also add the class .form-control. I was think to either not disabling that, then use JavaScript to add the class .btn-primary to edit-submit. Or disabling it and use JavaScript to remove the class .form-control

  • 🇺🇸United States leisurman

    @Christian DeLoach. How do you manually update the subtheme's scheme file?

  • 🇺🇸United States Christian DeLoach

    @leisurman,

    It's been a while since I made this update, but going from memory, the Barrio Bootstrap 5 Theme has a scheme file (config/schema/bootstrap_barrio.schema.yml) that was updated in the related issue referenced by @hatuhay ( https://www.drupal.org/project/bootstrap_barrio/issues/3333130 🐛 Missing schema definition for bootstrap_barrio_button_type Fixed ). However, because a subtheme may have its own scheme file, such is the case with Bootstrap Barrio's subtheme template and the Bootstrap 5 - SASS Starter Kit subtheme, the subtheme's scheme file needs to be updated as well. The scheme file is in the config/schema directory of your subtheme. You will want to add the below to the section title "Button":

    bootstrap_barrio_button_type:
      type: string
      label: 'Default button type'
  • 🇺🇸United States leisurman

    @Christian DeLoach, Thank you for that information. I tried something else and it fixed the classname btn-primary. Please try this and let me know if it works.

    Upgrade this to the latest version bootstrap_barrio 5.5.10. I was using 5.5.4
    Run. composer require 'drupal/bootstrap_barrio:^5.5'
    Clear cache. Check the site login button inside an incognito window. The login button does not have a blue background and the classname was changed from btn-primary to btn-.
    Next. Go to theme settings > components > buttons > un-check/disable - Convert input submit to button element, then save. Clear cache. Check the login button inside an incognito window. The login button now has a blue background but it is 100% width. I do not want it to be 100% width.
    Next. Go to theme settings > components > buttons > This time check/enable - Convert input submit to button element, then save.
    Clear cache. Check the login button inside an incognito window. The button is normal width like it used to be. And the button class is correct .btn-primary
    Export this configuration. Done

  • 🇮🇳India Ashu Singh

    Hi,

    I have tried all the mentioned solutions given in this issue but still issue is not fixed primary class is missing from btn btn-primary
    "Switch"

    Please do the needful help to resolve this issue.

    Can somebody help me with any other solution?

  • 🇺🇸United States rraney

    This issue was fixed for me by going to Appearance -> Themes, then saving the Parent theme, AS WELL AS my custom child theme. I then cleared cache and the issue went away.

  • 🇫🇮Finland anaconda777

    #16 that is only temporary fix, the issue comes back after updating something on the site, not sure what. But after I bring new changes from git and run drush cim, the buttons are again broken and I have to go to theme settings and save the theme.

  • 🇺🇸United States rraney

    This was closed as duplicate, but seems unresolved. The only duplicate I could find was closed due to inactivity.

  • Status changed to Active 12 months ago
  • 🇩🇰Denmark ressa Copenhagen

    I can confirm that after updating the Bootstrap Barrio theme, the button loses the primary part in my sub-theme:

    <button data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Log in" class="button js-form-submit form-submit btn btn-">Log in</button>

    As suggested in comment #3, after saving first the base theme (in my case Bootstrap Barrio 5.5.16) and then my sub-theme, the btn-primary class is restored, and the button looks fine again:

    <button data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Log in" class="button js-form-submit form-submit btn btn-primary">Log in</button>

    So since this is still a problem people encounter in January 2024, I am setting the issue to Active.

  • First commit to issue fork.
  • 🇮🇳India rupeshghar

    rupeshghar changed the visibility of the branch 3332673-input-button-missing to hidden.

  • 🇮🇳India rupeshghar

    rupeshghar changed the visibility of the branch 3332673-input-button-missing to active.

  • Assigned to rupeshghar
  • Open on Drupal.org →
    Core: 10.1.0-alpha1 + Environment: PHP 7.4 & MySQL 5.7
    last update 11 months ago
    Waiting for branch to pass
  • Issue was unassigned.
  • Status changed to Needs review 11 months ago
  • 🇮🇳India rupeshghar

    In Bootstrap bario theme, Set buttons to primary when it shows null output until it saved.

  • Assigned to dishakatariya
  • Issue was unassigned.
  • Status changed to RTBC 11 months ago
  • 🇮🇳India dishakatariya

    Hi, Verified and tested latest MR !74 on the D10 version with Barrio Bootstrap 5 Theme.
    Testing Steps-
    Install Drupal vesion 10.
    Install the Barrio Bootstrap 5 Theme- 5.5.x version.
    Go to the Appearance and set it as Base theme and Sub- theme.
    Now go to the settings of the subtheme- Components > Buttons > Default button type set as Primary and Save.
    Now check to the input button search should het highlighted with color near search bar.
    Attaching screenshot for reference.
    Can be move to RTBC.

    • hatuhay committed fccd924d on 5.5.x
      Issue #3332673 by rupeshghar: Input button missing class name
      
  • Status changed to Fixed 5 months ago
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024