Chaning tag into tag causes shadow problem


Topic: Chaning <button> tag into <input> tag causes shadow problem

yonetmen asked 6 years ago

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

Currently, Thymeleaf is not supported by MDBootstrap


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!


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: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: PC
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: Yes