How can I add a border to the circle icon from Font Awesome? Actually my result is:
http://jsfiddle.net/0jhdvj0k/
The border is something like an ellipsis, instead a circular border.
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th></th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 55px;" class="text-center" style="padding-top: 5px; width: 25px;"><span class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"><i class='fa fa-check' style="font-size: 18px;"></i></span><span style='position: relative; top: -15px; right: 0px; left: 15px;'><span class='fa-stack fa-lg'><i class='fa fa-circle fa-stack-2x text-info' style='border-radius: 100%; border: 2px solid #5cb85c;'></i><span class='fa fa-stack-1x fa-inverse' style='top: 3px;'>6</span></span></span></td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
Added line-height: 30px; on text-info to fix the circle, and changed fa-inverse top: 0px to vertical center number 6
<i class="fa fa-circle fa-stack-2x text-info" style="border-radius: 100%; border: 3px solid #5cb85c; line-height: 30px;"></i>
<span class="fa fa-stack-1x fa-inverse" style="top: 0px;">6</span>
http://jsfiddle.net/1qzqu83m/
You don't need to use FontAwesome for a bordered circle. It's actually easier to use pure CSS because you don't have to reset FontAwesome styling:
.circle-border {
display: inline-block;
color: black;
font: 18px sans-serif;
background: yellow;
border:2px solid green;
width: 30px;
height: 30px;
border-radius:17px; /* half of width + borders */
line-height: 34px; /* vertical center */
text-align: center; /* horizontal center */
}
<div class="circle-border">6</div>
I used this code for Facebook icon, you can use it and customize it for yourself.
HTML:
<a class="align-items-center justify-content-center d-flex roundbutton text-decoration-none socialSignInBtns" href="#">
<i class="fab fa-facebook-f fa-fw" aria-hidden="true" style="color: #4267b2"></i>
</a>
CSS:
.socialSignInBtns {
display: block;
height: 5vw;
width: 5vw;
border-radius: 50%;
box-shadow: 0px 1px 10px 0px rgb(181, 165, 196);
border: 5px solid rgb(196, 189, 189);
}
.socialSignInBtns:hover {
opacity: 0.7;
}
Try this:
.fa-circle {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Related
I've been trying to figure out for awhile but I've not come to a solution. My issue is how to properly display a popup over a table which has a fixed height that has vertical overflow. I have a button that when hovered over displays a div that contains action links. Before the table scrolls (so at the top of the table) the div appears right below the button, where I want it to. But when you start scrolling the div starts to wander down the page.
This is a sample of the code that I am using
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Verdana;
background-color: #f6f6f6;
display: flex;
flex-direction: column;
min-height: 100vh;
}
table {
border-collapse: collapse;
width: 100%;
}
table tr:nth-of-type(even) {
background-color: #d4d4d4;
}
table tr:nth-of-type(odd) {
background-color: #E8E6E6;
}
table tr:hover {
background-color: #D0D9DD;
}
th,
td {
padding: 8px 16px;
border: 1px solid #ccc;
}
th {
color: rgb(255, 255, 255);
background: #65A0E5;
position: sticky;
top: 0;
z-index: 2;
padding: 15px;
}
.TableContainer {
display: flex;
justify-content: center;
}
.Table_Center {
width: 500px;
height: 300px;
overflow-y: auto;
}
.ActionDropdown {
display: inline-block;
}
.ActionButton {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.ActionButton-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.ActionButton-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.ActionButton-content a:hover {
background-color: #f1f1f1
}
.ActionDropdown:hover .ActionButton-content {
display: block;
}
.ActionDropdown:hover .ActionButton {
background-color: #3e8e41;
}
<div class="TableContainer">
<div class="Table_Center">
<table>
<thead>
<tr>
<th>
File Name
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I'd like to understand what exactly dictates the placements of these divs and how the overflow of the table factors into that. When I remove the overflow the popups appear right below the buttons as I want them to. If I set the position of the ActionDropdown class to relative then the divs appear below the buttons as I want, but now it messes up the overflow. The popups don't appear above the scroll in the sense that if you hover over the button at the bottom of the table it will expand the area at the bottom of the Table_Center container so that now you have to scroll down to see the popup.
What I'm aiming for is for the popups to be displayed below the buttons but independent of the scrolling. I'm new to front-end development so my explanations may be poor and I apologize in advance.
As seen in the attached, some results paragraphs do not "conform" to what seems to be the "standard" specification for width (visible from results paragraph at top of image.
How can we control (limit) the overall width of the table to prevent the oversize table that was generated for "productdata.js" ?
Also, the left-side box with icon and "fit" factor is specified in the header with width = 100px, but the oversize table/paragraph seems to have overriden this and reduced the width to the width of the icon plus margin. Is there any way to prevent that from happening ?
The current contents of the paragraph CSS is:
<table style="background-color: #AFAFAF; width: 850px;"
<!-- <table class="parspec" style="background-color: #AFAFAF;" -->
border-style="none" border-color:="" border="0">
<tbody>
<tr>
<td style="width: 100px; text-align: center;
background-color: #0F0F0F;"
rowspan="4" >
<a class="thumbnail" href="#">
<img src="%I" width="64px" height="auto"> <!-- set width of thumbnail -->
<span>
<img src="%U">
</span>
</a>
<p style="font-family: sans-serif; color: #4F9F4F;"><b>%R</b></p>
</td>
<td style="vertical-align: top;"><br>
<th
style="font-family: sans-serif; color: #DFDFDF;
background-color: #000000; text-align: left;"
colspan="3" >
%T</th>
</td>
</tr>
<tr>
<td style="vertical-align: top; "></td>
<td style="font-family: sans-serif; text-align: center;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%M</font></b></td>
<td style="font-family: sans-serif; text-align: center;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%D</font></b></td>
<td style="font-family: sans-serif; text-align: right;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%S</font></b></td>
</tr>
<tr style="font-family: sans-serif;" 8="">
<td style="vertical-align: top; "></td>
<td class="snippet" colspan="3">
%A</td>
</tr>
<tr style="font-family: sans-serif; color: #9F;">
<td style="vertical-align: top; "></td>
<td style="background-color: #000000; color: #BFBFEF;"
colspan="3">
<b><font size=2>%U</font></b><br>
<span style="color: #BFBFFF">%L </span></td>
</tr>
</tbody>
</table>
<br>
<br>
The current contents of the header CSS is:
<style type="text/css">
body {
width: 1000px;
color: #CFCFCF;
background-color: #1F1F1F;
}
a:link {
color: yellow;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: green;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: orange;
background-color: transparent;
font-weight: bold;
text-decoration: underline;
}
a:active {
color: red;
background-color: transparent;
text-decoration: underline;
}
.snippet{
background-color: #000000;
color: #AFAFDF;
}
.thumbnail {
display:block;
position:relative;
padding: 4px;
width: auto; /* set width of thumbnail image in 'paragraph' code - not here */
border:none;
z-index:0;
}
.thumbnail:hover {
border:none;
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
left: -9999px;
visibility: hidden;
}
.thumbnail span img {
max-width:256px; /* set 'large image' max width/height - advise keeping these */
max-height:256px; /* the same to avoid inadvertently changing the aspect ratio */
width:auto; /* leave set to auto */
height:auto; /* leave set to auto */
background-color: gray;
padding: 1px;
border: 1px solid black;
}
.thumbnail:hover span {
visibility: visible;
top: 4px; /* top/left positions 'large image' relative to top left */
left: 88px; /* of parent thumbnail (plus padding) */
}
</style>
After discussions with the developer for recoll, it has been determined that the problem was not with the customizations that I was attempting to apply.
The root of the problem was in fact a bug in the recoll code.
This would be really easy using negative margins, but I can't use them inside a <table>. Been at this for hours last night and this morning. Already googled different types of navs and there's nothing like this.
How do I make the CSS arrow stick to the top and bottom of the vertical line? https://codepen.io/TylerL-uxai/pen/ZqYNjw
td {
padding-top: 10px;
padding-bottom: 10px;
}
.active {
font-weight: bold;
}
table {
border-collapse: collapse;
}
.right{
text-align: right;
border-right: 1px solid black;
}
.v {
text-align: right;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.dot {
height: 10px;
width: 10px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div class="menu">
<table>
<tr>
<td class="v">
<i class="arrow up"></i>
</td>
<td>
Abstract
</td>
</tr>
<tr>
<td class="right">
Why
</td>
</tr>
<tr>
<td class="right">
<div class="active">Home</div>
</td>
<td><span class="dot"></span> <small> You are here.</small></td>
</tr>
<tr>
<td class="right">
Examples
</td>
</tr>
<tr>
<td class="right">
Process
</td>
</tr>
<tr>
<td class="right">
Tools
</td>
</tr>
<tr>
<td class="v"><i class="down"></i></td>
<td style="padding-left: 10px;">
Concrete
</td>
</tr>
</table>
</div>
Position relative and then use top & right negatives
.v {
position: relative;
right:-6px;
top: -15px;
text-align: right;
}
I am trying to position a font-awesome icon to the left of a table element, such that it is vertically centred against the table.
This is what I have at the moment:
HTML
<div class="dates">
<i class="fa fa-calendar fa-4x" aria-hidden="true"></i>
<table>
<tbody>
<tr>
<td>24th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>25th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>26th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>27th Jul 2018</td>
<td>1PM / 7PM</td>
</tr>
</tbody>
</table>
</div>
CSS
.dates {
border: 3px solid black;
display: inline-block;
padding: 8px 0;
border-radius: 10px;
background-color: white;
border-color: grey;
.fa {
vertical-align: middle;
}
table {
display: inline-block;
td {
font-weight: bold;
margin: 0;
padding: 0 10px;
}
}
}
And it's giving me this result:
Add display: inline-block and vertical-align: middle to both the icon and table, like so:
(For the purposes of the demo I unnested your Sass into normal CSS.)
.dates {
border: 3px solid black;
display: inline-block;
padding: 8px 0;
border-radius: 10px;
background-color: white;
border-color: grey;
}
.fa {
display: inline-block;
vertical-align: middle;
}
table {
display: inline-block;
vertical-align: middle;
}
td {
font-weight: bold;
margin: 0;
padding: 0 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="dates">
<i class="fa fa-calendar fa-4x" aria-hidden="true"></i>
<table>
<tbody>
<tr>
<td>24th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>25th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>26th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>27th Jul 2018</td>
<td>1PM / 7PM</td>
</tr>
</tbody>
</table>
</div>
I have a product template that looks like this:
The html for it is:
<div id="product">
<div id="cont">
<div class="productPictures">
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
</div>
<div class="productNumber"> #123 </div>
<div class="productDesc">
<table>
<col id="col1" />
<col id="col2" />
<tbody>
<tr>
<td> Body Type: </td>
<td> Stratocaster </td>
</tr>
<tr>
<td> Body Wood Type: </td>
<td> Walnut </td>
</tr>
<tr>
<td> Weight: </td>
<td> 12.7 lbs </td>
</tr>
<tr>
<td> Thickness: </td>
<td> 1 inch </td>
</tr>
<tr>
<td> Routing: </td>
<td> Standard </td>
</tr>
</tbody>
</table>
<div class="productPrice">
$456.00
</div>
</div>
</div>
</div>
</div>
</div>
and the css:
#product {
background-position: left top;
border: 2px solid #2D0000;
background-color: #42533E;
width: 650px;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px 4px 4px 4px
}
.productNumber {
padding: 4px;
font-size: 35px;
color: #C9E0D0;
float: right;
text-shadow: 2px 2px 3px #252525;
}
.productPictures
{
float: left;
padding: 0px;
margin: 5px 0px 10px 0px;
width: 200px;
}
.productDesc{
padding: 5px 10px 5px 5px;
color: #FFFFFF;
font-size: large;
float: left;
width: 400px;
height: 100%;
}
.productPrice {
font-size: 25px;
color: #F4D582;
text-align: right;
font-weight: bold;
text-shadow: 2px 2px 3px #252525;
}
.productImage {
border: 2px solid #20281E;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
#col1{
width: 40%;
}
#col2{
width: 60%;
}
table{
width: 100%;
}
So what I would want is for the product description div to end up at the bottom so that the price would also end up at the bottom. I tried to set height to 100% but this did not have any effect.
Thanks
And here is a working example.
relevant code:
#product {
...
position:relative;
}
.productDesc{
...
position:absolute;
bottom:0px;
right:0px;
}
First of all you need to set float:left on the div with the id of cont.
You have elements inside that container floating left, but that container is not, therefore its height is not expanding to its content.
Then you can set the productDesc div to be position:absolute and bottom:0px.
Of course, this will mess with its relative positioning to the photos, which it currently has, but if you want it fixed to the bottom of the parent container, that's the only way. You can then set the right:100px or however much it needs to be horizontally positioned how you would like.
Edit:
Here's a working example: http://jsfiddle.net/citizenconn/hXSmK/
Clear floats for your .productDesc and .productPictures
Use display:inline-block for those 2 DIVs.
And reduce the width of your .productDesc. Say, make it 350px
This will work.