Skip to content
This repository has been archived by the owner on Apr 7, 2020. It is now read-only.

Mention on new line breaks #18

Open
handonam opened this issue Mar 4, 2016 · 13 comments
Open

Mention on new line breaks #18

handonam opened this issue Mar 4, 2016 · 13 comments

Comments

@handonam
Copy link
Contributor

handonam commented Mar 4, 2016

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:

screen shot 2016-03-04 at 9 50 51 am

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

ProLoser commented Mar 4, 2016

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

@ProLoser
Copy link
Member

ProLoser commented Mar 4, 2016

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

screen shot 2016-03-04 at 10 32 59 am

screen shot 2016-03-04 at 10 33 37 am

screen shot 2016-03-04 at 10 33 44 am

@handonam
Copy link
Contributor Author

handonam commented Mar 4, 2016

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

ProLoser commented Mar 4, 2016

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

@ProLoser
Copy link
Member

ProLoser commented Mar 4, 2016

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

ProLoser commented Mar 4, 2016

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

@ProLoser
Copy link
Member

ProLoser commented Mar 4, 2016

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

@handonam
Copy link
Contributor Author

handonam commented Mar 5, 2016

#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
Copy link
Member

ProLoser commented Mar 7, 2016

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

@ProLoser
Copy link
Member

ProLoser commented Mar 7, 2016

Actually, forgot to update the readme.

@handonam
Copy link
Contributor Author

handonam commented Mar 7, 2016

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

ProLoser commented Mar 7, 2016

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
#18 (comment)
.

@JacobMarshallPP
Copy link
Contributor

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants