CODEWITHSUNDEEP
csspaddingmaterialize
rustyBucketBay
rustyBucketBay

Reputation: 4561

Button padding modified on icon added to materialize dropdown

I am using a materialize dropdown. Without any icon the button looks ok, however if I add an icon like this:

{/* <!-- Dropdown Trigger --> */}
<a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>Type<i className="large material-icons">arrow_drop_down</i></a>

The padding gets affected and the text goes down, see picture:

enter image description here

What would be the way to solve this? On the other hand is there any way to see or get materialize code into a project to check the code and check what the css classes do, so as to correct small issues like this or extend some? By the way, I am using react.

Thanks

Edit: What I tried:

<div className="row" style={{alignItems:'center'}}>
    <a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>Type<i className="large material-icons">arrow_drop_down</i></a>
</div>

Upvotes: 0

Views: 150

Answers (1)

Dhana D.
Dhana D.

Reputation: 1720

You can try to put the materalize helper valign-wrapper div under the a tag like this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 
   <a class='dropdown-trigger btn' href='#!' data-target='dropdown1'>
     <div class="valign-wrapper">
       Type<i class="large material-icons">arrow_drop_down</i>
     </div>
   </a>

In your case, the your code should be:

<a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>
    <div className="row" style={{alignItems:'center'}}>
        Type<i className="large material-icons">arrow_drop_down</i>
    </div>
</a>

Upvotes: 1

Related Questions