CODEWITHSUNDEEP
jquerydialog
bart2puck
bart2puck

Reputation: 2522

Close text on close button in jquery dialog

What is causing my jquery dialog to show both the Close text and the icon?

How can i remove the Close text?

I am using:

<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css" />

Close Image

Upvotes: 6

Views: 4854

Answers (4)

Hazem Twair
Hazem Twair

Reputation: 1

The specific version you were using for jquery-ui.css (1.10.3) doesn't support the functionality of hiding the 'Close' text. However, you can use version (1.12.0-beta.1) or any subsequent version to achieve the feature.

For instance, you can include this link tag:

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/cupertino/jquery-ui.css" />

And this is the style rule that hides the text:

.ui-button-icon-only {
  width: 2em;
  box-sizing: border-box;
  text-indent: -9999px;
  white-space: nowrap;
}

To access all the style rules in this version, you can visit the following URL: https://code.jquery.com/ui/1.12.0/themes/cupertino/jquery-ui.css

Upvotes: 0

Yang
Yang

Reputation: 111

I also have this issue.

I have a shell page with included Jquery library and Jquery UI library. After a 3rd party application is loaded into my shell page, their bundled javascript library (which includes different version Jquery, Jquery UI and Bootstrap) conficts with the shell page.

Then the popup dialog defined in my shell page has exact same issue as shown in your question -- the overlapped close text and X sign.

Fixing the conflict is too complicated for my case, the simplest solution seems just hiding that default close button and creating a customized button to do closing.

Here is the CSS to hide the close button

    .ui-dialog-titlebar-close {
    visibility: hidden;
    }

Upvotes: 0

Ben Temple-Heald
Ben Temple-Heald

Reputation: 708

Source : https://jqueryui.com/dialog/ 

<style>
    .ui-button-icon-only {
        width: 2em;
        box-sizing: border-box;
        text-indent: -9999px;
        white-space: nowrap;
    }
    </style>

Close button :    

<button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close">
    <span class="ui-button-icon ui-icon ui-icon-closethick"></span>
    <span class="ui-button-icon-space"> </span>
    Close
</button>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

I guess you are missing some required CSS files. But anyway, you can over-ride by using:

  • Negative text indent.
  • Overflow hidden.

Give this CSS:

.close {
  text-indent: -99em;
  overflow: hidden;
}

Upvotes: 3

Related Questions