Design custom CSS for the buttons inside one specific jQuery dialog among many on the same page

I am trying to specifically style the buttons within one jQuery dialog out of multiple dialogs on my page.

Typically, I would target all dialog buttons using:

.ui-dialog .ui-dialog-buttonpane

and

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset

However, in this scenario, I only want to center the buttons for this particular dialog.

The dialog is generated from a hidden div:

<div id="one" style="display:none;">
  Content of the dialog
</div>

<script type="text/javascript">
$(document).ready(function(){
  $("#one").dialog({
    buttons: {"save":function(){alert("saved");}}
  });
});
</script>

Is there a way to target just this individual dialog with CSS?

Thank you!

jquerycssselectbuttondialog

Answer №1

To achieve the desired result using only CSS, consider utilizing the sibling selector. Since jQuery UI includes the #one element within the dialog body, you can apply styles like this:

#one ~ .ui-dialog-buttonpane .ui-dialog-buttonset {
  margin: auto;
  /* Add any additional styling here */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a pop-up alert following the completion of form validation using JavaScript

I am currently learning JavaScript and working on an enrollment form that requires validating a cellphone number with 11 characters. The issue I'm facing is that every time I hit submit, the page refreshes instead of displaying the validation message. ...

javascriptcssvalidationbootstrap-4popup

Ways to enhance the resilience of the max-width property when utilizing PHP calls or dynamic CSS styling

I attempted to customize the CSS in page builder mode by adding the following code: #content { max-width: 2000px; } While in page builder mode, the desired effect was achieved. However, once I published the changes, the page reverted back to the prev ...

csswordpress

Change all lowercase characters to uppercase in the font file

: I recently created a .ttf font file, but unfortunately only included capital characters. Is there a tool or simple method I could use to automatically create lowercase versions of each letter? For instance, when typing "hello" the font should display ...

htmlcssfontstruetype

The jquery form plugin is experiencing functionality issues

My code is supposed to submit a form to another page without reloading using AJAX. I am using the jQuery Form plugin, but unfortunately, it's not working as expected. Here is my code: <div id='preview'></div> <form action=&a ...

ajaxjqueryjquery-forms-plugin

Customizing Image Layout with jQuery Masonry - Tips for Aligning Images

I've successfully created a jQuery masonry layout that showcases recent posts from various categories on the homepage. However, I'm facing two challenges and seeking help to address them: How do I remove the small white gaps beneath some ima ...

phpjqueryhtmlcss

How to access the values or text of siblings using JQuery in a dynamically generated element

My goal is to retrieve the .text() of the sibling customerID from the class"db_record_left" when the class="db_record_left" is clicked. The entire class="db_record" is dynamically generated. However, the issue is that console. ...

phpjquery

How can I display a date as dd/mm/yyyy in a datatable column using Javascript or Jquery?

Sorting a date column in a datatable can be tricky, especially when it is formatted as dd/mm/yyyy. The issue arises when the column sorts the dates as strings rather than considering the month. This results in incorrect sorting where the day becomes the pr ...

javascriptjquerydatedatatable

Revert Bootstrap 4 Sidebar to its Previous State Upon Navigating Back in the Browser with Recursive Expansion

Check out this HTML, CSS, Bootstrap 4 code that creates a collapsible sidebar menu with an accordion-style design: https://i.sstatic.net/2hPmd.png My Goal I want to achieve the following using either Bootstrap 4, jQuery, or JavaScript... If I click on ...

javascriptjquerytwitter-bootstrapbootstrap-4

What is the best way to insert a tagline above a form?

I'm struggling to figure out where to place a tagline above my form. I want it to be neat and clean, but haven't been successful in finding the right spot. I attempted to insert an <h2> inside the form, but it doesn't look good at al ...

jqueryhtmlcss

Is JSON utilized to execute the necessary JavaScript code?

Is there a way to make an ajax call that returns JavaScript code which can be executed? Can JSON be used for this purpose? ...

jqueryajaxjson

I desire for both my title and navigation bar to share a common border-bottom

As I embark on my journey into the world of HTML and CSS, my knowledge is still limited. Despite trying various solutions from similar queries, none seem to resolve my specific issue. What I yearn for is to have both my title and navigation bar share the s ...

javascripthtmlcssnavigationtitle

Are there any alternative methods to avoid duplication of Navbar link margin classes in Tailwind CSS?

It feels really repetitive to have to add margin classes to each LI manually on a non-dynamically generated menu. It almost seems as messy as using inline style attributes... Is there a more efficient way to handle this? While it may not be a big deal fo ...

csstailwind-css

The CSS animation is functioning smoothly in Chrome, but unfortunately, it is not working in Firefox

I'm having trouble with my animation not working in Firefox and Safari, even though it works fine in Chrome. I've tried using the -Moz- and -WebKit- vendor prefixes, but it seems that Firefox and Safari already support the animation. CSS: .vi ...

htmlcssfirefoxsafari

Utilizing the CSS Top and Left attributes along with Jquery animations

There are two divisions on a page, namely Left_Div and Right_Div. The images in the Right_Div are positioned using CSS properties such as Top and Left. The Left_Div acts as a left panel, and upon clicking a button, both Left_Div and Right_Div animate to sl ...

jquerycssjquery-mobile

Limited to IE6 and 7 - Issue with CSS/jQuery animation

After putting in 8 hours of non-stop work, I'm feeling pretty drained and need some assistance with fixing a bug that's specific to IE6/7. Any jQuery/CSS experts out there willing to lend a hand? To check out the issue, please visit this link us ...

javascriptjquerycssxhtml

One potential solution to reorganizing the layout is to utilize two rows instead of just one

My current form layout is not very user-friendly, as it appears to be too long for one row. I have fields for amount, note, date, and an option list. I would like to arrange the form so that amount and note are displayed in one row, followed by date and o ...

htmlcss

The purpose of eventOverlap is to enable the inclusion of another event with a distinct tag within the same day

Here is the code snippet: eventOverlap: function(stillEvent, movingEvent) { console.log("I am overlapping something"); if (stillEvent.tags == ""|| movingEvent.tags == "") { console.log("One of the events h ...

javascriptjqueryfullcalendar

Generating HTML Document using asp.net with Internet Explorer

During my work on a tool, I encountered an issue where saving a template as an HTML file from Internet Explorer resulted in improper formatting compared to other browsers like Firefox and Chrome. This mishap led to crashes within the application. Below is ...

asp.nethtmljqueryfile-format

Enhancing a bootstrap gallery with a zoom in effect

I need help creating a gallery using Bootstrap that resembles the style shown in this example: While everything is functional, I am facing an issue with aligning the pictures properly after adding a hover effect. I tried placing each picture in individual ...

csstwitter-bootstrapflexboxhoverbootstrap-5

What is the best way to populate checkboxes using an Ajax request for the RelatedUserAccessPermission function in a Razor Page MVC?

In my work on .NET core 7 MVC razor page, I'm encountering an issue where I am unable to fill the checkboxes with the IDs StockTake and ShelfLabelPrint using an AJAX request to the function RelatedUserAccessPermission.</p> <p>Below is the ...

jqueryajaxasp.net-mvcasp.net-corerazor-pages