CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RajeshKannan
RajeshKannan

Reputation: 904

Button not clicking inside Fixed position DIV?

I am facing some issues due to the fixed position div at the footer.

The footer bar css styles is shown below:

.footerbar{
padding-bottom: 3px;
    background-color: #05A3AD;
    bottom: 100px;
    height: 45px;
    left: 0px;
    position: fixed !important;
    text-align: center;
    width: 100%;
    z-index: 101;
}

The issue is, button is not clicking when it is placed inside of fixed div. FYI, the button is clickable or working only at IE with the above style and not working at any other browsers.

i.e.)

<div class="footerbar">
    <input type='button' id='somebtn'/>
</div>

The somebtn is not clicking inside of fixed div. When I removed the fixed position and changed the bottom from 100px to 0px, the button is clicking and works fine.

I'm struggling at this point. Kindly advice me on the issue. Thanks in advance.

Upvotes: 0

Views: 2566

Answers (2)

user2473779
user2473779

Reputation: 731

Works perfectly fine in this fiddle. Just changed the class name from ".footerbar" to "footerbar" and close the div properly!

<div class="footerbar">
<input type='button' id='somebtn' value="some button"/>
</div> //this needs to be corrected!

Upvotes: 1

G.L.P
G.L.P

Reputation: 7217

Its working fine,

  • You need to close the div properly, use "/" to close the div and
  • Remove "." (dot) from HTML code ie., <div class=".footerbar">

CSS:

 <div class="footerbar">
        <input type='button' id='somebtn' />
  </div>

Demo

Upvotes: 2

Related Questions