Mention on new line breaks

[handonam]

I was just trying out the demo, and I noticed that if you do a mention towards the end of the textarea box, it breaks up like so:

I'm trying to find ways to make the div match the text below it appropriately, but I keep getting misses. Any thoughts on how we can remedy this?

[ProLoser]

Hmmm... honestly didn't even think about it. Easiest answer? Don't break mentions. Just use   or no-wrap around the test?

[ProLoser]

I'm seeing mixed results depending on spacing (I shrunk the window a few pixels at a time):

[handonam]

I think i got kind of close.

It has something to do with the mix of box-sizing, border, and overflow. I put box-sizing: border-box on both the textbox and underlay, changed the span to use box-shadow instead of border (because it adds width to it), and overflow: hidden on the textbox.

Edit: this is what I got. The downside is that we lose padding:

diff --git a/example/styles.scss b/example/styles.scss
index 5d4431d..c28d671 100644
--- a/example/styles.scss
+++ b/example/styles.scss
@@ -51,13 +51,13 @@ a {
   z-index: 1;
   color: rgba(0,0,0,0);
   white-space: pre-wrap;
+  border: 1px solid rgba(0,0,0,0);
+  width: 100%;

   span {
-    padding: 0 2px;
     border-radius: 3px;
     background: lightblue;
-    border: 1px solid blue;
-    margin: -1px -3px;
+    box-shadow: 0px 0px 0px 1px blue;
   }
 }

[ProLoser]

If the span has border-box then the border shouldn't increase the size either

[ProLoser]

Nvm yeah your solution definitely fixes a few problems with the span's bounding box being bigger than the text it's supposed to be highlighting.

[ProLoser]

@handonam want to submit a small PR with the fix to the example?

[ProLoser]

I'm also curious if you find this project to be useful at all since it's sort of hobbled together pretty crappily

[handonam]

https://github.com/angular-ui/ui-mention/pull/19 for ya @ProLoser!

It took me a long while to figure out where to start. I can possibly come up with a better README.md for you to fill in the knowledge gaps in the future.

[ProLoser]

Should we close this and/or add instructions or an example to the readme or like add an FAQ?

[ProLoser]

Actually, forgot to update the readme.

[handonam]

Should we just reference the CSS file itself instead of duplicating it in the Readme.MD? We can also add CSS comments to explain what's going on (such as the confusion on the transparent border on my PR).

[ProLoser]

Yup that sounds like a good idea

On Mon, Mar 7, 2016, 12:04 PM Handonam [email protected] wrote:

Should we just reference the CSS file itself instead of duplicating it in the Readme.MD? We can also add CSS comments to explain what's going on (such as the confusion on the transparent border on my PR).

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-mention/issues/18#issuecomment-193426215 .

[JacobMarshallPP]

Not too sure if this has been fixed, but I ran into this issue recently. To see how I got around it - https://jacobmarshallpp.github.io/ui-mention/example - for me, it was related to the scrollbar showing on the textarea, but not the highlight element, behind.