I'm using Font-awesome icon for a checkbox, but having problem aligning the icon in the square. It kind of looks ugly and how much I try to work with the padding and alignment, it does not adjust well as the edges are different(the font-awesome icon has round edges which does not fit well with my square). Any one has any ideas of how to fit it perfectly in my square?
Is there a way to change the round edges of the icon (without actually having to make changes to the font-awesome source code?) Thank you.
HTML:
<input type="checkbox" name="checkbox" id="checkbox"class="checkboxClass"/>
<label for="checkbox" class="labelForCheckboxClass"></label>
CSS:
.checkboxClass {
opacity: 0;
}
.labelForCheckboxClass {
position: relative;
font-size: 16px;
cursor: pointer;
padding-left: 20.5px;
padding-top: 0;
padding-bottom: 0;
border: 1px solid gray;
background-color: white;
}
.labelForCheckboxClass:after {
content: '\f14a';
max-width: 0;
overflow: hidden;
opacity: 0.5;
line-height: 20px;
border-radius: 0;
}
.labelForCheckboxClass:before, .labelForCheckboxClass:after {
font-family: FontAwesome;
font-size: 25px;
position: absolute;
top: 0;
left: 0;
}
.checkboxClass:checked ~ label:after {
max-width: 25px;
opacity: 1;
}
Here is the JsFiddle.
the problem is that you are trying to fill a square box space with a graphic that has rounded borders. You can't modify the border of the checkmark with css because is the shape of the font... You don't have access to that property with css.
one work around would be to have the square with border-radius I you may see here:
http://jsfiddle.net/leojavier/0h7gfdq6/1/
.labelForCheckboxClass {
position: relative;
font-size: 16px;
cursor: pointer;
padding-left: 21.5px;
padding-bottom: 2px;
border: 1px solid gray;
background-color: #FFF;
border-radius:4px;
}
In the other hand if you want to keep the sharp square edges of the box, you may want to use the checkmark icon (white) without the background from font-awesome and just toggle the background color of your label to (black) on click with javascript.
Here is a version without removing the sharp edges:
http://jsfiddle.net/leojavier/0h7gfdq6/3/
EDIT:
For square corners try this:
.checkboxClass {
opacity: 0;
}
.labelForCheckboxClass {
position: relative;
font-size: 16px;
cursor: pointer;
padding-left: 17px;
padding-top: 0;
padding-bottom: 0;
border: 1px solid gray;
background-color: white;
}
.labelForCheckboxClass:after {
content: '\f00c';
color:white;
background-color: black;
max-width: 0;
}
.labelForCheckboxClass:before, .labelForCheckboxClass:after {
font-family: FontAwesome;
font-size: 17px;
position: absolute;
top: 0;
left: 0;
height:1.05em;
}
.checkboxClass:checked ~ label:after {
max-width: 17px;
opacity: 1;
}
Try with this:
.labelForCheckboxClass {
position: relative;
font-size: 18px;
cursor: pointer;
padding-left: 21.5px;
padding-top: 0;
padding-bottom: 0;
border: 1px solid gray;
background-color: white;
border-radius: 4px;
}
Well also adding right: 0 and bottom: 0 to .labelForCheckboxClass:before, .labelForCheckboxClass:after helps to an extent.
Here's your updated fiddle: http://jsfiddle.net/4zjtp/134/
Related
I need to create an input with a border that will change when the input is focused.
The inputs should works in that way:
When input is not focused and is empty, the label should be inside the input:
Input without focus
When user focus the input, or input is filled, the label will move up and the border should be cropped so the label is not obscured by the border.
Input with focus
I've tried with adding before element on label with background, but i realized this is not the correct way because input has not background itself and depend on the subpage there can be other background color and finally the resould looked like this:
Input with focus
Input without focus
Could you please help me with this?
You can try the below code
HTML
<div class="input-control">
<input type="text" required>
<label>Placeholder</label>
</div>
CSS
.input-control {
position: relative;
}
input {
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
}
input:focus {
border: 1px solid red;
background-color:#fff;
}
label {
color: #999;
position: absolute;
pointer-events: none;
left: 10px;
top: 10px;
transition: 0.2s;
}
input:focus ~ label,
input:valid ~ label {
top: -8px;
left: 10px;
font-size: 12px;
color: red;
background-color:#fff;
padding:0 5px 0 5px;
}
You can go with this approach
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 62.5%;
background: #FFF;
}
div.centralize {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
div.input-block {
position: relative;
}
div.input-block input {
font-weight: 500;
font-size: 1.6rem;
color: #495055;
width: 350px;
padding: 15px 15px;
border-radius: 1rem;
border: 2px solid #D9D9D9;
outline:none;
}
div.input-block span.placeholder {
position: absolute;
margin: 17px 0;
padding: 0 4px;
font-family: Roboto, sans-serif;
color: #6c757d;
display: flex;
align-items: center;
font-size: 1.6rem;
top: 0;
left: 17px;
transition: all 0.2s;
transform-origin: 0% 0%;
background: none;
pointer-events: none;
}
div.input-block input:valid + span.placeholder,
div.input-block input:focus + span.placeholder {
transform: scale(0.8) translateY(-30px);
background: #fff;
}
div.input-block input:focus{
color: #284B63;
border-color: #284B63;
}
div.input-block input:focus + span.placeholder {
color: #284B63;
}
<div class="centralize">
<div class="input-block">
<input type="text" name="input-text" id="input-text" required spellcheck="false">
<span class="placeholder">
Placeholder
</span>
</div>
</div>
Check out the code below. There's no way to actually crop a border, but you can construct the top border from 2 separate elements and then shrink the right element as needed - this way you don't have to worry about the flaws of the background workaround.
let field = document.querySelector('.field');
let input = document.querySelector('.input-field');
let label = document.querySelector('.label');
let border = document.querySelector('.shrink');
input.addEventListener("click", () => {
let displacement = label.offsetWidth + 14;
// get label width, plus hardcoded gap which should ideally be computed (the initial 10px gap + 4px to give the label some space)
field.classList.add('active');
border.style.width = 'calc(100% - ' + displacement + 'px)';
})
body {
background: URL('https://www.toptal.com/designers/subtlepatterns/uploads/just-waves.png')
}
* {
font-family: sans-serif;
}
.field {
position: relative;
width: auto;
display: inline-block;
}
input {
border: none;
padding: 12px;
border-radius: 10px;
background: transparent;
outline: none;
border: 2px solid #000;
border-top: none;
position: relative;
}
.b1 {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 8px;
border-radius: 10px 0 0 0;
border-top: 2px solid #000;
}
.b2 {
content: '';
position: absolute;
top: 0;
right: 0;
width: calc(100% - 10px); /* subtract 10px to account for left corner border */
height: 8px;
border-radius: 0 10px 0 0;
border-top: 2px solid #000;
}
label {
position: absolute;
top: 12px;
left: 12px;
transition: all ease-in-out .1s;
}
.field.active label {
transform: translateY(-20px);
}
<div class="field">
<div class="top-border">
<div class="b1"></div>
<div class="b2 shrink"></div>
</div>
<label class="label">test label</label>
<input type="text" class="input-field">
</div>
I am working on a react app where on long texts when I hover my cursor,it shows a popup like this,but somehow its transparent and the table lines are also visible here.
As you can see,In between the lines I can see the white lines which are actually table borders.
How can i fix it?
Here's my code:
<Table.Cell data-title={message.message}>
{this.truncate(message.message, 50)}
</Table.Cell>
This is the table row inside the component.
Now here's the css:
[data-title] {
font-size: 14px;
position: relative;
cursor: help;
}
[data-title]:hover::before {
content: attr(data-title);
opacity: 1;
position: absolute;
margin-top:33px;
padding: 10px;
background: #000;
color: #fff;
font-size: 14px;
width:300px;
white-space: wrap;
}
[data-title]:hover::after {
content: '';
position: absolute;
opacity: 1;
bottom: -12px;
left: 8px;
border: 8px solid transparent;
border-bottom: 8px solid #000;
}
Any help will be appreciated.
you can give z-index to [data-title]:hover::before
for example:
[data-title]:hover::before {
content: attr(data-title);
opacity: 1;
position: absolute;
margin-top:33px;
padding: 10px;
background: #000;
color: #fff;
font-size: 14px;
width:300px;
white-space: wrap;
z-index: 9;
}
I have a problem with a specific style. I have a string "Historic" in a div with CSS transform rotate, positioned on a specific part of sibling div. If I change the string by "Historique" (for i18n), the div move.
I wish the div keep at the same place when string has changed. Thank you for answers.
#main {
margin: 50px;
position: relative;
width: 300px;
background: #eee;
border: thin solid #bbb;
}
#tag {
position: absolute;
left: -36px;
padding: 5px;
font-size: 9px;
transform: rotate(-90deg);
background: red;
color: white;
bottom: 15px;
text-transform: uppercase;
max-height: 20px;
}
.content {
display: flex;
position: relative;
padding: 20px;
}
<div id="main">
<div id="tag">Historic</div>
<div class="content">a</div>
<div class="content">b</div>
<div class="content">c</div>
</div>
I got it working by changing the tag class to read like this.
Note the transform-origin option.
transform-origin: left top 0;
position: absolute;
left: -21px;
padding: 5px;
font-size: 9px;
transform: rotate(-90deg);
background: red;
color: white;
bottom: -20px;
text-transform: uppercase;
max-height: 20px;
I found a tutorial that is exactly the way I want the slider to look with the exception that I do not want to have multiple slides in each slide. And I simply want the text to change as I click different links.
Also I want the slides to transition by fading in.
I tried playing around with the code, but it seems to be way too complex for my understanding to fix. Because it seems to use Movefromleft movefromright .. for each movement.
I need some help to either fix this or guide me to a less complex version of a nice interface (like this) tutorial that does the same.
http://jsfiddle.net/itsnamitashetty/73pffnx9/2/
.mi-slider ul.mi-moveFromRight li {
-webkit-animation: moveFromRight 350ms ease-in-out both;
animation: moveFromRight 350ms ease-in-out both;
visibility:visible !important;
}
I am not sure why and how to get the fiddle to show up what its doing right now. But basically it doesn;t show up the first slide, and then works for the second and third but after the first clicks it doesnt work..
here is the original tutorial
http://tympanus.net/Tutorials/ItemSlider/
So I was able to find another content slider that did what I wanted but I had to make it work with the other tutorial.
HERE is what I came up with
Unfortunately the codepen in not showing how it works.
But anyways for someone looking to achieve the same thing
here are the two tutorials that I used,
Item slider & Full Width Tabs
I basically worked around the CSS of Full Width Tabs to make it interface pretty much like Item slider
.container {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
}
a {text-decoration: none;
outline: none;}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container{width:60%; margin:2% 20%;}
.tabs {
position: relative;
width: 100%;
overflow: hidden;
margin: 1em 0 2em;
font-weight: 300;
}
/* Nav */
.tabs nav {
text-align: center;
border-top: 5px solid transparent;
}
.tabs nav a.tab-current {
/* border: 1px solid #47a3da;
box-shadow: inset 0 2px #47a3da;*/
border-bottom: none;
z-index: 100;
}
.tabs nav a {
display: inline-block;
text-transform: uppercase;
letter-spacing: 5px;
padding: 40px 30px 30px 34px;
position: relative;
color: #888;
outline: none;
-webkit-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.tabs nav a:hover, .tabs nav a.tab-current {
color: #000;
}
.content{background:rgba(0,0,0,0.8)}
/* Content */
.content section {
font-size: 1.25em;
padding: 3em 1em;
display: none;
max-width: 1230px;
margin: 0 auto;
}
.content section:before,
.content section:after {
content: '';
display: table;
}
.content section:after {
clear: both;
}
/* Fallback example */
.no-js .content section {
display: block;
padding-bottom: 2em;
border-bottom: 1px solid #47a3da;
}
.content section.content-current {
display: block;
}
nav a.tab-current:after,
nav a.tab-current:before {
content: '';
position: absolute;
top: -5px;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
nav a.tab-current:after {
border-color: transparent;
border-top-color: rgba(0,0,0,0.8);
border-width: 20px;
left: 50%;
margin-left: -20px;
}
nav a.tab-current:before {
border-color: transparent;
border-width: 27px;
left: 50%;
margin-left: -27px;
}
http://jsfiddle.net/rajkumart08/8p2mZ/2/embedded/result/
When I click the more options a popup comes, but when I reduce the width and height if the browser using mouse... The popup does not move along with more options div...
How do I fix the issue? Please help.
My code is here: http://jsfiddle.net/rajkumart08/8p2mZ/3/
.openme {
display: inline-block;
padding: 10px;
cursor: pointer;
padding: 0;
margin: 0 20px 0 0;
width: 200px;
height: 200px;
list-style-type: none;
background: white;
border: 1px solid #999;
line-height: 200px;
padding: 0;
}
#menu{
display: inline-block;
opacity: 0;
visibility: hidden;
position: absolute;
padding:0px;
border: solid 1px #000;
margin: 0 auto 0 auto;
background: white;
top: 350px;
left: 649px;
-webkit-box-shadow: 0px 2px 13px rgba(50, 50, 50, 0.48);
}
#menu.show {
opacity: 1;
visibility: visible;
}
#menu a{
float:left;
/*margin: 7px;*/
padding: 10px 20px;
font-weight: bold;
font-size: 10px;
text-align: center;
background: white;
color: black;
word-wrap: normal;
/*border: 1px solid red;*/
}
One way is to specify the position of the menu in terms of % of the windows size.
E.g.
Instead of
top: 350px;
left: 649px;
specify
top: 15%;
left: 15%;
This will ensure that the menu is always positioned w.r.t the width of the window upon resize.
First, thing is give a min-width to parent container - .app-home div and make it `position:relative'.
Next, use right position instead of left for menu div.