i am using the font awesome icon ellipsis-v (which is very tiny; see here) in a clickable row, so it's frustrating to click, because most of the time you end up clicking on the row.
i tried putting the link on the td, but it's not working (because the whole row is clickable?).
are there any css tricks to increase the clickable area around the fa-icon?
(below the code i tried)
<tr class='clickable-row' data-href='details.html'>
<td></td>
<td class="client-status"><span class="label label-warning"></span></td>
<td>
<a class="doDropdown">
<div class="ibox-tools">
<a class="dropdown-toggle doDropdown" data-toggle="dropdown">
<i class="fa fa-ellipsis-v"></i>
</a>
<ul class="dropdown-menu">
<li>
View
</li>
<li>
Edit
</li>
</ul>
</div>
</a>
</td>
</tr>
Try adding the property line-height or font-size on <i> tag:
Example:
i {
line-height: 20px;
font-size: 20px;
}
You can simply add fa-nx inside the icon class, where n is the number and it simply increases the icon's size by n times its original.
Below n is 2. You can use 3, 4.. depending on your design.
<i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
Related
I am trying to use the NGX dropdown menu in scrollable table however on the last row the dropdown get's cutoff by the overflow being hidden by default.
to overcome this, I set the table-responsive class to have these properties:
.table-responsive {
overflow-x: visible !important;
overflow-y: visible !important;
}
which results it having the desired look however disables my table being scrollable:
if I remove,
overflow-x: visible !important;
I get closer to my desired result however I want the dropdown to overflow out of the container, also the contents of the dropdown are initially hidden.
Is there are a way of having a scrollable table where the dropdown appears like the 2nd image.
<div class="table-responsive">
<table class="table table-bordered table-hover">
<div class="btn-group" dropdown>
<button class="btn btn-link" dropdownToggle>
<em class="fas fa-ellipsis-v fa-lg"></em>
</button>
<div *dropdownMenu class="dropdown-menu animated fadeInRight" role="menu">
<a [routerLink]="['/folder/editor', row[column.name]]" class="dropdown-item">
<em class="fas fa-fw fa-pencil-alt mr"></em>
<span>View/Edit</span>
</a>
<div class="dropdown-divider"></div>
<a [routerLink]="" (click)="openTransferLogModal(row[column.name])" class="dropdown-item">
<em class="fas fa-fw fa-list-ul mr"></em>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover">
Is this the very last row in the table? Have you tried targeting just the ::nth-last-child selector or if its a NgFor Angular has a last-child you could utilize as well to set a class on the dropdown itself.
Either way the answer would be to adjust the absolute position of the dropdown menu on the last row. Not to mess with the table styles.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child
http://plnkr.co/edit/evR8YKXgvpYWqHgt8zZE?p=preview
https://github.com/angular/angular/issues/10856
This is a continuation of the discussion from the solution proposed from #Jacebot
So prior to me working on the project it was revealed to me that "append to body" part of the dropdown was taken out of the code.
Putting this back, made the z-index of the dropdown go behind the body of my table.
So instead of appending to body, I appended to the table.
<div class="btn-group" dropdown container="table">
<button class="btn btn-link" dropdownToggle>
<em class="fas fa-ellipsis-v fa-lg"></em>
</button>
....
I have a dropdown menu & button within a table cell. This dropdown must contain both anchors and buttons. I have no control over replacing the button elements with anchors, however, I would like the buttons to look just like standard Bootstrap menu items, so I'm styling them just like the anchors, but something strange is occurring to the width of the items. The dropdown, when located within a table, will grow to the size of a the biggest Anchor, but not the biggest button. However, when outside of the table, the dropdown menu grows to the size of the button perfectly.
I've put together a fiddle to show the problem:
http://jsfiddle.net/5p341amh/205/
<table>
<tbody>
<tr>
<td>
<div class="dropdown">
<button class="btn btn-default"
data-toggle="dropdown">
<span id="dropdown_title2">Select Something</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li><a tabindex="-1" href="#">Fooooooooooo</a></li>
<li><button tabindex="-1" href="#">Baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaar</button></li>
<li><button tabindex="-1" href="#">Baz</button></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
Any insight would be great on how to fix this! Thanks!
I don't know if i understand your answer good, but you don't need to add a button element and put the anchor tag in it. You can add the anchor tag only and style it as a button.<a href="#" id="button" class="btn btn-primary " >Baaaaaaaaaaa</a>
try
display: table;
max-width: 300px /* or set your specified max-width */;
I'm experiencing the following issue - when I add a glyphicon with a pull-right class to a li option it looks ok as long as the text within li isn't too long. If it is, the glyphicon gets pushed slightly below the text (to a next line I guess).
How can I make it stay in the same line?
<div class="btn-group btn-group-justified">
<div class="btn-group open">
<button type="button" data-toggle="dropdown" class="btn btn-default btn-danger dropdown-toggle">Input <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a id="1" class="cursor-hand">Very long text here<span class="glyphicon glyphicon-ok text-danger pull-right"></span></a>
</li>
<li><a id="2" class="cursor-hand">Empty option</a>
</li>
<li><a id="41" class="cursor-hand">Short<span class="glyphicon glyphicon-ok text-danger pull-right"></span></a>
</li>
</ul>
</div>
One more thing that is very annoying is this happens all the time in FF 30.0 (running Win XP here) while Chrome and IE (tested in 8.0) at least try to keep the text and the icon in line.
Here's a fiddle that shows the problem http://jsfiddle.net/ukgAY/
You need to remove the pull-right and position the tickbox manually : I replaced the pull-right with pright class
ul li a {position: relative }
.pright {position: absolute; right: 0;}
See http://jsfiddle.net/3JgND/
I have an issue with aligning thumbnails in a Twitter Bootstrap well:
I'm using fluid layout
My thumbnails are 183 by 154 px
I would like to use fixed image sizes, but variable margins and that the thumbnails perfectly align within the area they are in.
This is the result for what I have so far:
http://i.stack.imgur.com/1qUA6.png
As you may notice; the images are aligned to much to the left.
The thumbnails are wrapped as such:
<div class="row-fluid">
<div class="span6">
My html:
<ul id="nwthumbs">
<li><h2><span>Fernando Alonso has credited Ferrari's decision to stop for a new set of we...</span></h2>
<button class="btn btn-mini" type="button" >Read More</button></li>
<li><a href="#" ><img src="Sir-Alex-Ferguson_2794602.jpg">
<h2><span data-bind="html: titleShortened">Sir Alex Ferguson says there is 'no chance' of Manchester United repeating ...</span></h2></a><button class="btn btn-mini" type="button" >Read More</button></li><li><a href="#" ><img src="Paul-Bohan-2012_2799199.jpg">
<h2><span>Local Hero claimed a first victory of the year with a determined effort in ...</span>
</h2> </a><button class="btn btn-mini" type="button" >
Read More</button>
</li>
<li><a href="#" ><img src="Douglas_2675905.jpg">
<h2><span>FC Twente chairman Joop Munsterman admits he is unsure whether Newcastle Un...</span></h2> </a><button class="btn btn-mini" type="button" >
Read More</button>
</li>
<li><a href="#" >
<img src="Darryl-Westlake-Walsall_2465450.jpg">
<h2>
<span>Sheffield United have confirmed the signing of promising defender Darryl We...</span>
</h2>
</a>
<button class="btn btn-mini" type="button" >
Read More</button>
</li>
</ul>
I'm using Twitter Bootstrap.
What I have tried so far is making the pictures variable size; width 100% and height 100%, that works, but when resizing to a smaller ViewPort, it will resize the images instead of wrapping the images so that they appear in two columns.
Try with this CSS :
#nwthumbs {
text-align:center;
}
#nwthumbs > li {
display: inline-block;
*display:inline; /* ie7 fix */
float: none; /* this is the part that makes it work */
}
I'm using twitter bootstrap.
I'm trying to create a button with dropdown that should be displayed right after a text.
The button and everything are created but it appears on the next line instead of being on the same line as my texte.
This is more or less the code:
<h1> Some title
<div class="btn-group" xmlns="http://www.w3.org/1999/html">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> ...my menu's...</li>
</ul>
</div>
</h1>
The h1 tag has no special positioning assigned. I've tried to add a float: left to the h1 tag but it doesn't work because there is a clear:both in the btn-group's css.
What's wrong? Thx!
UPDATE:
I also tried to add a .pull-right class to the div. This brings it to the right line but it is on the right of the page. Not just after the text. This is too far away.
I don't really know how you got that markup, but here is a working version : (demo on jsfiddle)
<h1> Some title
<small>
<span class="btn-group">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>...my menus...</li>
</ul>
</span>
</small>
</h1>
h1 .btn-group { display: inline-block; }
I only suggest you to use the <small> tag, because it sets some different styles from <h1>. But it is not required for this to work.