I'm developing a dropdown, where you click or focus the input, a white container should display at the bottom of the input, the problem is that, the focus is not working and i don't know why ( i hate css :/ )
So this is the code
This is the structure
<NavbartPart1SearchBar>
<input type="text" placeholder="Buscar en Facebook" maxLength={100} />
{/* Dropdown */}
<NavbarPart1Dropdown> </NavbarPart1Dropdown>
</NavbartPart1SearchBar>
export const NavbarPart1Dropdown = styles.div`
display: none;
position: absolute;
width: 100%;
height: 20vh;
background: white;
`;
export const NavbartPart1SearchBar = styles.div`
position: relative;
input{
width: 255px;
font-size: 1.53rem;
font-weight: 300;
padding: 1.23rem 1.75rem;
border-radius: 2.1rem;
background: #F0F2F5;
&:focus ${NavbarPart1Dropdown} {
display: flex;
}
}
`;
So as you can see, input has a focus event, when i focus on it, i add display flex to the other container, but it won't work, do you see any problems with my code?
Know let me show you how it should look
Do you see the black part ? i want that to appear when focus, so, if you can help me, you're cool !
You can select the next sibling element with + in CSS. So the following should work:
input:focus + ${NavbarPart1Dropdown} { display: block; }
Related
Hy everyone.
I'm facing an issue that makes me lose my mind.
On iOS 15 or 16, Safari, with the setting "Single tab" enabled (meaning you have the Safari searchbar on top), when I focus my input, a weird padding animation gets triggered.
Here is my code, the most simplified possible.
The stack:
react
scss
export const SearchBusinessPage = ({whatInputContent, onWhatChange}) => {
return (
<div className={classes({ inputContainer: true })}>
<input
autoComplete={'off'}
className={classes({
input: true
})}
type='text'
value={whatInputContent || ''}
onChange={e => onWhatChange(e?.currentTarget?.value || '')}
/>
</div>
);
}
and the CSS
.inputContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
height: 100vh;
width: 100%;
}
.input {
flex: 1;
color: var(--grey-700);
font: var(--regular) var(--body-3);
&::placeholder {
color: var(--grey-500);
opacity: 1;
}
&:focus {
&::placeholder {
opacity: 0.5;
}
}
}
As you can see, nothing crazy in my code.
But I can't get rid of that iOS behavior that, on input focus, wants to add a padding top or I don't know what. I tried many thing but couldn't find what can I do. Any idea around here ?
Well, if anyone has the same trouble, the solution I found was, actually, pretty straight forward. You can use this CSS pretty high in the DOM. The solution comes with unintended side effects, but it works anyway.
That blocks Safari UI from moving. So, no UI move, no problem 🤷
height: 100%;
max-height: 100%;
min-height: 100%;
width: 100%;
position: absolute;
overflow: scroll;
Edit: Apologies, forgot to add the sandbox to tinker: https://codesandbox.io/s/inspiring-wing-tekl08
I'm having an issue with my CSS. To clarify, the reason I want to do this is because I want my text to have a mix-blend-mode: difference on h1 within a media query, and after researching on here and other forums I've concluded that it's only possible if the background image which the text blends with is inserted via CSS instead of an <img/> in my React Component. If this is possible in any other way and I'm going about this wrong, feel free to give me a better option.
For some reason, the background image that I've inserted (see code below) is placing itself in front of h1. I've tried setting a z-index: 1 on the image and position: relative - z-index:something>1 on the text but it doesn't seem to work. Same goes for the <Nav/> tag that can be seen in the component - it ends up hidden behind the image.
Component:
const PageHeader = () => {
return (
<motion.div
id="header"
variants={imgFade}
initial="hidden"
animate="show"
className="bg-image"
>
<div className="header-container">
<div className="title-container">
<motion.h1
variants={textAnimate(0.7)}
initial="hidden"
animate="show"
>
FNAME
</motion.h1>
</div>
<br />
<div className="title-container">
<motion.h1
variants={textAnimate(0.8)}
initial="hidden"
animate="show"
>
SNAME
</motion.h1>
</div>
<Nav />
</div>
</motion.div>
);
};
export default PageHeader;
CSS:
.bg-image {
background: url("img/compressed/Website\ Cover_Open_NoBG.png") no-repeat
bottom right;
background-size: contain;
width: 100%;
height: 100%;
float: right;
}
.header-container {
margin-left: 100px;
margin-top: 200px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.title-container {
overflow: hidden;
}
h1 {
font-family: "Lato";
font-size: 5rem;
font-weight: 300;
vertical-align: middle;
text-align: left;
mix-blend-mode: color;
pointer-events: none;
}
Apologies if it's blaringly obvious - again if someone can find an alternative to do the code below then I would much rather follow through with that:
#media screen and (max-width: 1200px) {
.h1 {
mix-blend-mode: difference;
}
Thanks!
UPDATE: This has been solved by just putting position: relative; z-index: 2 on .header-container. Perfect example of stopping coding after 3am or else you get blinders on and can't see the obvious answer.
In case anyone can help regarding mix-blend-mode: difference do let me know.
UPDATE 2: Second issue solved! Had to put a background color of white on the background property and also put the mix-blend: mode on .header-container - Text had to be changed to white and kept on difference blend even on a white backdrop.
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
I'm trying to build that behavior illustrated by the following GIF on mouse hover.
The user can make the red selection by using the Arrow keys, but on mouse hover, I want to hide the red selection and show only the mouse hover green selection.
Code Sandbox Example
It is working, so far.
But somehow it breaks when I try to use the component selector: ${S.UserLi}, which is the name of my styled component for each li. It only works when I select general li items, like you can see in the following code (Sandbox link above).
QUESTION
How can I make it work using my component selector ${S.UserLi} ?
S.MentionDiv = styled.div`
max-width: 200px;
height : auto;
overflow: hidden;
background-color: lightblue;
padding: 5px;
box-sizing: border-box;
ul {
margin: 0;
}
&:hover {
li { background-color: inherit; } /* THIS WORKS */
/* ${S.UserLi} { background-color: inherit; } */ /*THIS DOESN'T*/
}
`;
S.UserLi = styled.li`
background-color: ${props => props.selected ? 'red' : 'inherit'};
&&:hover { /* Added two && to make it higher priority over hover on MentionDiv */
background-color:lightgreen;
user-select: none;
}
`;
This is the main component:
function App() {
return (
<S.MentionDiv>
<S.UserLi>
User 1
</S.UserLi>
<S.UserLi
selected={true}
>
User 2
</S.UserLi>
<S.UserLi>
User 3
</S.UserLi>
</S.MentionDiv>
);
}
So I have a hover effect on a link.
I know that if you click something on mobile, it activates the :hover attribute.
But, it will also follow the link.
I want to know if there is some way I can have the hover effect appear on mobile and pc alike without having to click and follow the link.
I guess you can use touchstart event
Please see How do I simulate a hover with a touch in touch enabled browsers?
You could refer the code snippet over here
http://codepen.io/mickeykay/pen/wiLno
HTML
<h3>Test me in mobile!</h3>
<p>Tap the image to see the :hover effect. Tap anywhere else inside this iframe to un-hover.</p>
<span class="container">
<img src="http://www.mightyminnow.com/wp-content/uploads/2013/06/tech_tip_icon.jpg" />
<span class="details">Details go here</span>
</span>
CSS
.container {
position: relative;
}
.container .details {
display: inline-block;
position: absolute;
top: 100%;
padding: 10px 15px;
z-index: 1;
display: none;
width: 200px;
background: #222;
color: #FFF;
}
.container:hover .details,
.container .details:hover {
display: block;
}
/* jQuery enabled behavior for mobile */
.touch .container.no-hover .details {
display: none !important;
}
Jquery
// Add no-touch class to body for mobile touch events and toggle hover class on elements that need it
if ("ontouchstart" in document.documentElement) {
document.documentElement.className += " touch";
}
// Add and remove no-hover class to <li>'s for mobile hover events
jQuery('.touch .container').each(function() {
var div = jQuery(this);
div.hover(function() {
div.removeClass('no-hover');
});
jQuery('*').not(div).bind('click', function() {
div.addClass('no-hover');
});
});