I have the following code:
$( ".delete" ).button({
text: false,
icons: {
primary: "ui-icon-trash"
}
});
<button id="delete" class="delete" />test
The word "test" is being appended to the button as its title, for some reason, instead of appearing after the button. If text is set to false, the button shows with only an icon. If text is not set to false, the word "test" appears within the button. It should just be some text following the button, and I can find no reason as to why the button is nabbing it for a title. I've also tried defining a title, a label...hasn't helped. Thanks.
changing your markup as such should resolve this:
<button id="delete" class="delete" ></button>test
Related
How to remove default tooltip from a menu item in a collapsible state with sidebar? It seems like the same question asked in the ant design GitHub also, but no response. Code and screenshot below.
<Menu.Item key="profile">
<Link to={`${baseConfig.page.profile.url}`}>
<span className="isoMenuHolder" style={{color:'#ffffff'}}>
<i className="icon-admin" />
<span className="nav-text">
Settings
</span>
</span>
</Link>
</Menu.Item>
Take it out with css
.ant-tooltip {
display: none;
}
Not sure if my workaround helps you or not but I have a collapse/expand button within the Menu and it displays the color of the button as the tooltip. So i removed the Menu.Item and the tooltip disappeared
<Menu
mode="inline"
theme="light"
inlineCollapsed={this.state.menuCollapsed}
className="CollapseButtonMenu"
>
<Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
<Icon type={this.state.menuCollapsed ? 'menu-unfold' : 'menu-fold'} />
</Button>
</Menu>
since the new changes on antd (> 4.23.3), the <Menu.Item /> component was deprecated, with the new API they provide a way to make the tooltip disappear is to define the title attribute as null or as an empty string on the items list like:
const items = [
{
key: "0",
title: "", //this makes the tooltip disappear
label: "Any Label"
}
];
I have a jQuery UI Dialog that is displayed when there are form errors.
Heres the code:
function alert_field_errors (errors)
{
$('<div></div>').dialog({
modal: true,
title: "Error",
open: function () {
$(this).html('The following are required:<br /><br />'+errors+'<br />Please complete these in order to continue.');
},
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
}
the errors variable would contain something like First Name<br />Last Name<br />Email Address<br />
It works great, except for the fact that it is not centered. It seems to be positioning itself before the content is loaded, so that when it is displayed, the bottom margin of the dialog is closer to the bottom of the window compared to the top margin of the dialog.
I tried using the position option, but nothing seems to work.
Any help would be greatly appreciated.
Heres how I fixed it:
I created an empty div on the page with the id of error-dialog and gave it css display: none;.
Then I changed my code to this:
$('#error-dialog').html('The following are required:<br /><br /><i>'+$errors+'</i><br />Please complete these in order to continue.');
$('#error-dialog').dialog({
modal: true,
title: "Error",
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
Now it is populating the dialog with content before display it, therefore allowing it to center itself properly.
When I call fadeOut on my dialog it only does a partial fade and leaves the grey header area where the dialog title is. I've tried removing the title as well as the various attributes that disable the exit button in the upper right corner of the dialog, but that didn't work. As you'll see in my script below, I want the dialog to close after the form submission has been validated.
//HTML
<div id="dialog">
<form id="form">
<p id="thanks">Please provide a contact number. It will only be shared with the
host</p><input id="number" name="number" type="text"/>
<button id="submit" type="submit">Submit</button>
</form>
</div>
//JS
if(myConditional){
//FORM IS HIDDEN ON PAGE LOAD AND SHOWN ON CLICK
$('form').show();
$('#dialog').dialog({
//These parameters are meant to disable the dialog close button
closeOnEscape: false,
beforeclose: function (event, ui) { return false; },
dialogClass: "noclose",
title: "Thanks For Volunteeering",
minWidth: 500
});
$('button').button();
}else{
//other code
}
//Validate the phone number before saving it to local storage
$("#form").validate({
rules: {
number : {
required: true
customvalidation: true
}
},
messages: {
number : {
required: "enter a phone number"
}
},
submitHandler: function(form) {
var number = $('#number').val();
localStorage.setItem('number', JSON.stringify(number));
//THIS FADE OUT ISN'T FULLY FADING THE DIALOG
$('#dialog').fadeOut();
} //closes submit handler
});//close validate
Ok I figured it out.
I got rid of the beforeClose parameter in the dialog init code, and in the form validation submit handler I added this:
$('#dialog').fadeOut('slow', function(){
$( this ).dialog( "close" );
});
//The fadeOut method has a call back function you can use with it to do something after the fade is completed.
i am instantiating a button widget like so
var button = $('<div>')
.buttonMarkup({
icon: 'plus',
corners: false,
type: 'button',
})
.attr('id', 'my-button')
.text('start') //when this is added the icon vanishes
.appendTo('#my-div');
the trouble is the when i add text no icon is shown. when i add no text icon is shown
is there anything i overlook
thanks a lot in advance
You need to enhance the markup of the div using .button().
Demo
var button = $('<div>')
.buttonMarkup({
icon: 'plus',
corners: false,
type: 'button',
})
.attr('id', 'my-button')
.text('start') //when this is added the icon vanishes
.appendTo('#my-div').button();
I am using this jquery-ui to display a dialog box but it comes with a freebee named as "close" which I don't want,
you can find rest of code here, Why my Dialog box isn't working
In html its coming up as
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>
Did you look at the documentation?
http://api.jqueryui.com/dialog/
Hiding the close button
In some cases, you may want to hide the close button, for instance, if
you have a close button in the button pane. The best way to accomplish
this is via CSS. As an example, you can define a simple rule, such as:
.no-close .ui-dialog-titlebar-close { display: none; }
Then, you can simply add the no-close class to any dialog in order to hide it's
close button:
$( "#dialog" ).dialog({ dialogClass: "no-close", buttons: [
{
text: "OK",
click: function() {
$( this ).dialog( "close" );
}
} ] });