Hide close (x) button on jQuery UI tabs using CSS in ASP.Net

vishalkal
 
on Sep 17, 2021 02:13 AM
890 Views

How to hide close (x) button on tab, call from iframe in jQuery

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="../App_Content/css/jquery-ui.theme.min.css" rel="stylesheet" />
    <style>
        .ui-icon-circle-close {
            margin-bottom: 20px !important;
            margin-left: 15px !important;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="tabPage" class="contents">
        <ul id="panelList" class="tabs" runat="server" />
    </div>
    <script src="../App_Content/js/jquery.hijack.min.js"></script>
    <script type="text/javascript">

        function iframeLoaded() {
            $('.contentsIframe').height($('.contentsIframe').contents().outerHeight() * 1.3);
        }

        // JQuery scripting
        $(document).ready(function () {
            // Setup the jQuery UI tabs
            $('#tabPage').tabs({
                beforeLoad: function (event, ui) {
                    if ($(ui.panel).html()) {    // If content already there...
                        event.preventDefault();      // ...don't load it again.
                    }
                },
                spinner: 'Loading...',
                cache: false,
                ajaxOptions: { cache: false },
                //cache: true, // This ensures selecting a tab does not refresh the page
                load: function (event, ui) {
                    // Keep links, form submissions, etc. contained within the tab
                    $(ui.panel).hijack();

                    // Adjust the IFRAME size correctly in the browser window
                    $('.contentsIframe').width((ViewPortWidth() - widthAdjust));
                    $('.contentsIframe').height((ViewPortHeight() - $('.menuRow').height() - $('.tabs').height() - heightAdjust));

                    $('.contentsIframe').each(function () {
                        function injectCSS() {
                            $iframe.contents().find('head').append(
                                $('<link/>', { rel: 'stylesheet', href: '../App_Content/css/iframe.css', type: 'text/css' })
                            );
                        }

                        var $iframe = $(this);
                        $iframe.on('load', injectCSS);
                        injectCSS();
                    });
                }
            });
        });
    </script>
</asp:Content>

 

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <tab id="Tab1" displayName="MA026.0 - Item Master" path="http://localhost:60451/Stock/ST_ItemMaster.aspx" />
  <tab id="Tab2" displayName="IN015.0 - Purchase Indent" path="http://localhost:60451/Stock/PM_GoodsRequisitionNote.aspx" />
  <tab id="Tab3" displayName="PU005.3 - Purchase Order" path="http://localhost:60451/Stock/PM_PurchaseOrder.aspx" />
  <tab id="Tab4" displayName="PR019.2 - Multiple Plot Record Keeping" path="http://localhost:60451/RecordKeeping/RK_RecordKeeping.aspx" />
</configuration>

 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 17, 2021 02:15 AM

Hi vishalkal,

Which close (X) button you want to hide.

Please share screenshot.

vishalkal
 
on Sep 17, 2021 03:19 AM
dharmendr
 
on Sep 17, 2021 07:29 AM

For tabs which jquery plugin you are using?

vishalkal
 
on Sep 19, 2021 09:54 PM

<link href="../App_Content/css/jquery-ui.theme.min.css" rel="stylesheet" />

 

<script src="../App_Content/js/jquery.hijack.min.js"></script>

dharmendr
 
on Sep 20, 2021 05:36 AM

Hi vishalkal,

Use below css.

.ui-tabs-nav li:only-child span.ui-icon-close{
  display:none !important;
}