CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Catcher
Catcher

Reputation: 53

Why I cannot click on the link when the width of browser shrinks?

I'm using twitter bootstrap for my CSS.

Now I've just added "Tweet button" on very right side of Navigator.
It looks fine but I encountered weird problem.

It is clickable when the width of navigation is wide enough but it won't let me click almost all the links when it's short.
Why does this happen? and is there any way to solve this?

I made JS FIDDLE so check this please.
Please try shrink and spread the width of navigation and see whether if the links are clickable.
Thanks!

It's clickable with this width

clickable

It's not clickable with this width

enter image description here

HTML

          <body>
  <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
            <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>



            <div class="nav-collapse collapse navbar-responsive-collapse">
                <ul class="nav">
                    <li><a href="#A">A</a></li>             
                    <li><a href="#B">B</a></li>
                    <li><a href="#C">C</a></li>
                    <li><a href="#D">D</a></li>
                    <li><a href="#E">E</a></li>             
                </ul>
            </div>


            <div class="nav pull-right">

                　
                    <div class="btn-group"><a href="/user/a"><img alt="Avatar" src="no.png" style="width: 28px; height: 28px; border; border:1px solid rgb(255, 255, 255);margin-right: 2px;" /></a>
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        A<span id="message_received_count_navi"></span>
                        <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu pull-right">
                        <li><a href="/users/edit">EDIT</a></li>
                        <li><a href="/visitor">VISITOR</a></li>

                        <li><a href="/messages/received">
                            messages
                        </a></li>

                        <li class="divider"></li>
                        <li>
                            <a href="/logout">logout</a>       
                        </li>
                        </ul>
                    </div>

                    <!-- Button trigger modal -->
                    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    Tweet
                    </button>

            </div>      



</div>



    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title" id="myModalLabel">Tweet</h3>
          </div>
          <div class="modal-body">

                <form accept-charset="UTF-8" action="/users/A/comments" class="new_comment" enctype="multipart/form-data" id="new_comment" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="k4DbdSOK9IZy2hJ1xqH4SGuJDrHN92nNznuZAMC2B44=" /></div>
                    <textarea autocomplete="off" class="chat_box" cols="40" id="body_input" name="comment[body]" rows="20" style="width:98%;height:100px;">
</textarea>
                        <span class="btn btn-file"><input id="comment_comment_icon" name="comment[comment_icon]" type="file" /></span>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
            <button type="submit" class="btn btn-primary">Tweet</button>
</form>       </div>
        </div>
      </div>
    </div>

</div>
</div>

Upvotes: 0

Views: 90

Answers (2)

Bharat karotra
Bharat karotra

Reputation: 132

You are having problem with your model dialog window . Please check this code. This dialog window overlapping when sceen size getting small. If you can do top:40% for this dialog problem get solved.

css:

.modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: 40%;
}
× Tweet cancel Tweet

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115279

Because this

<span class="window_label" style="opacity: 0.3;">Result</span>

has been positioned absolutely and is sitting on top of the button so the mouse click can't get through.

You will need to find another way of positioning it out of the way.

Upvotes: 0

Related Questions