I found that button inside a div cannot be clicked, if the div is set as "float". In my html, the two buttons "a" and "b" cannot be clicked. Do you have any idea?
<div id="titlepanel" style="height:65px; position:absolute; top:0px; left:0px; width:70%; overflow:auto; background-color:#b0e0e6;" >
wait
</div>
<div id="subtitlepanel" style="height:65px; position:absolute; top:0px; left:0px; width:70%; visibility:hidden; background-color:#aaaaaa; " >
subtitle
</div>
<div id="buttonpanel" style="height:65px; width:12%; float:right; background-color:#bbbbbb;">
<input type="button" value="a" id="a" />
<input type="button" value="b" id="b" />
</div>
Your code example is working for me too..
however at a guess I'd say there is an absolutely positioned div (not in the code above) "over the top" of your buttons
try adding position: relative; to <div id="buttonpanel"> it may work on it's own if not try adding a z-index too
By the looks of it #subtitlepanel is being overlaid on top of the buttons. Add a z-index to #subtitlepanel as suggested. This is also a common issue in IE.
Related
<div class="row">
<div class="col-lg-2">
Panel for filter
</div>
<div class="col-lg-6">
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#product" style="margin-right:10px">my button</button>
then i show the contents
</div>
</div>
I have a row in bootstrap. The row is divided into two parts. One is a div for filter panel and second is to show some content.
I have a button in the second part (bootstrap modal button). In the navigation breadcrumb, I'm giving an option to hide the filter panel.
All works fine. My problem is that when I hide the first div, In the filter panel my button in the second div also changes the position.
My requirement is that if I hide the filter panel, the button in the second div should not change even though the contents in the second div changes.
Does anyone know any workaround to achieve the desired result?
Try this:
$('button').click(function(){
$('#panel').toggleClass('inactive');
});
#panel{
background-color:red;
height:100px;
display:block;
}
#panel.inactive{
display:none;
}
#content{
position:relative;
background-color:green;
height:100px;
}
.btn{
position:absolute;
top:0;
right:0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-2" id="panel">
Panel for filter
</div>
<div class="col-lg-6" id="content">
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#product" style="margin-right:10px">my button</button>
then i show the contents
</div>
</div>
The reason that the element (your button) moves can be caused by the different interpretation of position: fixed; on a few mobile devices.
I have experienced that the fixed element in question can not be a child-element of any moving (eg. scrolling) element. On desktop this seems not a problem. So you should place the button outside of the row or if needed inside just
position: absolute;
top:10px;
right: 10px;
or so as stated by kittyCat
A next reason could be: if you hide the first part of your row col-lg-2 then there are two grid-cells missing to the line. So just hide the content of the row:
So take the Example of kittyCat and change:
<div class="col-lg-2" id="panel">
Panel for filter
</div>
to
<div class="col-lg-2" >
<div id="panel"> Panel for filter</div>
</div>
and it should work as wanted.
Or if you need the space and you want to hide the col-lg-2 then change the class of the second element from col-lg-6 to col-lg-8.
I have a textbox I want at the very bottom of the screen at all times. Using the following markup and css, I was able to get it close but there's a weird gap under it and it sits on top of other content.
Markup:
<div class="content">
... stuff here
</div>
<div class="message-text">
<input type="text" placeholder="Start typing to share a message">
</div>
CSS:
.message-text {
position:fixed;
bottom:0px;
width:100%;
}
And here's a visual:
Any help would be awesome.
Just add this property, it'll work.
.message-text {
margin:0px;
}
These solutions (copied below) don't work because the value of the input is preset and needs to scroll horizontall..and the absolutely positioned div covers the input and prevents it from scrolling..
<span style="position:relative;">
<input type="text" disabled />
<div id="textInput" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" ></div>
</span>
document.getElementById("textInput").onclick = function() {
alert("Input clicked");
}
Any suggestions to enable events, while keeping the input scroll?
Make it readonly rather than disabled.
I have 4 images in a row. I want the third image to be overlayed on top of the second image but have not been able to successfully get it to work. Here is my fiddle:
http://jsfiddle.net/AndroidDev/Asu7V/4/
<div style="width:1000px">
<div class="x">
<img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
</div>
<div class="x">
<img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
</div>
<div class="x">
<img src="http://playgo.ro/wp-content/themes/play3.0/play.png" />
</div>
<div class="x">
<img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
</div>
</div>
Add the play image in second div and use position absolute and relative to make it one above the another.
.x{
border:1px solid #000000;
display:inline-block;
height:128px;
position:relative
}
.overlay_img{
position:absolute;
top:0;
left:0
}
DEMO
If you just want it to be over 2nd image then wrap those 2 images in 1 div and give it position:relative then give your Image2 and image 3 position:absolute and z-index:0 & z-index:1 respectively. And position them to top:0; & left:0; that should do it :)
If you can use modern CSS and only need the third image to overlay the second (as in, you don't need to repeat this pattern in a lot of places), you can use the nth-child selector:
.x:nth-child(3) {
margin-left: -136px;
}
This will select the third item with the x class and move it to the left.
if you use margin or position property,you can achieve the overlayed view,
Take a look at http://jsfiddle.net/manojmcet/Z7Y88/
I have a login form on my website that displays when a user clicks a button. It is a div that floats over other content. It only takes up a small portion of the page (directly below the sign in link).
It all works fine apart from one small thing. It displays aligned to the left of the sign in link (i attempted a diagram below).
|sign in|
|sign in stuff here|
I actually want it to look like this (align to the right of the sign in link):
|sign
in|
|sign in stuff here|
This is my HTML:
<div class="clear">
<a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;"><span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span></a>
</div>
<div id="signinbox" style="display:none;">
<p>Who would you like to sign in with?</p>
<p>Google</p>
<p>Yahoo</p>
<p>Other</p>
</div>
And the CSS for the sign in box:
signinbox {background-color:#C1DEEE;
padding:10px; z-index:1; position:
absolute; top:66px; }
Is it possible to do this in just CSS?
Thanks
Wrap the signin info inside another div and call it inner-signin then position that relative to the absolute positioned outter div. You may also have to set the width on the absolute positioned outter div.
div.inner-signinbox {
position: relative;
right: 20px;
}
signinbox {
width: 250px; //ADD A WIDTH
background-color:#C1DEEE;
padding:10px;
z-index:1;
position: absolute;
top:66px;
}
If that does not work, why not just add a "left" property to the signingbox to set the horizontal position as well as the vertical. Is there a reason you don't can't absolute position the element with x and y?
I think you may want to try
float: right
or
text-align: right
Put the sign-in stuff inside the div containing the sign-in button.
Make the container position: relative.
Then give the sign-in stuff position: absolute; and right: 0;.
Incidentally, take care here; requiring Javascript merely to log in is pretty rude. A lot of people run NoScript for a variety of reasons.
I have created new div with class "main-pane". You can adjust the position of "signinbox". from the css by changing the value of "right" and "top".
<div class="main-pane">
<div class="clear">
<a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;">
<span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span>
</a>
</div>
<div id="signinbox" style="display:none;">
<p>Who would you like to sign in with?</p>
<p>Google</p>
<p>Yahoo</p>
<p>Other</p>
</div>
</div>
.main-pane{
position:relative;
}
#signinbox{
width: 250px;
background-color:#C1DEEE;
padding:10px;
z-index:5;
position: absolute;
top:66px;
right:0px;
}
Thanks,
Arun Krishnan