6

This question already has an answer here:

When there are too many tags associated with a single user, they got cut. It's a UI Issue.

Example: most people have three tags visible, but Varun Verma's third tag is mostly obscured and unreadable

marked as duplicate by random, ProgramFOX, Martijn Pieters, ShaWiz, Robert Cartaino Jul 7 '14 at 13:57

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • The page was designed for smaller named tags like [php], [c#] and [jquery]. – hjpotter92 Jul 7 '14 at 11:07
  • 2
    ok. But now are we handling such issues? I think we can handle it with simple css changes. – Varun Verma Jul 7 '14 at 11:17
  • 1
    bad news. – ShaWiz Jul 7 '14 at 14:13
3

@Varun's suggestion is wonderful, but what if there is more tags? Then I suggest the following style for .user-tags, Which will create a wonderful scrollable box with tags...

1. ...with small dotted border:

Quick demo1

javascript:for(var i=0;i<document.getElementsByClassName("user-tags").length;i++){var el=document.getElementsByClassName("user-tags")[i].style;el.height="26px";el.overflow="auto";el.border="dotted 2px";el.borderRadius="4px";}

CSS

.user-tags{
   height:26px;
   overflow:auto;
   border:dotted 2px;
   border-radius:4px;
}

2. ...with more elegant dotted border:

Quick demo

javascript:for(var i=0;i<document.getElementsByClassName("user-tags").length;i++){var el=document.getElementsByClassName("user-tags")[i].style;el.height="26px";el.overflow="auto";el.border="dotted 1px";el.borderRadius="4px";}

CSS

.user-tags{
   height:26px;
   overflow:auto;
   border:dotted 1px;
   border-radius:3px;
}

3. ...without a border:

Quick demo

javascript:for(var i=0;i<document.getElementsByClassName("user-tags").length;i++){var el=document.getElementsByClassName("user-tags")[i].style;el.height="26px";el.overflow="auto";}

CSS

.user-tags{
   height:26px;
   overflow:auto;
}


1 - paste in address bar and hit enter ;-)

Note that running javascript from address bar should be enabled in your browser.

  • Appreciated :) . – Varun Verma Jul 7 '14 at 12:40
  • @VarunVerma Love it? ;-) – nicael Jul 7 '14 at 12:42
  • It's very cool (may be without border) ! :) – Varun Verma Jul 7 '14 at 12:43
  • @VarunVerma Check an edit ;-) – nicael Jul 7 '14 at 12:52
2

Just an suggestion. I changed the height to auto of that highlighted div and the problem got solved. May be we can implement it in production. Attached is the snapshot.enter image description here Please consider.

Not the answer you're looking for? Browse other questions tagged .