Search code examples
jquerycoldfusionjqgrid

jQuery jqGrid Change The Font Size For Only The Caption On This Page


In this jQuery & Coldfusion code, how would you change the font size of just the Caption? I would prefer not to update the CSS so it does it to every instance on every page of the Caption. Just the Caption on this page.

No more details available from the customer.

<link rel="stylesheet" type="text/css" href="<cfoutput>#application.url#/#application.directory#</cfoutput>/JS/jquery/ui1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="<cfoutput>#application.url#/#application.directory#</cfoutput>/JS/jquery/external/jqGrid532/ui.jqgrid.css" />

<script src="<cfoutput>#application.url#/#application.directory#</cfoutput>/JS/jquery/jquery-3.2.1.min.js"> </script>
<script src="<cfoutput>#application.url#/#application.directory#</cfoutput>/JS/jquery/ui1.12.1/jquery-ui.min.js"></script>
<script src="<cfoutput>#application.url#/#application.directory#</cfoutput>/JS/jquery/jquery-migrate-1.4.1.js"></script>
<script src="<cfoutput>#application.url#/#application.directory#</cfoutput>/JS/jquery/external/jqGrid532/grid.locale-en.js"></script>
<script src="<cfoutput>#application.url#/#application.directory#</cfoutput>/JS/jquery/external/jqGrid532/jquery.jqGrid.min.js"></script>
<script src="<cfoutput>#application.url#/#application.directory#</cfoutput>/JS/jquery/external/validate/jquery.validate.js"></script>

<script>
    window.gridInfo = <cfoutput>#globalDataObj.getColumnInfo()#</cfoutput>;
    
    $(document).ready(function(){
        $("#data_grid_display").jqGrid({
            url:'<cfoutput>#application.url#/#application.directory#</cfoutput>/cfc/TheLoadsutil.cfc?method=getData',
            datatype: 'json',
            colModel: window.gridInfo.colModel,
            headertitles: true,
            sortable: false,
            pager: $('#Pager'),
            shrinkToFit: false,
            width: 1205,
            height: 400,
            rowNum: 100,
            rowList:[100, 150, 200, 250,500],
            sortorder: 'desc',
            sortname: 'TheLoadsID',
            viewrecords: true,
            caption: 'Loads',
            recordtext: '{0} - {1} of {2} Loads Records',
            pgtext: 'Page {0} / {1}',
            onSelectRow: function(id){},
            gridComplete: function(){
            },
            toolbar: [true, "top"],
            jsonReader: {
               root: "ROWS",
               page: "PAGE",
               total: "TOTAL",
               records: "RECORDS",
               cell: "",
               id: "1"}
            
        });

        //append the new button
        jQuery('#t_data_grid_display').append('<input type="button" value="New Record" title="Create a New Record" onclick="initializeEditModal(0,0);">');
        
    });//document ready 

    // -- grid column selector
    pickColumns = function () {
        $("#data_grid_display").jqGrid('columnChooser', {
        dialog_opts: {
            modal: true,
            minWidth: 470
            }
        }); 

      };
  </script>

Solution

  • What @SOS write is absolutely correct.

    In your case it is just this line

    #gview_data_grid_display .ui-jqgrid-caption {
        font-size:  15px;
    }
    

    Note the gview_ prefix