Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Border around resizeable table headers not shoing in IE & FF #5417

Closed
ottosson opened this issue Mar 23, 2018 · 7 comments
Closed

Border around resizeable table headers not shoing in IE & FF #5417

ottosson opened this issue Mar 23, 2018 · 7 comments

Comments

@ottosson
Copy link

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request

Current behavior
When enabling pResizableColumn in table component the border around header columns disappear in Firefox and Internet Explorer 11. Works in Chrome.

Expected behavior
Should still show border even if pResizableColumn is used.

Minimal reproduction of the problem with instructions
https://www.primefaces.org/primeng/#/table/colresize

Please tell us about your environment:
Windows 10

  • Angular version: 5.X
    5.2.6

  • PrimeNG version: 5.X
    5.2.0

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    Internet explorer 11, Firefox.
@stedel
Copy link

stedel commented Apr 9, 2018

I can confirm the current behavior, that Borders are shown in Chrome, but not in Firefox or Internet Explorer.

Please tell us about your environment
Windows 7 Enterprise SP1

  • Angular version: 5.X
    5.2.9

  • PrimeNG version: 5.X
    5.2.4

  • Browser
    Chrome 66.0.3359.81 (Beta) [works as expected]
    Firefox ESR 52.7.3,
    Firefox Dev Edition 60.0b10
    Internet Explorer 11.0.57

@stedel
Copy link

stedel commented Apr 9, 2018

The Firefox dev tools are showing, that the background-clip property from .ui-resizable-column at https://github.com/primefaces/primeng/blob/master/src/app/components/table/table.css#L103 was presumably overriden by .ui-table .ui-table-tbody > tr > td https://github.com/primefaces/primeng/blob/master/src/assets/components/themes/_theme.scss#L622

I could fix the problem by applying a more specific selector:

.ui-table .ui-table-thead > tr > th.ui-resizable-column,
.ui-table .ui-table-tbody > tr > td.ui-resizable-column {
  background-clip: padding-box;
}

@harshdevj
Copy link

+1

@cagataycivici
Copy link
Member

This is fixed in recent releases.

@ottosson
Copy link
Author

ottosson commented Aug 28, 2018 •
edited

This is still an issue for me, using v6.1.2... Same problem as before, looks correct in Chrome bu not in IE and FF.

@ghost
Copy link

ghost commented Sep 19, 2018

This is still an issue for me, using v6.1.2

@mattlocker
Copy link

This is still an issue for me, using PrimeNg v8 (non-LTE version).
Also in the most current development version, There seems to be a rendering problem - but this time with the header only.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@cagataycivici @ottosson @stedel @harshdevj @mattlocker