Some buttons have not uppercase style

Topic: Some buttons have not uppercase style

Roman pro premium 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?

Add comment

Roman pro premium priority answered 5 years ago

0 0 Best answer

Now it works as expected. Both versions

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

are uppercased.

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

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

Add comment

Roman pro premium priority answered 6 years ago

0 0 Best answer

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.

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

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)

Add comment

Roman pro premium priority answered 6 years ago

0 0 Best answer

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!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

User: Pro
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

Roman

Pro User Premium support

192Support score
19Questions 16Answers

0Snippets likes 3Snippets