1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Some buttons have not uppercase style

Roman priority asked 6 years ago

Hello, If I use 
<button></button>
the title has an uppercase style. If I use 
<input type="button">
there is no uppercase style. The same is in demo page, too. https://mdbootstrap.com/components/buttons/#button-tags Is it right?

Roman priority answered 5 years ago

Now it works as expected. Both versions

<button></button>
<input type="button">

are uppercased.

Roman priority answered 6 years ago

Hello, thank you for explaining why you use <i> around <input>. Unfortunately, I think this is not the best solution for now. It is very strange to see buttons on https://mdbootstrap.com/components/buttons/#button-tags so different. I think they should have the same graphics. As I can remember in previous versions a combination of input and waves was working. I don't know the right solution but this state is not good.

Piotr Glejzer staff commented 6 years ago

Your welcome. I don't say this is a good solution but for now, we don't have any another solution for this. If we will have something better we will implement as soon as possible! Have a nice day!

Piotr Glejzer staff answered 6 years ago

Yes is alright. The main reason is why inputs had lowercase is that inputs had a parent <i>. I can explain this to you. We have waves.js and If we want correctly working waves with inputs we need some element in inside which will be animated. With <a> and <button> (it mostly waves is added here) is not a problem but if we want using inputs is a problem because <input> tag is a self closing tag so creator's of waves they had an idea to use tag <i> which according to them will be shortcut from <input> tag (<i>) and thanks to this, waves can work with input and this is not a problem for now. Is everything clear? If you have more question let me know! Have a nice day. ( I added to your earlier post but something went wrong so I'm adding this here too, sorry about that)

Roman priority answered 6 years ago

Hi Piotr, thank you for your response. I understand that uppercased text is right. But if I use 
<input type="button">
there isn't uppercase style. And this is what seems to be strange for me. As I wrote you can check it at https://mdbootstrap.com/components/buttons/#button-tags

Piotr Glejzer staff commented 6 years ago

Yes is alright. The main reason is why inputs had lowercase is that inputs had a parent . I can explain this to you. We have waves.js and If we want correctly working waves with inputs we need some element in inside which will be animated. With and (it mostly waves is added here) is not a problem but if we want using inputs is a problem because tag is a self closing tag so creator's of waves they had an idea to use tag which according to them will be shortcut from tag () and thanks to this, waves can work with input and this is not a problem for now. Is everything clear? If you have more question let me know! Have a nice day.

Piotr Glejzer staff answered 6 years ago

Hello, Yes, It is on purpose. We take cue on Material Design about buttons. If you want don't have text uppercase in buttons you have to go to file scss/free/_buttons.scss and delete code 'text-transform: uppercase' in class 'btn'. Best, Piotr
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

Resolved

Specification of the issue
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.5.9
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: Yes
Tags
button
About author
Roman
192Support score
19Questions 16Answers 3Snippets