I have a problem with CSS or somethings
I want to click at the profile to show a popup "logout" but it doesn't show anything.
At first, I thought there is a mistake at my CSS, but I searched many times for this solution but it still doesn't work.
import React,{useRef,useEffect} from 'react'
const profileActionRef = useRef(null)
const toggleProfileActions = () => profileActionRef.current.classList.toggle('show__popup')
<div className='profile'>
<motion.img
whileTap={{scale:1.2}}
src={userlogo}
alt=''
onClick={toggleProfileActions}
/>
<div className="profile__actions"
ref={profileActionRef}
onClick={toggleProfileActions}>
{ currentUser ? (<span onClick={logout} >Logout</span> ):( <div>
<Link to='/signup'>Sigup</Link>
<Link to='/login'>Login</Link>
</div>)
}
</div>
</div>
my CSS
.nav__icons .profile .profile__actions{
position: absolute;
top: 98%;
left: 0;
width: 150px;
z-index: 10;
padding: 15px;
display: flex;
align-items: center;
flex-direction: column;
background: var(--card-bg-01);
line-height: 30px;
cursor: pointer;
display: none;
}
.show__popup{
display: block;
}
I have no idea how to fix this. If you can tell me how to fix this it will helpful.
It's not a react issue, it's a css issue: your first css selector is more precise, it has a weight of 3 (https://specificity.keegan.st/), but the .show__popup has a weight of only 1 since it's only a single class. So it's apply before the first selector and the display is erased.
To fix that you can add more weight to your second selector:
.nav__icons .profile .profile__actions .show__popup
Related
I have a simple lightbox component that uses a material-ui modal and has a style sheet. The component and the css look like this.
Lightbox.tsx
import { Modal } from '#material-ui/core';
import { CloseOutlined } from '#material-ui/icons';
import styles from './Lightbox.module.css';
export default function Lightbox(props: any) {
return (
<Modal
className={styles.modal}
open={props.open}
onClose={props.handleClose}
>
<div className={styles.imageContainer}>
<div className={styles.imageToolbar}>
<CloseOutlined
aria-aria-label={props.closeButtonMessage}
className={styles.toolbarButton}
data-cy="lightbox-close"
fontSize="inherit"
onClick={props.handleClose}
role="button"
/>
</div>
<img src={props.url} className={styles.image} title={props.name} />
</div>
</Modal>
);
}
Lightbox.module.css
.modal {
z-index: 2147483640 !important;
}
.imageContainer {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.image {
max-width: 90%;
max-height: 90%;
}
.imageToolbar {
right: 10px;
top: 10px;
position: absolute;
width: 100%;
font-size: 40px;
}
.toolbarButton {
color: #cccc;
cursor: pointer;
float: right;
}
.toolbarButton:hover {
color: #ffff;
}
The component is rendered inside another component like so:
<Lightbox
closeButtonMessage={formatMessage(closeMessageDescriptor)}
url={url}
name={name}
handleOpen={handleOpen}
handleClose={handleClose}
open={open}
/>
When the application is run, the class names are present on the elements however, the styles are missing.
Elements in debugger console: Rendered elements
Rendered CSS for the elements: Style not rendering for the class
What am I doing wrong?
Please note that I need to use CSS style sheet as mentioned in my example and not inline CSS styles.
Since I am new to react, I have tried looking at other components in the project I am currently working on. This method of using CSS style works for other components. Since I am new to React, any help is appreciated.
I am trying to make a custom dialog popup with PrimeVue < p-dialog >. But I can't seem to get around the CSS that comes with it; I want to use my own and just keep the functionality.
I haven't been able to find any resources online. I know I'm understanding something wrong but I don't know what.
Here's the documentation:
https://www.primefaces.org/primevue/#/dialog
This is my Vue code. I added a custom CSS class but it just comes out all wonky. So that's why I feel like I need to get it to ignore all the other code that comes with the PrimeVue library. It's just looking like the other p-dialogs within this file.
<p-dialog v-model:visible="confirmationDialog" :closable="false" class="delete-dialog">
<div>
<span>{{ $t('title') }}</span>
</div>
<div>
<span>{{ $t('body') }}</span>
</div>
<p-button
class="p-button-text"
#click="
confirmationDialog = !confirmationDialog;
"
>{{ $t('close') }}</p-button
>
<p-button
class="p-button-text"
#click="
confirmationDialog = !confirmationDialog;
delete();
"
>{{ $t('delete') }}</p-button
>
</p-dialog>
And this is the CSS
<style lang="scss">
.deletion-dialog {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 0px;
position: relative;
width: 312px;
height: 289px;
background: #ffdad4;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 28px;
.deletion-dialog-text {
padding: 0px;
background: #ffdad4;
}
}
.deletion-header {
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 0px;
position: relative;
width: 312px;
height: 289px;
}
</style>
Found this answer in the PrimeVue Discord.
In the styling section of the documentation, it has the built in css classes. I can access these for this specific p-dialog if used in my wrapper class as seen below:
.deletion-dialog {
...
...
.p-dialog-header {
...
...
}
}
I have written a simple navbar that has a scroll animation.
Example:
<div className={"nav active"}>
Here CSS on active is not working. Even if I write .active or nav.active in my CSS file, I have no result. In my code I have used a on scroll event listener so when I scroll down, the navbar appears black and when I go on the navbar, it disappears. But the problem is that CSS is working in nav, but not working in
active and as a result black color in active is not appearing.
const [show , handleshow]= useState(false);
const transitionNavBar = () => {
if (window.scroll > 100){
handleshow(true);
}else{
handleshow(false);
}
};
useEffect(() => {
window.addEventListener("scroll",transitionNavBar);
return () => window.removeEventListener("scroll", transitionNavBar);
}, []);
return (
<div className={`nav ${show && "active"}`}>
<div className="nav_contents">
<img className='nav_logo'
src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png"
alt=""
/>
<img className='nav_avatar' src="https://i.pinimg.com/originals/0d/dc/ca/0ddccae723d85a703b798a5e682c23c1.png"
alt=""
/>
</div>
</div>
)
}
.nav{
position: fixed;
top: 0;
padding: 20px;
width: 100%;
height: 30px;
z-index: 1;
}
.nav.active{
background-color: #111;
}
.nav_contents{
display: flex;
justify-content: space-between;
}
.nav_logo{
position: fixed;
top: 10px;
left: 0%;
width: 80px;
object-fit: contain;
padding-left: 20px;
cursor: pointer;
}
.nav_avatar{
position: fixed;
cursor: pointer;
right: 20px;
width: 30px;
height: 30px;
}
Instead of this
<div className={`nav ${show && "active"}`}>
Try this:
<div className={`nav ${show ? "active":""}`}>
I think you need to write your CSS in a seperate file, if you are not using styled components for example.
Write your CSS classes inside a seperate file and then import the css file inside your JSX/JS.
For example:
import "./navbar.css"
Edit: Sorry, just reread and noticed your nav is working.
As the other posts suggest, you would probably need to use a conditional operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
I don't know what was a problem but i uninstall ns install vs code again my issue was solved I really don't know how it worked but it worked.
I'm trying to customise the popup info window that appears when you click on a marker, but I can't get rid of the scrollbar that appears on the right in case the content overflows.
https://pasteboard.co/Ith8X2v.png (image was not loading when used the image template)
I've tried adding overflow: scroll too all the parent containers as it seems that's the only thing the was different (see this).
I've made a little clip with what kinda worked but not entirely.
https://streamable.com/guoei
Markers code:
<agm-marker *ngFor="let m of markers; let i = index"
(markerClick)="clickedMarker(m.label, i)"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label"
[markerDraggable]="m.draggable">
<agm-info-window>
<div class="popup-info-container">
<div class="popup-header-container">
<strong>InfoWindow content</strong>
</div>
<div class="popup-body-container">
<strong>InfoWindow content</strong>
</div>
</div>
</agm-info-window>
</agm-marker>
CSS code:
.popup-info-container {
height: 400px;
width: 300px;
background-color: red;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
&::-webkit-scrollbar {
display: none;
}
}
.agm-info-window-content {
overflow: scroll;
}
.popup-header-container {
height: 20%;
width: 95%;
background-color: blue;
}
.popup-body-container {
height: 75%;
width: 95%;
background-color:whitesmoke;
}
I want to get something like this:
where the scrollbar fadesout.
I've found a similar thing here How to edit css of child component imported from other module Angular 2+
Basically I had to override classes that angular was generating with ::ng-deep
::ng-deep .gm-style {
.gm-style-iw-d::-webkit-scrollbar {
display: none !important;
}
}
Thanks in advance for your help.
I will update this post with the solution because I think some people can have the same issue and after some search on the web I found no answer.
The problem
I use a modal component in a component included in my App.vue. Everything works except with the navbar because when i put the mouse in the window, the navbar become white and go over the black background of the modal.
You can see the front in the image below when the mouse is out.
// Unfortunatelly I need 10 reputations to add it.
To fix that I tried lot of things but nothing works right now. If I delete z-index:1 from the navbar the problem is fixed but if i put some font awesome content on my website, the navbar will appear behind.
The css
nav {
display: flex;
background-color: #FFFFFF;
height: 50px;
position: sticky;
top: 0px;
z-index: 1;
}
.modal-mask {
position: fixed;
top: 0;
left:0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal {
background-color: #FAFAFA;
display: flex;
flex-direction: column;
}
The App.vue
<template>
<div id="app">
<NavBar></NavBar>
<router-view/>
</div>
</template>
<script>
import NavBar from './components/layout/Navbar'
export default {
components: {
NavBar
},
}
</script>
The modal
<template>
<div class="modal-mask">
<div class="modal"
role="dialog">
<slot name="body">
No content
</slot>
</div>
</div>
</template>
<script>
export default {
name: 'modal',
methods: {
close() {
this.$emit('close');
},
},
};
</script>
z-index only works with position try to give position to .modal class relative or absolute