I am currently developing a browser extension and I am encountering an issue with using JQueryUI to display a modal dialog. The problem arises when certain websites, for example espn.com, also utilize JQueryUI but do not properly scope their own elements. Instead, they apply styles directly to basic JQueryUI elements. One troublesome example of this is:
.ui-widget{
top:50% !important;
}
This means that the position of my extension's dialog is no longer adjustable. While I have been able to overcome other styling conflicts by using more specific selectors and adding my own !important tags, this particular issue has me stumped. I do not want the position of the dialog to be fixed in any way; I want JQueryUI to be able to calculate and update the position when the dialog is dragged or manipulated. I have tried:
$( ".selector" ).dialog( "option", "position", { my: "center", at: "center", of: window });
Unfortunately, the only available values I can use, other than 'auto' which did not work, are fixed values. Unless someone has a CSS workaround for me, I believe I will need to dynamically retrieve the position JQuery calculates during dragging and overwrite any existing styles with an !important tag. Something along the lines of:
$(this).css("top", calculatedVal + " !important");However, I am unsure how to obtain these calculated values. Opening Chrome's developer tools and inspecting the .ui-dialog element reveals absolute positional values in pixels that JQueryUI is calculating, but I do not know how to access them. Simply using:
$(this).css("top");
returns the overridden values, such as '50%'. Does anyone know how I can retrieve these dynamic position values, or have a different approach to suggest?
edit: To simplify, my own JQueryUI widget's CSS styles are being affected by another site's styles due to their broad usage of foundational JQueryUI classes like '.ui-widget'. They are using !important tags, making it necessary for me to use a more specific class definition and add an !important tag to override their styles. While this works for static settings like font color, I am facing difficulties with dynamically updating CSS properties, such as position, that require JQueryUI to recalculate and apply the changes during interaction.
Potential solutions include:
- Removing the !important tag from the site's CSS or the element attribute.
- Obtaining the dynamically calculated position and setting it myself with !important tags.
An additional note on solution 2: Ideally, I would retrieve the position that JQueryUI calculates during dragging. An alternative, less favorable option, would involve recalculating the position myself.
edit 2: The primary issue is not overriding the styles but rather dealing with dynamic values that continuously change. While I understand how to override styles using more specific selectors, the challenge lies in situations where a single consistent value is not present for me to override dynamically. I am exploring alternative approaches beyond constantly retrieving and updating these values, such as finding a method to remove the !important tag from the site's CSS rules.