Button tags - input has different sizing

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Button tags - input has different sizing

tina@meadors.com pro asked 6 years ago

With version 4.5.6, I'm getting some unpleasant issues with inputs styled as buttons (.btn class).  First, the sizing is different than regular buttons, which is not desirable.  The issue can be seen on your Buttons page, in the Button Tags section. When I view the html, the button is wrapped in an i tag that appears to be a wrapper for the waves effect.   I tried removing the padding setting in the waves.scss and that fixes the sizing issue, but I'm also finding that the button doesn't execute unless you click exactly on the text of the button. I thought maybe that was a result of removing the padding setting, but I found that in a modal, an input button does NOT get waves effect wrapper and is sized and functions as expected. Given the issues that seem to be related to the waves effect wrapper in this release, what's the best way to get rid of it on all my inputs styled as buttons?

Marta Szymanska staff pro premium answered 6 years ago

Hi, thank you for report this issue but the problem is that waves effects not working in self-closed elements (you can read about this here: https://github.com/Dogfalo/materialize/issues/440). So, for now, I can recommend you to change an <input>tag to <button>sth</button> tags and safe the type="submit" value="Submit" inside of it. We will try to fix this in MDB package in the nearest future. Best, Marta

Marta Szymanska staff pro premium answered 6 years ago

Hi, thank you for report this issue but the problem is that waves effects not working in self-closed elements (you can read about this here: https://github.com/Dogfalo/materialize/issues/440). So, for now, I can recommend you to change an <input>tag to <button>sth</button> tags and safe the type="submit" value="Submit" inside of it. We will try to fix this in MDB package in the nearest future. Best, Marta

tina@meadors.com pro commented 6 years ago

Thank you for the prompt response, though I don't think that's a feasible work-around for me. I've got hundreds (or more!) input buttons throughout an application and code that often uses the submit input as part of the validation process. I also notice the last response on that thread you linked to is nearly two years old, so I'm not holding out hope that the waves effect developers will be fixing anything promptly. I may end up having to roll back to mdb release 4.5.5, though I'm reluctant to do so after the investment in rolling out 4.5.6. I'll keep looking for other options - please let me know if you hear of any.

Marta Szymanska staff pro premium commented 6 years ago

Hi, for sure we will be looking for a better solution for this bug. If there will be any fixes I will inform you.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Tina Meadors
Pro User
89Support score
11Questions 6Answers
0Snippets likes 3Snippets