How to add condition in Extjs4 tpl for detecting current browser

Tags: css,extjs,browser

Problem :

I am working in extjs4. I am displaying tpl with time, projectName and projectnumber.I have tpl as-

tpl : '<tpl for=".">'+
        '<div class = "timer-icon"><img class="taskTimerIconCls" src="./UI-INF/images/s.gif" onclick="Ext.getCmp(\'' + + '\').showTimerWindow()">' +
        '<span> <span id="timerId"> {hrsWorked}</span><br><a onclick="Ext.getCmp(\'' + + '\').showTimerWindow()">Stop Timer</a></span></div>' +
        '<div class = "task-text-cls"><span  id="taskText">{projectName}&nbsp&nbsp({formattedProjectNumber})</span><br>{title}</div>'
        + '</tpl>',

And for class "task-text-cls" i have css as-

.task-text-cls {
    color: white;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 260px;
    padding: 0 0 0 10px;
    font-size: 12px;

Its working correctly in IE,FireFox but giving issue in chrome[more space is getting included between fields]. Chrome requires width as 125px to work properly. So in extjs tpl, how to detect which is current browser and how to apply conditional css.

Solution :

ExtJS adds a CSS class indicating the browser (engine) to the HTML body element, such as:

  • x-webkit
  • x-chrome
  • x-gecko
  • x-ie
  • x-ie8
  • ...and so on...

You can see that e.g. in Chrome's developer tools, when you inspect the HTML:

ExtJS browser CSS class

In your CSS file you can use that class to create a browser-based selector, e.g.:

.x-chrome .task-text-cls {
    width: 125px;

If you want to change your template's markup depending on the browser, you can use the corresponding properties on the Ext object, such as Ext.isChrome:

tpl: (
    '<tpl for=".">' +
        (Ext.isChrome ? '<div class="chrome">' : '<div>') + 
            '<img src="test.jpg" />' + 

    CSS Howto..

    how to encode .css file?

    HTML/CSS - Input [Text] How to disable the browser from offering suggestings in the Dropdown?

    css transition effects on show/hide element using css3 [duplicate]

    Background image url is not showing the image

    GridView Non-Visible Row Showing up in Empty Data Row

    CSS Sprites - How to align and make responsive?

    CSS - How to apply box-shadow to a image rounded

    How to achieve “responsiveness” of this template?

    how to horizontally center a div of 10000px (wider than full screen) in CSS?

    How to properly apply a css hack for IE11 transition misbehaviour

    How to get alternate colors div with pure css and with IE 7 support?

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    how to create circle image wrapper

    CSS/JQuery: A scrolling, overlay div and a centered layout - how to get it in a somewhat fixed position?

    How to preload large css and javascript files in vanilla javascript

    How to hide a CSS media query from print? “not” logical operator does not work

    Javascript: How to highlight some numbers or text within a line or paragraph?

    jQuery wait for show()? Getting wrong data

    How can I style a list of name-value pairs to appear like an HTML table?

    CSS: How to create a lines or dots over a background image? [closed]

    How to change the scrolling text in CSS or JQuery

    how to remove small space that only appear in iphone browser

    How to fit an image according to screen size

    How to apply CSS to a textbox?

    How to create a variable from CSS class attribute?

    How do I strip a line of text or amount of words/characters from stored text with CSS/Javascript?

    How to animate sections in pure CSS when scrolling the page?

    How to get arrows appear on carousel only on hover

    How to change content of a div by clicking a button outside the div?

    how to trigger a css animation after certain pixels of scroll