I tried some of the solutions posted here, but they don’t work if the page has been scrolled prior to the dialog being opened. The problem is that it calculates the position without taking into account the scroll position, because the position is absolute during this calculation. The solution I found was to set the … Read more
I could also recommend: .ui-button .ui-icon.your-own-custom-class { background-image: url(your-path-to-normal-image-file.png); width: your-icon-width; height: your-icon-height; } .ui-button.ui-state-hover .ui-icon.your-own-custom-class { background-image: url(your-path-to-highlighted-image-file.png); width: your-icon-width; height: your-icon-height; } then just type in the JS code: jQuery(‘selector-to-your-button’).button({ text: false, icons: { primary: “you-own-cusom-class” // Custom icon }}); It worked for me and hope it works for you too!
You can set the height via CSS: .ui-autocomplete { max-height: 600px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; /* add padding to account for vertical scrollbar */ z-index:1000 !important; }
The UI for adding JS frameworks has been adapted (multiple times). Currently you can add these frameworks by clicking on the settings-cog-wheel of the Javascript section:
To get the id of both the draggable and the droppable elements use the following: $(‘.selector’).droppable({ drop: Drop }); function Drop(event, ui) { var draggableId = ui.draggable.attr(“id”); var droppableId = $(this).attr(“id”); } Sorry might be a little late for you but I have just started using jquery and needed the exact thing.
.append() appends html to the end of existing html string, use .html() to replace what’s currently inside of #dialog.
There’s 2 configuration options for that: altField and altFormat. http://api.jqueryui.com/datepicker/#option-altField If you specify an altField, that field will be updated too, and will have the altFormat. Normally you will want make the altField a hidden field, soyou can ignore the regular field and send to db the altField.
If you really need to do that, here is an approach I am using. The plan: Create a component to manage the jQuery plugin. This component will provide a React-centric view of the jQuery component. Moreover, it will: Use React lifecycle methods to initialize and tear down the jQuery plugin; Use React props as plugin … Read more
$(‘#sortable’).sortable({ start: function(e, ui) { // creates a temporary attribute on the element with the old index $(this).attr(‘data-previndex’, ui.item.index()); }, update: function(e, ui) { // gets the new and old index then removes the temporary attribute var newIndex = ui.item.index(); var oldIndex = $(this).attr(‘data-previndex’); $(this).removeAttr(‘data-previndex’); } });
This will override the function used when setting jQuery UI dialog titles, allowing it to contain HTML. $.widget(“ui.dialog”, $.extend({}, $.ui.dialog.prototype, { _title: function(title) { if (!this.options.title ) { title.html(“ ”); } else { title.html(this.options.title); } } }));