I've a tile with an input of type radio, a label and a span text below this two elements. The input and label are connected with an id. They should be next to each other. The span should be directly below the label. This works so far and my layout matches. If I click on the input or on the label, the radio gets selected. Now what I'd like to do is, to select the radio by clicking on the tile, no mather where. So every click on the tile should select my radio. I would like to solve this with pure HTML/CSS without using JS, if possible. The only idea I had, is to give position: relative; to the radio and position: absolute; to the radio__wrap and the label and make them have width/height of 100%, so I can pull over the label over the whole tile. This idea crashed my layout (hard do position the span correctly). Is there a way to solve this by using pure HTML/CSS. Below is my snippet:
.tile {
border: 1px solid transparent;
border-radius: 10px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
margin-bottom: 30px;
}
.tile__wrap {
position: relative;
}
.radio {
padding: 24px 16px 16px;
display: flex;
flex-direction: column;
position: relative;
}
.radio__wrap {
margin-bottom: 10px;
}
.radio__label {
background-color: lightblue;
position: relative;
}
.radio__text {
padding-left: 24px;
display: block;
}
.tile--clickable .radio__wrap {
position: relative;
width: 100%;
height: 100%;
z-index: 5;
}
.tile--clickable .radio__label {
width: 100%;
height: 100%;
}
<div class="tile">
<div class="tile__wrap">
<div class="radio">
<div class="radio__wrap">
<input class="radio__input" id="radio01" type="radio">
<label class="radio__label" for="radio01">I'm the label</label>
</div>
<span class="radio__text">I'm the text</span>
</div>
</div>
</div>
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/
Well, my HTML looks like this, when I hover over the image the two checkboxes with a black background should be visible.
<img class='itemImage'/>
<div class='hoverDisplay'>
<div class="selctImgInptWrapper big">
<input class="selctImgInpt" type="checkbox" value="">
</div>
<div class="selectWrapperImgRetouch big">
<input class="selctImgRetouch" type="checkbox" value="">
</div>
</div>
My CSS
.hoverDisplay {
height: 75px;
font-size: 0.80rem;
background-color: rgba(44, 44, 44, 0.3);
background: rgba(44, 44, 44, 0.3);
color: #ffffff;
width: 95%;
bottom: 8px;
position: absolute;
padding: 2px 5px;
display: none; }
.hoverDisplay .selctImgInptWrapper {
bottom: 50px;
position: absolute;
padding: 2px 5px;
}
.hoverDisplay .selectWrapperImgRetouch {
bottom: 30px;
position: absolute;
padding: 2px 5px; }
.itemImage:hover ~ .hoverDisplay {
display: block; }
It works fine when I hover on the image, the two checkboxes are visible, the problem starts when I hover on the checkboxes it starts to flicker
I am not able to figure out the false scenario here.
When I move my cursor to the black are which is hoverDisplay class it starts to flicker and I am not able to check any checkboxes. While moving my
Simply because you will loss the hover when you want to use the input as you are no more hovering the image but another element which is a sibling. To avoid this add another property to keep the display:block state:
.itemImage:hover ~ .hoverDisplay,
.hoverDisplay:hover {
display: block;
}
The problem is that you show the checkboxes when you hover over the image. And then when you hover the checkboxes ( because they are not inside the image ( they are impossible to be) ) you hover out the image and css tries to hide them. But checkboxes are on top of the image, so the flickering happens.
You basically hover in and out the image in the same time.
One solution would be to wrap the img and checkboxes in a div and show the checkboxes when you hover over the div not just the img.
.img-container {
position:relative;
width:350px;
}
.hoverDisplay {
height: 75px;
font-size: 0.80rem;
background-color: rgba(44, 44, 44, 0.3);
background: rgba(44, 44, 44, 0.3);
color: #ffffff;
width: 95%;
bottom: 8px;
position: absolute;
padding: 2px 5px;
display: none;
}
.hoverDisplay .selctImgInptWrapper {
bottom: 50px;
position: absolute;
padding: 2px 5px;
}
.hoverDisplay .selectWrapperImgRetouch {
bottom: 30px;
position: absolute;
padding: 2px 5px;
}
.img-container:hover .hoverDisplay {
display: block;
}
<div class="img-container">
<img class="itemImage" src="http://via.placeholder.com/350x150">
<div class='hoverDisplay'>
<div class="selctImgInptWrapper big">
<input class="selctImgInpt" type="checkbox" value="">
</div>
<div class="selectWrapperImgRetouch big">
<input class="selctImgRetouch" type="checkbox" value="">
</div>
</div>
</div>
That might sound odd, but essentially, I'm trying to make it so when i click on a designated button/spot on a page, it opens up a CSS border box that contains information. I know how to make it hidden, but like when you hover and it appears using the :hover attribute, i want to make it stay permanently visible after the hover transition is complete. Can this be done with CSS? Or is it going to require Javascript? Here is the code I'm using as a starter base.
#information {
border: solid 2px #FF8000;
border-radius: 20px;
position: absolute;
height: 48%;
width: 24%;
left: =0.6%;
top: 0.7%;
padding: 0.4%;
color: #FFFFFF;
background-color: rgba(114, 70, 0, 0.3);
overflow: hidden;
}
#information:hover {
left: 74.6%;
}
<div id="information">
<div style=" height: 325px; overflow-x: hidden;" align="left">
<i>Information</i>
<br><br>
</div>
</div>
Sorry, I'm new to the site, and I'm still working out how to format my posts.
#information {
border: solid 2px #FF8000;
border-radius: 20px;
position: absolute;
height: 48%;
width: 24%;
left: =0.6%;
top: 0.7%;
padding: 0.4%;
color: #FFFFFF;
background-color: rgba(114, 70, 0, 0.3);
overflow: hidden;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
left: 74.6%;
}
<input type="radio" id="box">
<label id="information" for="box">
<div style=" height: 325px; overflow-x: hidden;" align="left">
<i>Information</i>
<br><br>
</div>
</label>
My solution is similar to what #Michael Coker suggested. We can use radio button instead to disable click on label after first click. I removed the inner div inside #information to make HTML W3C valid.
I'm trying to make it so when i click on a designated button/spot on a page, it opens up a CSS border box that contains information.
You can use the "checkbox hack" to pull off changes like this in CSS. https://css-tricks.com/the-checkbox-hack/
#information {
border: solid 2px #FF8000;
border-radius: 20px;
position: absolute;
height: 48%;
width: 24%;
left: =0.6%;
top: 0.7%;
padding: 0.4%;
color: #FFFFFF;
background-color: rgba(114, 70, 0, 0.3);
overflow: hidden;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + label {
left: 74.6%;
}
<input type="checkbox" id="box">
<label id="information" for="box">
<div style=" height: 325px; overflow-x: hidden;" align="left">
<i>Information</i>
<br><br>
</div>
</label>
I'm trying to add an overlay box at the bottom of a textarea. Positioning the overlay box was easy, but now I want the textarea content to never overlap the overlay box.
My first approach was adding padding-bottom so that the text never reaches the bottom of the textarea, where the overlay box is placed. However, as I type, the text will go under it. Also, scrolling up will cause the same undesired behavior.
Edit:
In response to some of the answers that partially solve my issue. I'm trying to make the textarea look as native as possible, so border color changing on focus would be necessary as well.
.container {
position: relative;
width: 110px;
}
textarea {
width: 100%;
height: 50px;
resize: none;
}
texarea.with-padding {
padding-bottom: 1em;
}
span {
position: absolute;
bottom: 5px;
width: 100%;
height: 1em;
background: rgba(255,0,0,0.5);
}
<div class="container">
<textarea name="" id="">I want this to never go under the red box.</textarea>
<span></span>
</div>
<div class="container">
<textarea class="with-padding" name="" id="">I tried with padding-bottom, but it doesn't work either.</textarea>
<span></span>
</div>
You can use a <div> container (which holds your textarea and overlay) as a fake border and remove the border of textarea. Just as shown in the snippet below:
$('textarea').on('focus', function() {
$('.textarea-holder').css('border-color', 'rgba(255, 0, 0, 0.5)');
});
$('textarea').on('blur', function() {
$('.textarea-holder').css('border-color', '#333');
});
.textarea-holder {
border: 1px solid #333;
display: inline-block;
}
.textarea-holder textarea {
display: block;
resize: none;
border: none;
}
textarea:focus {
outline: none;
}
.textarea-holder .overlay {
width: 100%;
height: 20px;
background: rgba(255, 0, 0, 0.5);
}
body {
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textarea-holder">
<textarea rows="6"></textarea>
<div class="overlay"></div>
</div>
Hope this helps!
You can simply add a bottom-border: 1em to the textarea to imitate the span element.
Here is a working example: http://codepen.io/anon/pen/woKyvy#anon-login
.container {
position: relative;
width: 200px;
}
textarea {
width: 100%;
height: 50px;
border-bottom: 1em solid rgba(255,0,0,0.5);
}
<div class="container">
<textarea>Try typing. The cursor will never end up under the red line.</textarea>
</div>
So I went ahead and wrote it down:
Removed the border and reset some styles of textarea
Added the fake border to the container and removed the positioning of the span and made it a block element.
See code below:
.container {
position: relative;
width: 110px;
border: 1px solid;
}
textarea {
width: 100%;
height: 50px;
resize: none;
border:none;
outline:none;
padding: 0;
}
.container span {
display:block;
width: 100%;
height: 1em;
background: rgba(255, 0, 0, 0.5);
}
<div class="container">
<textarea name="" id="">I want this to never go under the red box.</textarea>
<span></span>
</div>
I finally found a solution to this riddle thanks to Saurav Rastogi's and eyetea's answers. Both were almost perfect, but failed to make the textarea have its border highlighted on focus. I've managed to keep this behavior using outline.
I think both approaches are useful as they allow for two different border highlight on focus. One leaving the overlay outside, using a div wrapper strategy, and the one leaving it inside, using a very thick border-bottom.
/* Inner border on focus solution */
.textarea-wrapper {
border: 1px solid gray;
display: inline-block;
}
.textarea-wrapper textarea {
display: block;
border: none;
}
.textarea-wrapper textarea:focus {
outline: 1px solid green;
outline-offset: 0;
}
.textarea-wrapper .overlay {
width: 100%;
height: 20px;
background: rgba(255, 0, 0, 0.5);
}
/* Outer border on focus solution */
textarea.bottom-padded {
border-bottom: 21px solid rgba(255,0,0,0.5);
outline: 1px solid gray;
outline-offset: -1px;
}
textarea.bottom-padded:focus {
outline-color: green !important;
}
<div class="textarea-wrapper">
<textarea rows="3">Inner border on focus</textarea>
<div class="overlay"></div>
</div>
<textarea rows="3" class="bottom-padded">Outer border on focus</textarea>
I have a DIV container. inside it, I have a button. I want the button to be used to change the DIV's position attributes. I want the button click to shift the entire container to the left.
I have to do this without any scripting; only CSS and HTML.
is this possible?
perhaps with buttonclick:active{stuff}?
You can use the checkbox hack
#move-div {
display: none;
}
#move-div:checked + .movable {
left: -50px;
}
.movable {
position: relative;
background-color: #FF0000;
padding: 10px;
}
.button {
display: inline-block;
padding: 5px;
background-color: #FFF;
border-radius: 5px;
color: #000;
box-shadow: 3px 3px 5px 3px #AAA;
}
<input id="move-div" type="checkbox">
<div class="movable">
<label class="button" for="move-div">Move the div</label>
</div>