Chaning &#38;lt;button&#38;gt; tag into &#38;lt;input&#38;gt

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

yonetmen free asked 5 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?

Add comment

yonetmen free answered 5 years ago

0 0 Best answer

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 free commented 5 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 commented 5 years ago

I'm so glad you've found a solution to your problem!

Add comment

Bartłomiej Malanowski staff answered 5 years ago