JS Customize the Height of Toolbar

Sometimes we want to customize the height of the toolbar, for example, modify it to 40px as shown below:

You can use JavaScript in Loading End event to control the height of the toolbar in the page.

Modify the height of the toolbar for the corresponding preview mode. For example, to modify the height of the toolbar under the Data Entry Preview, click Template > Web Attributes > Data Entry Settings, choose Individually set for the template, and then add the Loading End event, as shown in the figure below:

JS is as follows:

//x-toolbar is the div class style where the toolbar is located
$(".x-toolbar").css({
"height":"40px",
      "background-size":"100% 110%",
      "border-bottom":"solid 1px #d0d0d0",
      "border-top":"solid 1px #d0d0d0"
    })
$(".x-toolbar table").attr("style","height:40px")
//Reset the toolbar height when the window changes size
$(window).resize(function() {
$(".x-toolbar").css({
"height":"40px",
      "background-size":"100% 110%",
      "border-bottom":"solid 1px #d0d0d0",
      "border-top":"solid 1px #d0d0d0"
    })
});

Save the template, choose Data Entry Preview, and the effect is as shown at the beginning.

Note: Mobile terminal does not support this effect.

JS-control the height of toolbar.cpt