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(\'' + me.id + '\').showTimerWindow()">' +
        '<span> <span id="timerId"> {hrsWorked}</span><br><a onclick="Ext.getCmp(\'' + me.id + '\').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;
    position:relative;
    top:14%;
}

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" />' + 
        '</div>'
    '</tpl>'
)

    CSS Howto..

    How to highlight a whole cell when hovering over link

    how to change a css of an input if the value of it is not empty in angularJS

    How to set a max-width only to text nodes not in a tag?

    How to hack unsupported mix-blend-mode CSS property?

    How align div to a form field?

    How to space children evenly horizontally in css

    How to center multiple divs inside a container in CSS

    Using CSS3 how to animate the multiple `background-image` for different view ports

    How to put background-color only a section of a select? CSS

    How to hide and show div border line in my case?

    How to resize a Java Script element to fit its container window

    CSS background color show another color

    How to make a background-color transition that eventually covers div to center? [closed]

    How to include css and jquery in joomla component

    How to fade in and out a CSS “:after” pseudo element when adding or removing a class

    How to Highlight a list item after user clicks on link

    How do I get this text using Jsoup?

    How to stick to bottom on layout by using CSS?

    How to align text sideways using css transform

    How * tag can be used in CSS?

    How to edit and see live CSS effect in IE8 like we see in Firefox > Web developer toolbar > Edit CSS function?

    How do I apply a max-width to an input field form-control with a trailing secondary button in Bootstrap 3?

    How do I create a side menu navigation bar that opens items to the right [closed]

    How browser renders HTML

    How to change scrollbar css at runtime with javascript?

    How do I blur an element with scroll, until it's blurred to a certain point?

    CSS how to select nav and li tags but exclude specified class?

    How can i align these div containers

    How to stylize left part of input range in Metro Apps?

    How to handle cq component with same html structure and different css?