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
YnJpYW4 opened this issue Jul 12, 2019 · 7 comments
Closed

Sort icon placed ::after table header text #3687

YnJpYW4 opened this issue Jul 12, 2019 · 7 comments

Comments

@YnJpYW4
Copy link

@YnJpYW4 YnJpYW4 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
Copy link
Member

@tmorehouse tmorehouse 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).

Loading

@YnJpYW4
Copy link
Author

@YnJpYW4 YnJpYW4 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.

Loading

@YnJpYW4
Copy link
Author

@YnJpYW4 YnJpYW4 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.

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse 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).

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse 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)

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Aug 29, 2019

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

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Sep 7, 2019

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

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment