jquery - CSS: hide overflow content into bootstrap btn-group -
for example have table:
/* styles go here */ table.my { width: 600px; } table.my > tr { height: 40px; overflow: hidden; } .tag { background: #b8b8b8; padding: 4px; color: blue; } .tag-area{ display: inline; } .name { width: 400px; height: 100%; display: inline-block; }<table class="table table-striped table-hover my"> <tbody> <tr> <td>1</td> <td> <span class="name">ammy holdings</span> <div class="tag-area"> <span class="tag">ios</span> <span class="tag">pm</span> <span class="tag">android</span> </div> </td> </tr> <tr> <td>2</td> <td> <span class="name">ken martins</span> <div class="tag-area"> <span class="tag">pm</span> <span class="tag">cto</span> </div> </td> </tr> <tr> <td>3</td> <td> <span class="name">ammy holdings</span> <div class="tag-area"> <span class="tag">ios</span> <span class="tag">pm</span> <span class="tag">android</span> <span class="tag">ceo</span> <span class="tag">sale</span> </div> </td> </tr> </tbody> </table>and so:
as can see: overflow tags situated wrong... can't put them table such dimensions, , need put overflowed content group, this:
and have not ideas, how that. maybe community can give me ideas? how put overflow content button group (bootstrap)?
you check style , plunker here:
http://plnkr.co/edit/5qsdb6bgvsks0iwnczdi?p=preview
btw: i'm using angularjs in real app...
in code include bootstrap solve problem , result same plunk provided..
/* styles go here */ table.my { width: 600px; } table.my > tr { height: 40px; overflow: hidden; } .tag { background: #b8b8b8; padding: 4px; color: blue; } .tag-area{ display: inline; } .name { width: 400px; height: 100%; display: inline-block; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" /> <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <table class="table table-striped table-hover my"> <tbody> <tr> <td>1</td> <td> <span class="name">ammy holdings</span> <div class="tag-area"> <span class="tag">ios</span> <span class="tag">pm</span> <span class="tag">android</span> </div> </td> </tr> <tr> <td>2</td> <td> <span class="name">ken martins</span> <div class="tag-area"> <span class="tag">pm</span> <span class="tag">cto</span> </div> </td> </tr> <tr> <td>3</td> <td> <span class="name">ammy holdings</span> <div class="tag-area"> <span class="tag">ios</span> <span class="tag">pm</span> <span class="tag">android</span> <span class="tag">ceo</span> <span class="tag">sale</span> </div> </td> </tr> </tbody> </table> <br> <h4>must be</h4> <table class="table table-striped table-hover my"> <tbody> <tr> <td>1</td> <td> <span class="name">ammy holdings</span> <div class="tag-area"> <span class="tag">ios</span> <span class="tag">pm</span> <span class="tag">android</span> </div> </td> </tr> <tr> <td>2</td> <td> <span class="name">ken martins</span> <div class="tag-area"> <span class="tag">pm</span> <span class="tag">cto</span> </div> </td> </tr> <tr> <td>3</td> <td> <span class="name">ammy holdings</span> <div class="tag-area"> <span class="tag">ios</span> <span class="tag">pm</span> <div class="btn-group"> <button type="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <em>...</em> </button> <ul class="dropdown-menu"> <li>android</li> <li>ceo</li> <li>sale</li> </ul> </div> </div> </td> </tr> </tbody> </table>
Comments
Post a Comment