I have a styled checkbox that is the child of a container along with some text. The reason the checkbox and text are children of a parent is so that they can sit next to each other and be centered vertically on the UI. This has worked fine for me; however, I've noticed that the checkbox starts to change from a perfect circle into more of an oval as text starts to wrap into multiple lines (on mobile the text is two lines long and on desktop it is only one line). How could I fix this so that the checkbox does not stretch as the text wraps into multiple lines? Below is my html and styling, thank you.
.opt-in {
display: flex;
align-items: center;
color: #f4a11e;
}
input[type='checkbox'] {
position: relative;
margin: 17px 15px 0 0;
cursor: pointer;
width: 20px;
height: 20px;
-webkit-appearance: none;
background: transparent;
border: 1px solid #f4a11e;
outline: none;
border-radius: 50%;
transition: 0.5s;
}
input[type='checkbox']:before {
content: '';
position: absolute;
top: 45%;
left: 50%;
width: 4px;
height: 10px;
opacity: 0;
border-right: 1px solid #f4a11e;
border-bottom: 1px solid #f4a11e;
transform: translate(-50%, -50%) rotateZ(40deg);
transition: 0.2s;
}
input:checked[type='checkbox']:before {
opacity: 1;
}
<div class="opt-in">
<input type="checkbox" v-model="optIn" id="checkbox" />
<label for="checkbox">Opt-in to receive the latest cloud insights and industry deep dives.</label>
</div>
In the CSS code in the input[type='checkbox'] {} section, try using min-width: 20px; rather than width: 20px;.
Worked for me in a test implementation with copy/pasted code although I had to set max-width in the properties of the opt-in div to test it.
I don't have a technical explanation but I believe it has something to do with the relative position or the display: flex overriding the specified width/height in pixels.
Related
I am trying to use a search bar css from code pen.
I used their exact code but the search bar seems to be really buggy on react.
Here is code sandbox for better reference. https://codesandbox.io/s/sad-moser-mdxmd?file=/src/Dashboard.js
Here's the code that I am currently using.
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" id="input_text"></input>
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
.search {
width: 100%;
position: center;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00b4cc;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9dbfaf;
}
.searchTerm:focus {
color: #00b4cc;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00b4cc;
background: #00b4cc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
position: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I want the search bar to look like this:
This is the link to the code that I attempted to use.
https://codepen.io/huange/pen/rbqsD
Change the css for .wrap to this -
.wrap {
/* width: 30%; */
display: flex;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
}
Surely you meant display: flex; and not positon: flex;
Explanation
First, flex is for display, not for position. You can use both together, but they don't probably interact in the way you'd think.
Position strictly deals with where the element is on the page (either relative to where it would be while in the natural flow, absolutely compared to the closest parent with an explicit position, or fixed somewhere on the screen).
Display deals with how the elements are laid out (or if at all). I won't go into all of the display possibilities here, but block, inline-block, inline, and flex are the most popular and you can easily learn about them with a Google or Youtube search.
To answer your question, you need to remove position from your .wrap class as well as all of your position related items. Then add margin for centering and top and bottom space (remember that margin auto for left and right will center it). Then, to do things the react way, you need to install react-fontawesome with npm and use the icon like that for the most natural and best performance. Here's a link for how to do that, with examples of usage at the bottom: https://fontawesome.com/how-to-use/on-the-web/using-with/react
You also need a placeholder label if you want your search bar to be identical to the one on CodePen. This will give you the faded text before the user starts typing. I've added it as a prop in the input.
Finally (and this isn't appearance related), you probably want to set up two-way binding with your input so that you can actually do something with the value later. I think my code shows what's happening simply enough, but basically you just have a value in your state that's tied to your input. When the input changes, that state is updated, then when the input is rerendered, it reads its value from the state. This gives you access to the value in the other parts of your code.
CSS
.search {
width: 100%;
position: center;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00b4cc;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9dbfaf;
}
.searchTerm:focus {
color: #00b4cc;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00b4cc;
background: #00b4cc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
margin: 20px auto;
/* change the margin to move where it is on the page */
}
JSX
import {Component} from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faSearch } from '#fortawesome/free-solid-svg-icons';
class Foo extends Component {
state = {
input: '',
};
render() {
return (
<div class="wrap">
<div class="search">
<input
placeholder="What are you looking for?"
value={this.state.input}
onChange={(event) => this.setState({ input: event.target.value })}
type="text"
className="searchTerm"
id="input_text"
></input>
<button type="submit" className="searchButton">
<FontAwesomeIcon icon={faSearch} />
</button>
</div>
</div>
);
}
}
Not to sell myself here, but if you'd like to play around with some of these properties interactively, here's an app I built specifically for this kind of scenario: https://csspressme.web.app/
I want to make my table columns resizable. So I put a div inside the th and made those divs resizable. Problem is, there is an ugly pair of diagonal lines inside each of those resizable divs. How do I get rid of it?
This element is rendered by the browser itself and is not part of the HTML spec. There is one work around and that is to position another element over the top of the corner to hide it.
The text area will still be resizable keep in mind.
textarea {
position: relative;
margin: 20px 0 0 20px;
z-index: 1;
}
.wrap {
position: relative;
display: inline-block;
}
.corner {
height: 0px;
width: 0px;
border-top: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
-webkit-transform: rotate(-45deg);
position: absolute;
bottom: 4px;
right: -5px;
pointer-events: none;
z-index: 2;
}
<div class="wrap">
<div class="corner"></div>
<textarea></textarea>
</div>
I have animated my navigation buttons that expand upon hover, but they keep on disrupting the flow of the rest of the page. I've tried using z-index to take them out of the flow, but that isn't working, either. Is there a way to do this with out the buttons shoving everything out of whack? Here's my relevant code so far:
.btn-group .button {
background-color: teal;
border: 2px solid orange;
color: orange;
padding: 2px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
font-size: 1em;
border-radius: 50%;
margin: 5px 0 5px 5px;
padding-left: 30px;
position: relative;
z-index: 1; }
.btn-group .button:hover {
background-color: cadetblue; }
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s; }
.button span:after {
content: '\00bb';
opacity: 0;
top: 0;
right: -20px;
transition: 0s;
padding-left: 10px; }
.button:hover span {
padding: 10px;
color: black;
font-size: 1.5em; }
.button:hover span:after {
opacity: 1;
right: 0;
color: black; }
Thanks for your help!
You have to limit your animations to properties that do not interfere with object's position and dimensions in the document flow.
Those are: transform, left, right, bottom and top. For the last 4, in order to work, you also need position:relative on the button. When using any of these, even though you see the element moving, its place is kept in the flow, just like it would still be there. Only its projected image is moved/transformed.
Example with transform:
.button {
margin: 1rem;
transition : transform .3s cubic-bezier(.4,0,.2,1);
display: inline-block;
border: 1px solid black;
padding: 1rem;
}
.button:hover {
transform: scale(1.1);
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<a class="button">Example with transform</a>
<div class="red">see? I'm not moving</div>
That's how the vast majority of web animations are done (using transforms).
As an alternative, if you really want to animate properties that would normally affect the rest of the document, you will need to remove your element from document flow. For that, you need to:
wrap your element in a wrapper (placeholder) of desired dimensions (which will never move and keep everything in place), and give the wrapper position:relative,
set position:absolute on the button.
Now you can animate anything on the button without affecting the rest of the document.
But remember, the wrapper needs to have proper dimensions, as the button, now being absolutely positioned, will no longer occupy any space in the document flow. Also, note that your button is now relative to its placeholder. If the placeholder moves, the button moves too.
Example with absolute positioning and wrapping:
.wrapper {
height: 5rem;
position: relative;
}
.button {
position: absolute;
top: 1rem;
padding: 1rem;
transition: all .3s cubic-bezier(.4,0,.2,1);
border: 1px solid black;
}
.button:hover {
top: .5rem;
padding: 1.5rem;
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<div class="wrapper">
<a class="button">Example with absolute positioning and wrapping</a>
</div>
<div class="red">see? I'm not moving</div>
That's the basics.
As a side note, best practices require you to limit animations to a very select and limited bunch or properties which do not hit browser performance: the bunch is made of exactly two items:
transforms
and opacity.
You animate anything else... boom!, your scroll begins to stagger on devices with limited resources. There is quite a lot to read on the subject, but here's a good one.
Setting a high z-index does not take the element out of the document flow, you need to use absolute positioning for your button.
i.e.
.btn-group{
position: relative;
}
.button{
position: absolute;
}
I am trying to create a css tool-tip, the html and css code and also link to fiddle is given below
CHECK MY CODE HERE #JSFIDDLE
HTML
<a class="tooltip" href="#">CSS Tooltips 1
<span>Tooltip1</span></a>
</br>
<a class="tooltip" href="#">CSS Tooltips
<span>Tooltip This is not working for me </span></a>
CSS
.tooltip {
position: relative;
}
.tooltip span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
.tooltip span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.tooltip:hover span {
display: block;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
My issue is only half the text from <span>Tooltip This is not working for me </span> is shown in the corresponding tool-tip. I tried hard but couldn't debug it. Please help.
Thanking You
It's because you have a fixed width. To allow the tooltip to dynamically expand to the content's width remove the width property and set white-space:nowrap to keep the text inline.
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
white-space: nowrap;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/3/
EDIT
As commented bellow, if you want to keep the fixed width, but wants the text to expand in height, remove the height property of the span, and it will grow (also, don't use white-space anymore):
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
width:140px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/9/
The point is, setting a specific width or height prevents your element of growing automatically.
You need to change the width property of the second tooltip to fit all the text you want display.
Fixed Fiddle: http://jsfiddle.net/89rwu2db/8/
I added styling to the second span to increase the width.
<span style="width: 250px;">Tooltip This is not working for me </span>
i'm trying to style a radio button using just css, but i can't figure out why it does not work:
HTML
<input type="radio">
CSS
input[type="radio"]{
background: green;
}
http://jsfiddle.net/vNmLe/
Radio buttons, checkboxes and selects can't be styled very well in a cross-browser fashion using only CSS. You'll need some extra markup and a little javascript.
One technique is to wrap the input inside a div and set the input's opacity to 0. You position the input inside of the wrapping div so that it fills the entire space.
HTML:
<div class="faux-radio" data-group="radio-test">
<input type="radio" id="radio-1" name="radio-test">
</div>
CSS:
input[type="radio"] {
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
z-index: 5;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity: 0;
opacity: 0;
}
.faux-radio {
width: 12px;
height: 12px;
background: #f2f2f2;
border: 1px solid #a6a6a6;
border-radius: 12px;
display: inline-block;
margin-right: 2px;
position: relative;
}
.faux-radio.selected:after {
content: '';
width: 6px;
height: 6px;
background: #666;
border-radius: 6px;
position: absolute;
top: 2px;
left: 2px;
}
label {
margin-right: 20px;
}
With this technique you get your own style and still get all of the standard input behavior. But you have extra markup for every form element. And you'll need to add some javascript to provide the visual feedback users expect when clicking form elemens.
Here's a quick radio button example with js included: http://jsfiddle.net/xevw3/17/