Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Labels with icons are getting cut off when wrapping

Created by: ajanda

Labels with icons are getting cut off when wrapping to the next line. It only seems to cut off the last label in the previous line. By cutting off, it appears that 5px are being removed on the right side of the label as well as removing the corner radius style on the right hand side as well.

The issue seems resolved in Firefox but Webkit browsers such as Chrome and Safari still have the issue.

Thanks for your help!

I'm attaching example HTML to illustrate the problem.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>None</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Le styles -->
<link href="../css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.tagTestContainer {
    width:250px;
    border:solid 1px #AAA;
    padding:5px;
    margin:5px;
}
</style>
</head>
<body>
<div class="tagTestContainer">
  <span class="label">Default</span>
  <span class="label">Default</span>
  <span class="label">Default</span>
  <span class="label">Default</span>
  <span class="label">Default</span>
  <span class="label">Default</span>
  <span class="label">Default</span>
  <span class="label">Default</span>
  <span class="label">Default</span>
  <span class="label">Default</span>

</div>
<div class="tagTestContainer">
  <span class="label">Default <i class="icon-remove-circle icon-white"></i></span>
  <span class="label">Default <i class="icon-remove-circle icon-white"></i></span>
  <span class="label">Default <i class="icon-remove-circle icon-white"></i></span>
  <span class="label">Default <i class="icon-remove-circle icon-white"></i></span>
  <span class="label">Default <i class="icon-remove-circle icon-white"></i></span>
  <span class="label">Default <i class="icon-remove-circle icon-white"></i></span>
  <span class="label">Default <i class="icon-remove-circle icon-white"></i></span>
  <span class="label">Default <i class="icon-remove-circle icon-white"></i></span>
  <span class="label">Default <i class="icon-remove-circle icon-white"></i></span>
  <span class="label">Default <i class="icon-remove-circle icon-white"></i></span>
</div>
</body>
</html>