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.

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

Sort icon placed ::after table header text #3687

Closed
briandhill opened this issue Jul 12, 2019 · 7 comments · Fixed by #3968 · May be fixed by thislooksfun/earthdawn#37

Comments

@briandhill
Copy link

commented Jul 12, 2019

Is your feature request related to a problem? Please describe...

It would be nice to have the ability to have the sort icon set ::after the table header text instead of ::before. I'm currently to need to make the sort icon not float, but because the icon is rendered with ::before and float: right, there's no way of actually getting it to not float.

Describe the solution you'd like

Provide an optional way either to have the sort icon ::before or ::after, or just have it set to ::after since it's being floated anyways.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Jul 12, 2019

With ::after the icon won't float correctly (it was using absolute positioning before, but that required position relative on the header cells which interfered when having dropdowns and tooltips in header cells).

@briandhill

This comment has been minimized.

Copy link
Author

commented Jul 12, 2019

Yeah, what I ended up doing is setting it up in our local SCSS to set the ::before to content: none, and then I set up the ::after with the ::before settings but without the float. We needed to prevent the table header text from breaking with white-space: nowrap, but because we're using that, the sort icon was overlapping with the text.

@briandhill

This comment has been minimized.

Copy link
Author

commented Jul 12, 2019

Not sure if a framework change is needed after all. I figured I'd mentioned it in case it made sense to do it.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Jul 12, 2019

We may have to devices a few alternatives (choices) for sort icon positioning (or disabling, so uses could use SVGs or other icons).

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Jul 12, 2019

Another option we could implement would be a new SCSS variable to disable sort icons (we do have variables for setting the content of the 3 sort icons)

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Aug 29, 2019

PR #3968 switches sort icons to use SVGs as background images, which are configurable via SCSS/SASS variables

tmorehouse added a commit that referenced this issue Aug 29, 2019
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 7, 2019

BootstrapVue v2.0.0 stable has been released. See https://bootstrap-vue.js.org/docs/misc/changelog

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.