No More Posting New Topics!

Hi, I have the exact same problem now… did you find a solution?

EDIT: try to add “fit” just where you defined the “ellipsis” class. It worked for me!

@acros

You can see what becomes of q-layout in chrome inspector.

Screen Shot 2020-11-09 at 16.19.17.png

If you use q-layout (you are using Quasar) you will have to put elements inside it which are compatible with q-layout. It only make sense that way.

As you found out a single un-styled div isn’t compatible. While it isn’t impossible to make it compatible … you will likely going to rebuild q-headerin the process. And this extra work you are doing for what ?

So the options are

a, Style your custom component so it is compatible with q-layout.
b, Create your own layout and not use q-layout. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible with q-drawer.
c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel.

@dpamio I don’t see any Sass file in the project but styl files for styling. The could you posted could possibly be fore quasar 0.17.

I got this to work by inspecting the element and playing with the css:
First, add a background-color and opacity as 1 to q-focus-helper. Then remove the opacity and background-color from the q-focus-helper ‘before’ and ‘after’ css.
Now you will have an opaque background colour when hovered but it will cover the text.
So add z-index 1 to q-item__label.

This is a pretty crapy solution!

Thank you Scott