search

Semantic-Org / Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
http://www.semantic-ui.com
MIT License
51.1k stars 4.95k forks source link

[Label] Right Ribbons result in offsets in following texts #4536

Open bluec0re opened 8 years ago

bluec0re commented 8 years ago

https://jsfiddle.net/eqgohevf/1/

Is this intended? I would expect that the text is placed at the beginning of the line/cell/column when a ribbon is added to the right.

screenshot from 2016-09-08 11-22-53

ludesign commented 8 years ago

Probably intended (judging by the documentation where the examples with right ribbons lack title).

The problem (you are facing) lies in the relative position of the ribbon element. The gap you see is normal and will be with the width of the content of the ribbon.

You can easily workaround the table one, by adding <th class="one wide"></th> and wrapping the ribbon into a <td>ribbon here</td>.

Atulin commented 6 years ago

Any word on this issue? As it stands, the right ribbons look just plain ugly.

tcmal commented 6 years ago

Adding float: left to the affected elements seems to work, however I agree this shouldn't be the default behaviour

ForumT commented 6 years ago

I am also stuck in this.. Adding float hides my ribbon completely... Had to use an extremely hacky solution: added a class to label with following properties:

  .selected-count-label {
     position: absolute !important;
     transform: translateX(-108%) !important;
   }

Some proper solution will be great!

Marcholio commented 5 years ago

Verified that this is still an issue with v2.4.1