Topic: Chaning <button> tag into <input> tag causes shadow problem
I'm using Spring Boot application with Thymeleaf and MDB. I need to change a <button>
tag into a <input>
tag in order Thymeleaf to work as I want to.
This code block generates the output in the first photo:
<button type="button" class="btn text-white waves-effect" th:classappend="#{add_new_anons_button}">Ilan Ver <i class="fas fa-search ml-1"></i>
in my messages.properties file I have a color defined for the button, which looks like this:
add_new_anons_button=purple darken-4
And the result looks like this: https://ibb.co/Zzjv2f2
But when I change the <button>
tag into <input>
tag like this:
<input type="submit" class="btn text-white waves-effect" value="Ilan Ver" th:classappend="#{add_new_anons_button}" />
I get this result: https://ibb.co/qn5pytC
Shadow looks very bad and I lose the effect of <i class="fas fa-search ml-1"></i>
as well.
Is that something you can help me with?
Bartłomiej Malanowski staff pro premium answered 6 years ago
yonetmen answered 6 years ago
Sorry but this problem has nothing to do with Thymeleaf. I navigated to Modals -> "Modal Forms" and copied the first login (Simple modal login) code and changed this line:
<button class="btn btn-default">Login</button>
into this:
<input type="submit" class="btn btn-default" value="Login" />
but the result is still the same.
yonetmen commented 6 years ago
I solved my problem. It was enough to change type attribute in the button tag for both mdbootstrap & backend to be happy :). Changed it from type="button" to type="submit"
Bartłomiej Malanowski staff pro premium commented 6 years ago
I'm so glad you've found a solution to your problem!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: PC
- Browser: Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: Yes