I'm trying to achieve the below result by ONLY using the "labels" class (eg. I don't want the "arrow" class/html). Is this possible with pseudo elements only? Like ".labels:tesing{}" etc.
.labels{
position: relative;
display: inline-block;
vertical-align: top;
font-size: 16px;
font-weight: bold;
font-family: tahoma;
padding: 5px;
color: #fff;
border-radius: 5px;
background-color: red;
}
.labels:before{
display: inline-block;
vertical-align: top;
font-size: 12px;
content: '$';
}
.labels:after{
display: inline-block;
vertical-align: top;
margin-left: 1px;
font-size: 12px;
content: 'USD';
}
.arrow{
position: absolute;
bottom: -10px;
left: 20px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid blue;
}
HTML:
<div class="labels">199
<div class="arrow"></div>
</div>
JS Fiddle:
http://jsfiddle.net/edcxsw1/w9z7vvxw/
This is not possible with CSS only, but pretty simple with jQuery. Just that way:
$('.labels').append('<div class="arrow"></div>');
FIDDLE: https://jsfiddle.net/lmgonzalves/w9z7vvxw/3/
Related
I have a HTML and CSS code, and it works fine on Chrome. However, on Firefox, the behavior is different.
button#groupToggle {
background: 0 0;
border: 1px solid #e6e6ed;
color: #222;
float: none;
margin: 0 0 0 6px;
min-width: 200px;
padding: 8px 10px;
position: relative;
text-align: left;
cursor: pointer;
}
button#groupToggle::after {
background: #FFF;
border: 1px solid #e6e6ed;
color: #f8971d;
content: '>';
display: inline-block;
font: 900 12px/2.1 'Font Awesome 5 Free';
height: calc(100% + 1px);
left: 100%;
position: absolute;
text-align: center;
top: -1px;
width: 2em;
cursor: pointer;
border: ;
}
<button id="groupToggle">
<span>All selected</span>
</button>
After the All Selected, there is a button that is created through pseudo CSS (after). It can be clicked when hovering on Chrome but not on Firefox. Any thoughts?
Firefox version: 64.0
Link: https://codepen.io/anon/pen/zymvPj (Please use Firefox to test it).
There actually is no way to make it behave the same way as it does in Chrome. :after and :before are not treated as DOM elements by Firefox. You can however, cheat it a little bit. Changing behave for all browsers. That is my proposition of solution to look the same and behave as you would like it to do.
button#groupToggle {
background: 0 0;
border: 1px solid #e6e6ed;
color: #222;
float: none;
margin: 0 0 0 6px;
min-width: 224px;
/* increased by 24px (after width) */
padding: 8px 10px;
position: relative;
text-align: left;
cursor: pointer;
z-index: 0;
}
button#groupToggle::after {
background: #FFF;
border: 1px solid #e6e6ed;
color: #f8971d;
content: '>';
display: inline-block;
font: 900 12px/2.1 'Font Awesome 5 Free';
height: calc(100% + 1px);
position: absolute;
text-align: center;
top: -1px;
width: 2em;
position: absolute;
cursor: pointer;
border: ;
right: -1px;
/* -1px to neutralize border */
}
/* ONLY TO SHOW IT WORKING */
button#groupToggle:focus {
outline: red solid 10px;
-moz-outline: red solid 10px
}
<button id="groupToggle">
<span>All selected</span>
</button>
Font-Awesome 5 - Pseudo-elements
Requirements for Free Solid Version
Have this in the <head> tag:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
In your stylesheet:
.icon::after {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.arrow::after {
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
The content property needs Unicode not >
Those two classes names are arbitrary but be sure that they are on the same tag:
<button class='icon arrow'></button>
Absolute Positioning
Font-Awesome (or lack thereof) wasn't the problem, but I had to address the elephant in the room. Anyhow, left:100% pushed the part out of the button's border and looks as if Firefox treats the pseudo-element like it doesn't belong to the button, while apparently Chrome remembers. The solution is simply: remove left:100% and add right:0
Demo
button#groupToggle {
background: 0 0;
border: 1px solid #e6e6ed;
color: #222;
float: none;
margin: 0 0 0 6px;
min-width: 200px;
padding: 8px 10px;
position: relative;
text-align: left;
cursor: pointer;
}
.icon::after {
background: #FFF;
border: 1px solid #e6e6ed;
color: #f8971d;
font-size: 12px;
line-height: 2.7;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
height: calc(100% + 1px);
right: 0;
position: absolute;
text-align: center;
top: -1px;
width: 2em;
cursor: pointer;
}
button#groupToggle::after {
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<button id="groupToggle" class='icon'>
<span>All selected</span>
</button>
I created a custom table to display some key-value-pairs. It works fine for simple examples with 2 Strings but there are also pairs with an array as value. The entries should get listed one below the other in the same table row. It should look something like this:
It seems that the array is not recornized as in the HTML Code
<span ng-show="Array.isArray(data[attr.id])">
Can you guys help me to display the data properly?
Here is my Code:
var app = angular.module('TestApp', []);
app.controller('TestCtrl', ['$scope' ,function($scope){
$scope.isArray = angular.isArray;
$scope.query = {};
$scope.query.attributes = [{'name': 'key_1', 'id': 'key_1'},
{'name': 'key_2', 'id': 'key_2'}];
$scope.data = {'key_1': 'value_1', 'key_2': ['value_2', 'value_3', 'value_4', 'value_6', 'value_7', 'value_8']};
}]);
.content-wrapper{
font-family: 'Roboto';
background: #EDEFF2;
height: calc(~"100vh - 198px");
width: calc(~"100vw - 300px");
float: left;
.content-navbar{
//background: green;
.content-navbar-content{
padding-top: 20px;
margin-left: 20px;
font-size: 25px;
}
}
.content-controlls{
padding-top: 20px;
padding-bottom: 20px;
margin-left: 20px;
//background: blue;
}
.content-contentview{
padding-top: 20px;
margin-left: 20px;
padding-right: 300px;
//background: yellow;
.table-bordered{
border: none;
//border-top: 1px solid #999999;
font-size: 13px;
.table-header-roboto{
color: #999999;
}
.table-body-roboto{
color: #4D4D4D;
#info{
font-size: 18px;
color: #4D4D4D;
padding-top: 2px;
padding-left: 10px;
}
#file{
font-size: 18px;
color: #606166;
padding-top: 2px;
}
.status{
width: 50px;
}
}
}
}
}
.header-status,
.header-info,
.header-task {
display: inline-block;
width: 50px;
padding-left: 5px;
padding-right: 5px;
font-size: 13px;
height: 24px;
display: flex;
align-items: center;
}
.header-task {
border: none;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.row-status,
.row-info {
display: inline-block;
width: 50px;
padding-left: 6px;
padding-right: 5px;
}
.header-status span {
margin-left: 0px;
}
.header-info span {
margin-left: 4px;
}
.row-task,
.header-task {
width: 1102px;
padding-left: 6px;
padding-right: 5px;
}
.custom-header-content {
border: none;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
padding-top: 5px;
padding-bottom: 5px;
color: #999999;
display: flex;
align-items: center;
}
.custom-header-content span {}
.custom-row-content {
border: none;
height: 48px;
border-bottom: 1px solid #CCCCCC;
color: #4D4D4D;
display: flex;
align-items: center;
}
.row-status span i {
padding-bottom: 0px;
margin-top: 3px;
margin-left: 8px;
}
.row-info span i {
padding-bottom: 0px;
margin-top: 3px;
margin-left: 8px;
}
.custom-table {
width: 1200px;
margin: 50px;
}
body {
background: #EDEFF2;
font-family: 'Roboto';
font-size: 13px;
}
.view-navigation {
padding-left: 50px;
//padding-top: 10px;
padding-bottom: 10px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently
not supported by any browser */
}
.view-navigation .counter {
font-size: 13px;
line-height:21px;
vertical-align: top;
color: #4D4D4D;
margin-left: 15px;
}
.view-navigation span {
padding-bottom: 0px;
display: inline-block;
}
.view-navigation .material-icons {
font-size: 21px;
vertical-align:top;
color: #A8A8A7;
cursor: pointer;
cursor: hand;
}
#hoverfinger{
cursor: pointer;
cursor: hand
}
.key, .value{
display: inline-block;
padding-left: 5px;
padding-right: 5px;
font-size: 13px;
height: 24px;
display: flex;
align-items: center;
}
.key{
width: 450px;
font-weight: bold;
}
.value{
width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="TestApp">
<div class="custom-table" ng-controller="TestCtrl">
<div class="custom-row">
<div class="custom-row-content" ng-repeat="attr in query.attributes">
<div class="key"><span>{{attr.name}}</span></div>
<div class="value">
<span ng-show="isArray(data[attr.id])">
<span ng-repeat="objects in data[attr.id] track by $index">
{{objects}}<br>
</span>
</span>
<span ng-show="!isArray(data[attr.id])">
{{data[attr.id]}}
</span>
</div>
</div>
</div>
</div>
</div>
UPDATE
The rseults are now displayed one below the other but if the length of the array grows, the array-objects are displayed floating over the border of the row. So how to change the height of the row according to the length of the array?
Array.isArray(data[attr.id]) won't do the trick.
Instead You can put angular.isArray on the scope like below.
$scope.isArray = angular.isArray;
and use it inline as
<div ng-show="isArray(array)"></div>
Here is the Working fiddle
Hope this helps :)
Need help in making 2 bordered heading, one should according to content provided in HTML and second should be 100%, image is provided for reference.
I have tried it here
h3 {
position: relative;
font-size: 24px;
font-weight: 700;
color: #000;
text-transform: uppercase;
padding: 0 0 12px;
border-bottom: 3px solid #e64e52;
}
h3:before {
content: '';
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
border-bottom: 1px solid #000;
display: inline-block;
}
h3.display_inline {
display: inline-block;
}
<h3>HOT DEALS</h3>
<h3 class="display_inline">HOT DEALS</h3>
Problem what I am facing is both are running parallel, if I made it display: inline-block, then it will remain according to content and if display: block, then both will be 100%.
I am also open for JS solution :)
Help in the regards will highly appreciated.
Thanks in Advance.
You can add additional element (e.g. span) inside your h3 element, and style it separately like this:
h3 > span{
border-bottom: 2px solid blue;
display: inline-block;
}
h3{
padding-bottom: 10px;
border-bottom: 2px solid red;
}
<h3 class="display_inline">
<span>HOT DEALS</span>
</h3>
Thanks Champs for the contribution,
I have found my solution, pasting code to help others.
h3 {
position: relative;
font-size:24px;
text-transform: uppercase;
}
h3 > span {
border-bottom: 3px solid #e64e52;
display: inline-block;
position: relative;
z-index: 10;
padding-bottom: 15px;
}
h3:before {
border-bottom: 1px solid #e5e5e3;
position: absolute;
left: 0px;
bottom: 1px;
content: "";
width: 100%;
}
<h3 class="display_inline">
<span>HOT DEALS</span>
</h3>
<h3 class="display_inline">
<span>Inspiration & News</span>
</h3>
Special thanks to #Chris for the solution, I have use his Idea to make it exactly what I needed.
h3 {
position: relative;
font-size: 24px;
font-weight: 700;
color: #000;
text-transform: uppercase;
padding: 0 0 12px;
border-bottom: 3px solid #e64e52;
display: inline-block;
}
span {position:relative;
padding: 0;
width:100%;
display:block;
height: 66px;
}
span:before {
content: '';
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
border-bottom: 3px solid #ccc;
display:block;
}
<span><h3>HOT DEALS</h3></span>
There are two types of help text container I have. One is in <div> other is in <span>
I wrote a css both in one style. It's working good but those <div> and <spans> includes an arrow styled child <div> and <span>. I tried to combine that .arrow styles but it failed in practice. Is there a way combine those same styles?
HTML example for <div>:
<div class="helptext" id="{{ id_for_label }}">
<div class="arrow"></div> Helptext is in here
</div>
HTML example for <span>:
<span class="helptext" id="{{ id_for_label }}">
<span class="arrow"></span> Helptext is in here
</span>
CSS for both:
div[class="helptext"],span[class="helptext"] {
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
CSS .arrow example for <div>:
div[class="helptext"] .arrow {display: block; position: absolute; border: 10px solid transparent;
border-bottom-color: #3c578c; top: -20px; right: 10px;}
CSS .arrow example for <span>:
span[class="helptext"] .arrow {display: block; position: absolute; border: 10px solid transparent;
border-bottom-color: #3c578c; top: -20px; right: 10px;}
I can't combine last two css.
You are missing .arrow in both selectors for your css
Use this
div[class="helptext"] .arrow,span[class="helptext"] .arrow{
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
I think you can .helptext .arrow as selector, if you don't have another element with classname helptext.
You should use below code:
.helptext {
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
.helptext .arrow {
display: block;
position: absolute;
border: 10px solid transparent;
border-bottom-color: #3c578c;
top: -20px;
right: 10px;
}
I've got the following div structure in my html layout.
<div class='main-container'>
<h5 class='hotel-name'></h5>
<div class='hotel-price'></div>
</div>
and the css is as following for each element.
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
}
.hotel-price {
display: inline;
float: right;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
I've not defined any width to any element. The content in each element is drawn dynamically. for example, the following image shows how the structure looks after all the data is loaded.
but my problem is there are some occasions where the name is long and the price just drops down.
example image of the issue.
How can I fix this issue. I'm building this layout using bootstrap 3.1 and my custom css.
Can you update your CSS?
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
word-wrap: break-word; // <- New Line
}
Here's the reference on MDN
try this, use clearfix class
<p class="clearfix"></p>
Here is a working example using Flex box.
Flexbox is the new standard of designing and aligning.
http://jsfiddle.net/maxspan/t4QuH/
#mainDiv{
display:flex;
flex-wrap: nowrap;
width: 700px;
background-color: lightgray;
}
#innerDiv{
box-shadow:box-shadow: 2px 2px 2px #888888;
width:200px;
height:200px;
border:1px;
background-color: green;
padding:12px;
}
Using float is not a good idea if you just want the price to stay in the right lower corner.
position:absolute div in a position:relative div will help you better position your price tag.
Example:
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-price {
display: inline;
// ========== Here is the change =================
position: absolute;
bottom: 0px;
right: 0px;
// ===============================================
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
You can try with display:table-cell css property
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: table-cell;
white-space: nowrap;
}
.hotel-price {
display: table-cell;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}