I'm trying to put a help icon from jquery ui next to a input field. I get a button with a question mark but no effect when I hoover over it.
<span class="ui-state-default ui-corner-all ui-icon ui-icon ui-icon-help"></span>
Also, the questionmark is not yellow like is not yellow like it is in the demo. I have all the files.
What am I missing?
Related
The problem is that tooltip is in wrong place - on far left side. So for instance when I hover element with tooltip that is on right side of the screen it will show tooltip on the left side far away from the hovered element. I could't find anything useful on the topic so far. Tried different options, but all tooltips were displayed on the left. Code for my tooltip copied from official foundation page
<button class="button has-tip" type="button" data-tooltip aria-haspopup="true"
data-disable-hover="false" tabindex="1" data-position="top"
title="Fancy word for a beetle." data-alignment="center">
Top Center
</button>
What version of Foundation are you using? Here is a jsfiddle with your HTML using Foundation 6.4.1, and it works fine. The only thing I changed was to add a margin on the button to allow the tooltip to position on top. https://jsfiddle.net/genestd/svygwghz/
<div>
<button class="button has-tip center" type="button" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="1" data-position="top" title="Fancy word for a beetle." data-alignment="center">
Top Center
</button>
</div>
.
.center{
margin: 100px;
}
When creating some clickable dropdowns, I noticed the dropdown menu will hide behind any clickable dropdown buttons if they overlap. Here is an example
How can I fix this? Here is the code used to create the dropdown.
<div class="w3-container">
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-btn">Click Me!</button>
<div id="Demo" class="w3-dropdown-content w3-border">
Link 1
Link 2
</div>
</div>
</div>
I also made a fiddle, but it doesn't seem to be working: https://jsfiddle.net/n2fole00/99d8d7pj/
BTW, would this be considered a bug?
Thanks.
Based on Tony Hensler's comment, it was the z-index.
<div id="<?php echo $course->course_id; ?>" class="w3-dropdown-content w3-border" style="right:0; z-index:1;">
I just added z-index:1 to the w3-dropdown-content div as an inline style for the fix.
Thanks Tony.
Using Jquery-mobile, the following (abbreviated here) footer
<div data-role="footer">
<a href="#table" data-role="button" data-icon="plus"
data-iconpos="left" class="ui-btn-left">Open</a>
<a href="#" data-rel="back" data-role="button" data-icon="delete"
data-iconpos="notext" class="ui-btn-right">Close</a>
</div>
that exist in a popup, when popped-up, its buttons
are displayed outside the popup-frame, aligned under it.
Why? What am I doing wrong?
The full example is in http://jsfiddle.net/yotam/d0aqmx6m/
I'm beginning to wonder if button footers are not supported in popups. Or at least, not fully supported. From the docs, you need to throw a "ui-title" in there too - it's what will give the footer height (The docs show a span after the button definitions).
I've done that here:
<div data-role="footer">
Open
Close
<span class="ui-title"></span>
</div>
See: http://jsfiddle.net/had4or71/
Of course, it only partially solves your problem, as though they are now in the footer, they don't yet look good. I tried with a navbar in the footer with similarly disappointing results (the navbar was well positioned top, bottom, and left, but ran over the right border pretty badly.
Finally, I did this version real quick as well:
http://jsfiddle.net/ph0e54ee/2/
Which shows pushing the close button into the header like the demos site does, and just presenting your open button inline as a standard button - alas, it's a compromise, and not what you asked for.
On further investigation, it would appear the "ui-btn-left" and "ui-btn-right" classes are not supported in the footer, see:
gh:6331
gh:6872
gh:6137 (comment)
Again, I messed about with the CSS a bit, and managed to get something sort of nice, at least on my test browser of chrome. I suspect your mileage will vary greatly outside of chrome.: http://jsfiddle.net/9crnjakr/
When adding an ui-icon element to a jquery dialog, something weird is displayed instead of the requested icon - (check here for an example: http://jsfiddle.net/aE2Fb/)
It seems like ui-state-default somehow hides the actual icon, because if I remove it, then icon shows up ok. Note that same issue occurrs with ui-state-hover as well.
<div id="dialog" title="Basic dialog" class="">
<span class="ui-icon ui-state-default ui-icon-plusthick ui-corner-all" ></span>
</div>
$(function() {
$( "#dialog" ).dialog();
});
Similar topic was discussed here:jquery ui Portlet : incorrect effect on hover ( ui-state-hover ), but the "fix" was not explained at all and therefore its not really clear, what is going on...
When you put the div into a jQuery UI dialog, you add a load of extra parents, and extra classes - with the result that the icon image file you wanted is getting over-ridden twice.
The first override is from the css for the standard widget background image, which also sets the image position to '50% 50%' - so putting the middle of the image in your button. This then again gets over-ridden back to the correct icon image file, but without any position settings - so you end up seeing the middle of the icon image in your button.
Try putting the icon span inside another container, and move the ui-state-default and ui-corner-all classes to the container instead:
http://jsfiddle.net/7CLL6/
<div id="dialog" title="Basic dialog" class="">
<span class='ui-state-default ui-corner-all'>
<span class="ui-button ui-icon ui-icon-plusthick"></span>
</span>
</div>
Dynamically injecting buttons into JQM footers seems to be an exercise in frustration. Anyone have a clue how to apply proper formatting for this? Here are several anomalies I found trying to do this:
Multi-column button grids are not properly formatted in the footer
data-corners="false" attribute (to get flush buttons) does not apply to the first and last buttons in the footer
With data-role="controlgroup" data-type="horizontal" for the footer buttons, if there are too many buttons to fit in one row the styling looks weird (since some buttons will have rounded corners, others will not)
If data-role="controlgroup" data-type="horizontal" are omitted for the footer buttons, buttons may be rendered partially off the screen...
In general - argh!!!! Anyone have any success dynamically injecting buttons into a footer? If so, would much appreciate to hear how this was achieved.
Thanks!
Would something like this work:
http://jsfiddle.net/eznh8/7/
JS
$('#addButtonName').click(function() {
var theFooter = $('#addMoreButtons');
var buttonName= $('#newButtonName');
if(buttonName.val() != '') {
theFooter.append(''+buttonName.val()+'');
buttonName.val('');
$('#theHomePage').trigger('create');
}
});
HTML
<div data-role="page" id="theHomePage">
<label for="basic">Button Name:</label>
<input type="text" name="newButtonName" id="newButtonName" value="" />
Add New button
<div data-role="footer" class="ui-bar" id="addMoreButtons">
</div>
</div>
Multi-column button grids are not properly formatted in the footer - this is my response to that.
One thing to check if you are using controlgroup with a href links - make sure your each of the links in the control group has the following CSS;
vertical-align:top;
You will also have to get more control over how the elements look if you are styling them as buttons. I posted a similar discussion over here:
https://forum.jquery.com/topic/jquery-mobile-horizontal-control-groups-creating-a-custom-split-list
https://forum.jquery.com/topic/css-code-to-help-control-entire-button-in-a-jquery-mobile-theme
Hope that helps.