CODEWITHSUNDEEP
javascripthtmlcssmaterialize
stackunderflow
stackunderflow

Reputation: 53

Materialize Button only works when clicked some parts

Hello I have created a button with Materialize, but it only works for some areas of the button (primarily the area that surrounds the text). Any reason for this?

In my form all I do is add another input like this:

<input name="mySubmit" type="submit" value="Log In!" class="waves-effect waves-light btn" />

But when I click on the button only the boxed area actually recognizes it as input:

enter image description here

Thanks in advance for your help!

Upvotes: 0

Views: 786

Answers (1)

Adibe
Adibe

Reputation: 91

It seems that Materialize wraps the input tag in an "i" tag, which is then rendered into a button-looking element, with clickability limited to the text portion.

I was able to solve this by simply transforming my input tag into a button tag.

Initial code:

<input type="submit" value="List Employees" id="fetch-employees" 
class="waves-effect waves-light btn">

What is then rendered in the browser:

<i class="waves-effect waves-light btn waves-input-wrapper" style="">
    <input type="submit" value="List Employees" id="fetch-employees" 
    class="waves-button-input">
</i>

Solution:

<button type="submit" value="List Employees" id="fetch-employees" 
class="waves-effect waves-light btn">List Employees</button>

Upvotes: 3

Related Questions