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 position a SWIPER SLIDE in the centre of the page? [closed]

    How to keep an image and text (vmax font) aligned when resizing browser?

    How to position a div to be visible but not count towards document width

    Why do the images move when clicked in html and css? How to prevent it? [closed]

    How does Bootstrap's Jumbotron example create space in navbar elements

    Css, text shadow - How to get it overflow off the div

    how to create 100% vertical line in css

    How can I interact with DOM elements under an HTML element that has a background?

    How to re-use .less and generated CSS across projects?

    How to select that has no “type” with CSS

    How to copy a CSS style from a website for re-use

    html, how to make elements not shift when browser zooms?

    How do I get a div-based dropdown to gain a scrollbar instead of extend past the end of the screen using JavaScript and CSS? Struts are also involved

    How to implement padding-free sprites in css?

    How to make the background color transparent

    Customizing Clockdown.js to Show only Minutes and Seconds

    How do you use HTML5 tags while supporting Progressive Enhancement for no-script clients that don't natively recognize unknown elements?

    How do I stop the text from moving when hovered? (background-image is involved)

    How to customized select element through css?

    How to get cropped image with gray/ sepia in my editor.?

    How to force a div to scale at 100% width of the current windows Browser

    How to create a custom vaadin component in vaadin 6

    How to add multiple style rules to css pseudo elements using js?

    Chrome (webkit?) not displaying images correctly in a slideshow

    CSS: How to make a nav menu with a sub nav menu directly below it?

    How to create readonly textbox-like structure using html (div/span) and css?

    How to make a sudoku grid using HTML and CSS?

    how to setup capybara-webkit to test ajax calls and get screenshots(html with css and javascript loaded)

    How to make layout like notes in Google Keep using CSS?

    How to add a border around a canvas?