Absence of Icon in PrimeFaces RowEditor

Having difficulty with the p:rowEditor feature in PrimeFaces as the icon is not displaying properly.

The style class was not modified and the default icon is being used. Works perfectly in FF, Chrome, and IE9.

Unfortunately, project needs to run on IE8 where the icon is not visible. Since this is the standard browser at work, switching to another browser is not an option.

Any suggestions for a workaround or fix to make the rowEditor clickable? Even a simple text saying "Edit" would suffice instead of the icon.

Appreciate any help in advance!

cssjsfprimefacesicons

Answer №1

One effective solution would be to set the X-UA-Compatible header for Primefaces versions greater than or equal to 3.0, or alternatively add a meta tag to the h:head if using a lower version:

<h:head>
  <f:facet name="first"> // This tag can be removed when using a Primefaces version below 3.0
      <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
  </f:facet>
  // Other page contents here
</h:head>

To learn more: Discover how to specify legacy document modes

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for updating or toggling an icon within a button with the help of Bootstrap 5 and jQuery

Looking to switch the icon displayed inside a button upon clicking? The initial icon is <i class="fas fa-bars"></i>, and after being clicked, it should change to <i class="fas fa-times"></i>. How can this be ach ...

javascripthtmljquerycssbootstrap-5

Troubleshooting: JQuery is not properly adding the CSS value

I have a piece of code that adds a CSS class to an element once the user scrolls to a specific point on the page. This is intended to create a sticky menu bar. The distance to scroll is determined based on the screen resolution and is calculated using JQue ...

javascriptjqueryhtmlcss

Issue with f:ajax not functioning properly when using execute and listener attributes

I am in the process of creating a form that includes radio buttons to trigger an AJAX call to a controller with information from three textboxes. The following code successfully triggers an AJAX call to the controller: <h:selectOneRadio id="mobilePhon ...

ajaxjsf

Ways to display or conceal multiple div elements using JavaScript

A group of colleagues and I are currently collaborating on a project to create a website showcasing our research. We have incorporated 1 page that contains detailed descriptions of six different subjects: system biology, proteomics, genomics, transcripto ...

javascripthtmlcsshideshow

By increasing the background-color to 100%, the list item obstructs the background image of its parent div

In cases where an element is set to display:block, the background-color of that element typically extends to 100% of the width of its parent element. However, I am seeking a solution where the background-color only reaches the edge of the text, allowing th ...

htmlcss

Add bullet points to the events listed in fullcalendar

Currently, I am implementing the 'fullcalendar' plugin from jquery in order to display events for a specific month. I am interested in adding bullets to the events, however, my online search did not yield any relevant results. Although I am awar ...

jquerycssfullcalendar

Using media queries in VueJS style tags may not have the desired effect

I've encountered an issue with using @media in the style tags of a VueJS component. Surprisingly, styling within the @media query works consistently, while applying styles based on width rules does not seem to have any effect. <template> &l ...

cssvue.jsmedia-queries

Toggling designs with a simple click

I'm currently working on a ReactJS project and I'm trying to figure out how to change the color of a button when it's clicked. I've heard about the Ripple API, but I find it quite complex to use. Can anyone offer some advice on how I ca ...

cssreactjsbuttonfrontendmaterial-ui

downloading responsive design

Using media queries to define backgrounds with separate images based on browser size: @media (min-width:1440px){div.container{background:URL('bg1440.png');}} @media (min-width:960px){div.container{background:URL('bg960.png');}} @media ...

htmlcssmedia-queries

React Native vector icons display enigmatic symbols

I recently installed react-native-vector, but I'm seeing strange symbols when using it. Can anyone provide guidance on how to properly utilize this library? Platform: Android import React from 'react'; import {View, Text, StyleSheet} from & ...

javascriptreactjsreact-nativenpmicons

Ways to expand a column across two rows using Bootstrao 4

Although this question has been asked numerous times before, the common suggestion is to span a column by placing the other columns into an inner row. Here's an example: <div class="row"> <div class="col-12 col-md-4">logo</div> ...

cssbootstrap-4bootstrap-grid

Issue with JQuery timepicker not displaying on screen

Has anyone encountered a similar issue to mine? I am trying to implement the Simple init DateTimePicker from this example. Here is the code for my simple PHP page: <html> <head> <script src="js/jquery.js"></script> <script src=" ...

phpjquerycssdatetimepicker

Div tag stuck in place, no movement detected

I have organized my items within a div tag and am attempting to align the images and text horizontally so that they reach the maximum length of the page, overflowing into the next line and forming a horizontal list instead of a vertical one (at least, in t ...

htmlcss

Error displaying Font Awesome icons

I am currently facing challenges with managing my assets using webpack. I have installed font-awesome via yarn and imported the .css files into my webpage. However, despite my HTML recognizing the classes from font-awesome.css, the icons I am attempting to ...

csswebpackfont-awesomeyarnpkgsymfony-3.3

Using :before and :after in CSS, three dots can be created in a horizontal line

I am currently trying to display three horizontal dots on my webpage. I have created a demonstration on jsfiddle. span { position: relative; background-color: blue; border-radius: 5px; font-size: 0; margin-left: 20px; padding: 5px; ...

htmlcss

Customize Zurb Foundation: Applying styles to specific child elements based on current screen size (large, medium, small)

For wide displays, I aim to give a distinct border to each 7th element. However, on smaller screens, I wish to apply these styles to every 4th element instead. Is there a way for me to nest my styles within .small, .medium, and .large classes? ...

csszurb-foundationcss-selectorsdescendant

Creating a responsive navbar with a custom width form

Just started working with bootstrap and playing around with some new UI concepts. I'm having an issue with a non-responsive form width within my navbar, even though the navbar itself is responsive. I've tried using different collapse classes, but ...

htmlcsstwitter-bootstrapresponsive-designnavbar

Adjust the width of the initial column in the table and ensure it remains noticeable

I am a beginner with bootstrap and I find it extremely useful. I have encountered a problem with a table I am working on. I am trying to set the width of the first column and keep it always visible, but I am having trouble achieving this. I have successful ...

htmlcssbootstrap-4

Prevent touching the pseudo content of an element

My issue involves a toggle button component where I have utilized the ::before pseudo class to add text. The problem arises when clicking on the text within the toggle button causes the button's state to change. How can this be prevented? Here is the ...

htmlcssangularionic2

Is there a way for me to recreate the appearance of the outline and labeling found in Material-UI's outlined textfield?

Can anyone help me figure out how to hide the border behind the title text in an outlined textfield from Material-UI that I am trying to imitate? In the image below, you can see "Due Date/Time" taken from Material-UI library where the title hides the bord ...

cssreactjsmaterial-ui