I am unable to click on button after giving z-index to it. It's overlapping on my side navigation bar I don't know why, any suggestions would be great:) .
How can I make it clickable even after z-index=-1
MY CODE :
<div class="col-lg-1 col-lg-offset-0 col-xs-4" >
<span class="glyphicon glyphicon-heart" id="lovehate" style="left:17px; top:20px;" ></span>
<a href="{{route('lovebutton',['username' => $user->username,'action'=>'love']) }}" >
<button class="btn btn-md btn-default btn-lg-round waves-effect waves-teal" type="button" style="z-index: -1; " id="lovebtn">Love</button>
</a>
</div>
Since for those element that z-index value has not assigned, it's z-index value is auto. and for as long as you do not post more of your code we are not going to be able to help.
I tried your code you provided here: https://jsfiddle.net/cb16h3jo/ and the button is responsive.
You can inspect you button in your browser and see if any other element is overlaying in your element. If so then change that element z-index to something lower than your button z-indez says: z-index: -2
I guess you have a reason for setting the zindex to -1? is not that your button is not clickable, is that probably something is overlapping it (I've tried the piece of code you posted and I can click on the button).
you could use high values to bring the button to top layer... try
z-index=3
or
z-index=5
or
z-index=9
Related
So, using Bootstrap 4, I have a navigation bar that is set to .sticky-top. There's a button that calls a popover, which works great until the page is scrolled a little, then the top part of the popover content gets hidden.
This wouldn't be too bad if it only happened upon scrolling. The real issue is that if the popover is opened AFTER scrolling, the contents are still hidden.
Here's a Fiddle showing the problem:
https://jsfiddle.net/vfpb7r2d/16/
And the most relevant bit of code:
<div class="sticky-top bg-dark p-2">
<div class="btn btn-primary" data-toggle="popover" title="More information..." data-content="Isn't there a way to keep the whole popover visible??? The longer the popover content becomes, the more of the content disappears with scrolling. (There does seem to be a maximum cutoff point, but I haven't tried to measure what it is.)" />Button</div>
</div>
Is there any way to fix this?
Add data-boundary="viewport" to the popover element.
<div class="btn btn-primary" data-toggle="popover" data-boundary="viewport" title="More information..." data-content="Isn't there a way to keep the whole popover visible?">Button</div>
https://jsfiddle.net/vfpb7r2d/22/
I have and element that should be displayed or hidden from different menu entries (e.g. its visibility toggled), and a toggle button that should switch the visibility of the element, but there are menu locations the element should be visible regardless of the toggle button state.
<a class="menu-bar" data-toggle="collapse" href="#menu">
<span class="bars"></span>
</a>
<div class="collapse menu surcarte" id="menu">
<div class="dansmenu">
some nice stuff comes here
</div>
</div>
HTML above is OK. But if add this code in a top menu bar :
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 1 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 2 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 3 </a>
Each link will toggle the #menu element, first showing it, then hiding it and so and. But i want them to allways show the #menu element. Only the element with the "bars" class should act as a toggler.
I tryed to solve it with $("#menu").show();
but the jquery command seams not working.
Then i tryed the following to find out what happened:
click the link of class "menu-bar" to make the div appearing.
use the command $("#menu").hide(); => WORKS
click the link of class "menu-bar" to make the div disapear : DOES NOT WORK ANYMORE
click the link of class "menu-bar" to toggle the div once more : no effect
use the $("#menu").show(); => WORKS again
click the link of class "menu-bar" to make the div disapear : WORKS
use the $("#menu").show(); => DOSN'T work anymore.
It seems that there is a double imbricated toggle command and i can't escape it.
How do i write a working $("#menu").show(); ?
I finally found out my problem.
I was trying this :
$("#menu").toggle()
where the right syntax was :
$("#menu").collapse('toggle')
Special thanks to Rory McCrossan who showed me the strating point.
I made a navbar and there is a green button. When the cursor hovers on it, I want a tooltip (at the bottom) to appear. However that is not happening. I used the following script:
$("[data-toggle="tooltip"]").tooltip();
A very strange thing happens. The tooltip is getting hidden underneath the navbar. Or so it seems. Can anybody help me with this? The following is the HTML code for the button (it is enclosed within the header tag):
<a id="ID" style="margin-right: 20px" class="btn btn-success"
data-placement="bottom" data-toggle="tooltip" href="#"
data-original-title="Tooltip on bottom">Has hover state</a>
Fix your JavaScript quotes:
$("a[data-toggle='tooltip']").tooltip();
See this Plunker as reference, it has your markup and the fixed JavaScript.
Note that the .tooltip() is running after the DOM is ready with the relevant markup.
EDIT: After a long discussion in the comments, the solution was to add this to the CSS:
.tooltip{ position: fixed;}
Hello I'm trying to implement voting system like stack overflow, I've finished the backend//whole functionality but I'm having problem displaying them in UI. right now, the arrows look too far apart and the number isn't quite centered. Also if it's possible I want the color of the arrow to be toggled when clicked/unclicked. I've tried this, but keep getting messed up UI. Can someone please help me with this? thank you in advance.
<td class="vert-align">
<div>
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top" style="" aria-hidden="true"></span></a>
<br /> //upper arrow
<span class="number"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br> //number gets displayed here
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></a>
</div> //under arrow
</td>
Also I have one js file for this voting
function vote(node) {
var thread_id = node.attr("href").split('\/')[2];
$.ajax({
url: node.attr("href"),
dataType: "json",
success: function(data) {
$("#vote_count_"+thread_id).html(data.count);
},
error: function(data) {
alert(data.responseJSON.error_message);
}
});
}
$("a.vote").on("click", function() {
vote($(this));
return false;
});
thank you.
To achieve this design with bootstrap (which I can see that you are using) you can simply use this template :
<div class="row">
<div class="col-md-1" style="font-size: 30px; color:#606060; text-align: center;">
<span class="glyphicon glyphicon-triangle-top col-md-12"></span>
<span class="col-md-12">0</span><!-- Number goes here -->
<span class="glyphicon glyphicon-triangle-bottom col-md-12"></span>
</div>
</div>
If you want to toggle the arrow color when clicked use a Javascript method that uses a var (boolean) to determine wether the button is clicked or not, then with the jQuery method .css() you can change the color of the wanted button.
Live example - http://www.bootply.com/6KzWhJefif
I wouls create a CSS class and add it to the '' tag your glyphicons are in. In this class you can set the 'font-size' which will size your iccn. You also should be able to adjust the padding which is what I assume your issue with the incorrect rendering is. If that doesn't help you'll have to use developer tools on your browser and see where you'll need to adjust the padding.
The final thing to do is to set your active, hover and focus on your a tag but using the class. If you've never did this before with CSS it's something like this.
.customClass > a:active, a:hover, a:focus{
color:#fff
}
Hope this helps. If you need more detail let me know but this should be all you need to get it working.
I tried to align two buttons (Apply and Cancel) to a div in order they always be on the bottom of specific div. I tried with position, navbar bottom and a lot of specifications but I can't fixed them. Any help will be preciated.
The main idea is that even when the user expand some collapse element, the buttons don't move to up or down.
Answer here didn't work, maybe for the collapsed control?
Also I've a bottom footer in the page, I don't know if that is a problem.
JS: Fiddle: http://jsfiddle.net/Leandro1981/Mk692/2/
Buttons code:
<div class="container">
<button type="button" class="btn btn-danger pull-left">Cancelar</button>
<button type="button" class="btn btn-success pull-right">Continuar</button>
</div>
Initial State:
Wanted State:
Actual State (error):
I think the easiest way to do that is to add this CSS:
.panel-group {min-height: 258px;}
I've updated the fiddle: http://jsfiddle.net/Mk692/5/