Hi,
My self-hosted instance is having trouble with the paperclip icon on my attachment fields. The icon is missing:glyph-icon-paperclip style from the div. So I assume that I have borked my self-hosted instance’s CSS in some way. But I am not sure how
My instance is https://data.davidsmedberg.me , the only thing I do differently in my instance in CSS is that I add a --grist-theme-toast-memo-bg: #CC0000 !important; to the :root during build of the Docker image. (https://data.davidsmedberg.me/v/unknown/bundle.css )
Any idea of what I can try to fix this icon? Thank you!
1 Like
We’re sorry about this! It is a bug after a dependency upgrade. Reported here:
opened 04:24PM - 31 Jan 25 UTC
bug
### Describe the current behavior
The recent upgrade to Bootstrap 5 appears to … have broken the attachment icon in Grist. (See attached screenshot.)
CC @hexaltation
### Steps to reproduce
_No response_
### Describe the expected behavior
_No response_
### Where have you encountered this bug?
- [ ] On [docs.getgrist.com](https://docs.getgrist.com)
- [x] On a self-hosted instance
### Instance information (when self-hosting only)
_No response_
Being worked on here:
gristlabs:main ← hexaltation:drop-glyphicons-for-octicons
opened 07:09PM - 04 Feb 25 UTC
## Context
[Bump bootstrap from 3.4.1 to 5.3.3](https://github.com/gristlabs/… grist-core/commit/d036d288dce12a392e2f6ab1fb710645908966f7) lead to a bug.
In v 4.0.0 bootstrap dropped glyphicon usage.
Grist-core code have some occurences of glyphicon.
```bash
$ grep -rin glyphicon
client/lib/koForm.js:337: this.optionButton("left", dom('span.glyphicon.glyphicon-align-left'),
client/lib/koForm.js:339: this.optionButton("center", dom('span.glyphicon.glyphicon-align-center'),
client/lib/koForm.js:341: this.optionButton("right", dom('span.glyphicon.glyphicon-align-right'),
client/lib/koForm.js:482: dom('span.kf_drag_indicator.glyphicon.glyphicon-option-vertical') :
client/lib/koForm.js:487: return dom('span.drag_delete.glyphicon.glyphicon-remove',
client/components/DocConfigTab.js:19: dom('span.glyphicon.glyphicon-check'),
client/components/ValidationPanel.js:66: dom('div.validation_trash.glyphicon.glyphicon-remove',
client/components/ValidationPanel.js:71: 1, dom('div.glyphicon.glyphicon-tag.config_icon'),
client/components/ColumnFilters.css:69:.g-glyphicon-tristate {
client/components/RecordLayoutEditor.js:128: dom('div.g_record_delete_field.glyphicon.glyphicon-eye-close',
client/widgets/AttachmentsWidget.ts:193:const cssAttachmentIcon = styled('div.glyphicon.glyphicon-paperclip', `
```
## Proposed solution
Remove Glyphicon calls and replace it by corresponding icons in `static/icon/icons.css`
## Related issues
Fixes #1412
## Has this been tested?
- [ ] 👍 yes, I added tests to the test suite
- [ ] 💭 no, because this PR is a draft and still needs work
- [ ] 🙅 no, because this is not relevant here
- [ ] 🙋 no, because I need help
2 Likes
Confirming, the latest release fixed this issue. Thanks @paul-grist for your reply! And thanks @Gregoire_Cutzach et al for your work on the fix!
1 Like
