Search code examples
htmlcssmaterialize

How to make Materialize tap-target rectangular in shape

I am using materialize-css and I want to make tape target area rectangular how is that achievable?

Currently My Tap-target area looks like this and my content are hidden:- enter image description here

My html code goes like this:-

<div class="fixed-action-btn" style="bottom: 100px; right: 24px;">
    <a id="menu" class="btn btn-floating btn-large cyan">
        <i class="material-icons">menu</i>
    </a>
</div>

<!-- Tap Target Structure -->
<div class="tap-target cyan" data-target="menu">
    <div class="tap-target-content white-text">
        <h5>Holiday List</h5>
        <p class="white-text" style="font-size:120%;">
            <b>
                Sat Aug 01 Bakri Id<br>
                Mon Aug 03 Raksha Bandhan<br>
                Wed Aug 12 Janamasthami<br>
                Sat Aug 15 Independence Day<br>
                Fri Oct 02 Gandhi Jayanti<br>
                Mon Oct 26 Dusshera<br>
                Sat Nov 14 Diwali<br>
                Mon Nov 16 Bhai Duj<br>
                Fri Dec 25 Christmas Day
            </b>
        </p>
    </div>
</div>
Solution 
  • .tap-target {
    border-radius: 0;
}

    Inspect the element, look at the styles that are applied and override as you need - anything circular is likely to have border-radius:50%.

    In some cases you may need to use !important:

    .tap-target {
    border-radius: 0 !important;
}