In Play 2, there's a sample computer-database-jpa supporting the sorting of columns. By default it's sorted by computer, an arrow is indicating the sort order. I need this CSS style / arrow in another project, but even after examining the CSS code for this table header
<th class="name header headerSortDown">
Computer name
</th>>
I still can't see where the arrow is coming from? Any hint on this? Thanks!
Update:
One can browse the CSS here: https://github.com/playframework/Play20/tree/master/samples/java/computer-database-jpa/public/stylesheets
But on e.g. headerSortDown I can't find something that looks like an arrow ):
For a follow up question:
How to get the arrow directly next to the text?
The easiest way is to use inspection tool of your browser (ie FireBug in Firefox or built-in inspector in Chrome)
Here's standalone extract of the arrows, as you can see they are 'drawing' the arrows with CSS border (no image required)
<!DOCTYPE html>
<html>
<head>
<title>Arrows a'la Twitter Bootstrap</title>
<style type="text/css">
.header {
width: 200px;
background-color: #c2ccd1;
padding: 4px;
margin: 2px;
}
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: hidden;
}
.headerSortDown:after, .header:hover:after {
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: visible;
}
.headerSortUp:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
visibility: visible;
}
</style>
</head>
<body>
<div class="header">Not selected</div>
<div class="header headerSortDown">Arrow up (sorting ASC)</div>
<div class="header headerSortUp">Arrow down (sorting DESC)</div>
</body>
</html>
And here's nice tutorial about drawing triangles with CSS border.
Edit
DIV tag uses a block display so it tries to use full width OR the width given in CSS style (in above sample it's 200px) if you'll use that arrow with some inline element like A or SPAN the arrow will be 'glued' to the text. Of course you can also force displaying DIV as an inline, the simplest way to do that (by modifying sample)
for .header declaration: remove width and add display: inline-block;:
.header {
/* width: 200px; don't set width anymore */
background-color: #c2ccd1;
padding: 4px;
margin: 2px;
display: inline-block; /* force displaying DIV as an inline element */
}
To control space between text and arrow just use margin-left property for .header:after part:
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: hidden;
margin-left:4px; /* space between text and arrow for inline elements */
}
OR if you want to preserve a space for the arrow in the inline elements (to avoid width changes on hover) - you can also add transparent 'arrow'
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: visible; /* make it visible by default */
margin-left:4px; /* space between text and arrow for inline elements */
border: 4px solid transparent; /* set borders to transparent, so they won't show */
}
Related
How can I remove the arrow appear in frone of tags input as shown in image
demo here: https://colorlib.com/polygon/gentelella/form.html
I see that on other page here, that the Daily active users '.tag' has the arrow that's been bothering you.
I suggest that you extend the .tag class and add the pseudo code for the arrow
ul{
&.timeline{
li{
.tag{
#extend .tag;
&:after{
/* add code for arrow here */
}
}
}
}
}
or
simply hide the tag by selecting a specific parent like this:
.tagsinput .tag:after {
display: none;
}
By using the inspector / developer console on your browser you can see that the arrow is generated by:
.tag:after {
content: " ";
height: 30px;
width: 0;
position: absolute;
left: 100%;
top: 0;
margin: 0;
pointer-events: none;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 11px solid #1ABB9C
}
Inspector claims this is part of custom.min.css beginning at line 2,922.
This arrow was probably supposed to appear directly adjacent to the actual tag, but it looks like position:relative is missing from key elements as well as other aspects of .tag being re-defined throughout the CSS.
I have a CSS "tab bar" with a bottom border. The active tab should have a "hole" in the bottom border. I've implemented this by a negative bottom margin and a bottom border the same colour as the background.
This looks fine at normal browser zoom:
But looks bad in various ways in Chrome and Safari if I zoom the browser window:
How do I make it not look bad when zooming? Ideally without introducing additional markup. I would like for it to work at least in all modern browsers.
Here's the code (JSFiddle: https://jsfiddle.net/4utwsvt2/):
HTML:
<body>
<div class="tabs">
<div class="tab active">Foo</div>
<div class="tab">Bar</div>
</div>
</body>
CSS:
body { background: #fff; }
.tabs {
border-bottom: 1px solid #000;
}
.tab {
display: inline-block;
border: 1px solid #000;
margin: 0 5px -1px;
padding: 5px;
}
.tab.active {
border-bottom-color: #fff;
}
I've tried decimal pixel values as suggested here with no luck (JSFiddle: https://jsfiddle.net/1gyz7me5/1/).
I've tried using position: relative instead of a negative margin, with no luck (looks good in Chrome but not Safari – JSFiddle: https://jsfiddle.net/qwkvxdj4/).
I've tried using translate instead of a negative margin, with no luck (JSFiddle: https://jsfiddle.net/qwkvxdj4/1/).
I found a solution on Chrome zoom levels except for 75% and 33% and 20%:
body { background: #fff; }
.tabs {
border-bottom: 1px solid #000;
}
.tab {
display: inline-block;
position: relative;
top: 1px;
border: 1px solid #000;
margin: 0 5px;
padding: 5px;
}
.tab.active {
border-bottom-color: #fff;
}
The problem is "hiding" the bottom border with the tab's bottom border to appear active. At certain zoom levels, the aesthetic will only partially cover (if at all) the bottom border. By removing the negative margin and making the position relative, you're moving the tabs after the page has rendered, which is a decent pseudo-fix for zooming in at least.
I need to create this kind of divider (the vertical line before browse and avatar). I don't want to use images, so is there a way to make in css?
I have tried:
.hr_v {
width: 1px;
height: 80px;
border: 0;
border-left: 1px solid;
color: gray;
background-color: gray;
}
The css shall be applied on the floated div, not a hr tag.
hr cannot be applied vertically Is there a vr (vertical rule) in html?.
You need to only set the border-left and add the border color since it was missing in your code, you can also add a left padding for better view :
#floatingAvatarDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
or create a class since you need it for both divs :
.leftBorderDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
and add it to your menu container and the avatar container divisions
You could use :before
.avatar {
position: relative;
height: 80px;
border-left: 1px solid gray;
}
.avatar:before {
position: absolute;
top: 0;
bottom: 0;
left: 1px;
content: '';
width: 1px;
background-color: #333; /* different gray */
}
In case your "Browse" button's container is bigger, you may get longer borders. In such case, you may simply try a "|" (a pipe) in a span before the "Browse" button and style to however you want. In this case, you wont have to use a lot of css styling.
I have a prepended input like this:
http://jsfiddle.net/swQa4/
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input type="text" placeholder="Email" />
</div>
How can i achieve, that the blue outline (showing when focused) goes around the prepended symbol?
Edit: Similar to the search field at github repos (e.g. https://github.com/cloudera/repository-example)
The input element is that which has the :focus pseudo selector attached so the easiest way to get it around everything is to extend the input element to the size which you want the blue aura to show.
What this means is that you'll have to position the .add-on on top of the input element.
Here's a crude example on JSFiddle which might interfere with Bootstrap slightly more than you'd like but obviously the CSS can be refined to avoid this.
All I've done is add the following
.input-prepend .add-on{
/* Move the add-on above the input element */
position:absolute;
/* The focus brings the input to z-index 2, so needs to be higher */
z-index:3;
}
.input-prepend input {
/* Move the text in the input out from under the add-on */
padding-left:32px;
/* Re apply the border radius which we've made look ugly with the add-on on top */
border-radius:4px;
}
.input-append .add-on, .input-prepend .add-on {
/* Remove the border, input now takes care of this except from the right one */
border:0;
/* Reseparate the add-on from the input */
border-right:1px solid #ccc;
/* Account for the 1px gap caused by removing the border */
margin:1px 0 1px 1px;
}
Allows Click on Icon for Input
This fiddle has been tested in IE9+ (should work lower), FF, and Chrome. Unlike the z-index solution of some other answers here, it allows for the icon to be clicked for input to occur. It is actually quite simple in how it works.
.input-prepend {
border-radius: 4px;
background: white;
}
.input-prepend .add-on {
margin-right: -28px;
}
.input-prepend input {
border-radius: 4px;
background: none;
padding-left: 34px; /*28 for icon, 6 for normal padding*/
}
Explanation
The icon's negative right margin causes the input to overlap it. The input has been given all the border-radius again, but it's background is set to none so that the icon can be seen. Additional right padding is added to input to accommodate the icon. Finally, the wrapper is given border-radius as well and the final background color is applied to the wrapper so that the input will still have it's white background against some other background colored container (as the fiddle illustrated).
Update: If you don't want the inset shadow on the icon
This is the most cross browser friendly way I could find to hide the inset shadow you mentioned in your comment. Some browsers will not honor pointer-events and therefore a small part of the icon area will not be recognized for trigger of input.
.input-prepend:before,
.input-prepend:after{
content: '';
display: block;
top: 1px;
left: 1px;
width: 24px;
height: 4px;
border-radius: 4px 0 0 0;
border: 2px solid #eee; /* match icon background */
border-width: 2px 0px 0px 2px;
position: absolute;
z-index: 2;
pointer-events: none; /* for those browsers that honor */
}
.input-prepend:before {
width: 4px;
height: 24px;
top: 4px;
border-radius: 0 0 0 4px;
}
I modified the solution found by Ben Swinburne so that it works with prepended and appended fields:
http://jsfiddle.net/WBJ6H/
<div class="input-prepend input-append input-prepend-inner">
<span class="add-on"><i class="icon-envelope"></i></span>
<input type="text" placeholder="Email" />
<button class="btn" type="button">Copy</button>
</div>
CSS:
.input-prepend-inner .add-on
{
/* Move the add-on above the input element */
position: absolute;
/* The focus brings the input to z-index 2, so needs to be higher */
z-index: 3;
}
.input-prepend-inner input[type=text]
{
/* Move the text in the input out from under the add-on */
padding-left: 32px;
/* Re apply the border radius which we've made look ugly with the add-on on top.
The styling is applied specifically to top-left / bottom-left
to allow .input-append to overwrite the right border-radius side. */
-webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.input-prepend-inner .add-on
{
/* Remove the border, input now takes care of this except from the right one */
border: 0;
/* Reseparate the add-on from the input */
border-right: 1px solid rgb(204, 204, 204);
/* Account for the 1px gap caused by removing the border */
margin: 1px 0 1px 1px;
}
I'm fighting with (yet-another) IE8 bug.
Basically, I have a small square container, with an arrow inside built with the :before and :after pseudoelements. The HTML goes something like this:
<div class="container">
<div class="arrow" />
</div>
And the CSS for that is
.container {
height: 58px;
width: 58px;
background-color: #2a5a2a;
}
.arrow {
padding-top: 7px;
}
.arrow:before {
margin: 0 auto;
content: '';
width: 0;
border-left: 12px transparent solid;
border-right: 12px transparent solid;
border-bottom: 13px gray solid;
display: block;
}
.arrow:after {
margin: 0 auto;
content: '';
width: 12px;
background-color: gray;
height: 14px;
display: block;
}
Now, I want the arrow inside it to change color when I hover over the container. I added this CSS:
.container:hover .arrow:after {
background-color: white;
}
.container:hover .arrow:before {
border-bottom-color: white;
}
And that's where the problem begins. That works on most browsers, but on IE8 the background-color property is not overridden. So I get only the tip of the arrow with the new color, but not the square that makes the "body" of it.
To make things more interesting, if I add the following to also change the container background-color to something slightly different, then everything starts to work and the background-color for the arrow changes!
.container:hover {
background-color: #2a5a2b;
}
If I only set the :hover status for the container, and I set THE SAME background color that it already had, then IT DOESN'T WORK. I have to change it if I want the background-color to change.
Here's a jsfiddle if you want to try it: http://jsfiddle.net/Ke2S6/ Right now it has the same background color for the container on hover, so it won't work on IE8. Change one single digit and it'll start working.
So... any ideas?