In Angular application I am making Filters and Header row element sticky. I am using HostListener and windowscroll to achieve this functionality. The problem I am facing is Header and filter content is overlapped with the results when user scroll down.
I need help to fix this overlap.
Link to demo - https://screenrec.com/share/XKtIZji2lY
FILTERS Code
html
<div class="filters-data" [ngClass]="{'mat-elevation-z5' : true, 'sticky' : isSticky}">
<div class="im-results">
<div>
<strong>{{ Amazon Data }} </strong> match
</div>
</div>
<div class="filters-data-result">
<app-filters-data-result *ngFor="let item of filters; let i = index" [item]="item" (onRemoved)="remove(item)">
</app-filters-data-result>
</div>
</div>
.css
.mat-elevation-z5 {
position: relative;
}
.sticky {
position: fixed;
top: 100px;
}
div.filters-data {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
align-content: flex-start;
padding: 20px 0;
.im-results {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: center;
font-size: 18px;
}
.filters-data-result {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
margin-right: 8px;
}
}
.ts
isSticky: boolean = false;
#HostListener('window:scroll', ['$event'])
checkScroll() {
this.isSticky = window.pageYOffset >= 10;
}
HEADER CODE
html
<div class="header-top bottom-border mb-10" [ngClass]="{'mat-elevation-z5' : true, 'sticky' : isSticky }">
<div class="am-ctnr rows-header">
<div class="im-header-product">
<div> Products</div>
</div>
<div class="im-number">
<div> Number</div>
</div>
<div class="shippment-number">
<div>Shippment Number</div>
</div>
<div class="origin">
<div>
Origin
</div>
</div>
<div class="size">
<div>
Size
</div>
</div>
</div>
</div>
.css
.header-top{
.im-error-notification-div{
overflow:hidden;
.im-error-notification-inner{
float:right;
}
}
&.bottom-border {
border-bottom: 1px solid am-colors.$ash-grey;
}
.mb-10 {
margin-bottom: 10px;
}
.am-ctnr {
display: flex;
padding: 5px 16px 10px;
align-items: baseline;
flex-wrap: wrap;
#media #{am-responsive-breakpoints.$screen-xs-sm-md}{
display: none;
}
&.rows-header {
font-family: am-fonts.$am-font-family-bold;
font-size: 11px;
font-weight: bold;
justify-content: space-between;
.im-header-product{
padding: 5px;
width: 30%;
}
.im-header-catalog{
padding: 5px;
width: 10%;
}
.im-header-lot-number{
padding: 5px;
width: 10%;
}
.im-header-origin{
padding: 5px;
width: 10%;
}
.im-header-unit-size{
padding: 5px;
width: 5%;
min-width: 60px;
}
.im-header-item-price{
padding: 5px;
width: 10%;
}
}
}
}
Related
I have a popup where I show notifications. The user can delete notifications at any time. The day the notification arrives and the delete button will appear one after the other. No matter what I did, I couldn't.
How can I show these two divs under each other, as can be seen in the marked area in the picture?
<div className="notificationlist__container only-desktop">
{props.notification.notificationList.map((e) => {
return (
<div className="notificationlist__item">
<div className="notificationlist__info">
<div className="notificationlist__content">
Lorem, ipsum.
</div>
<div className="notificationlist__detail">
<Link to="/profil">
<div>Profile</div>
<AS.KeyboardArrowRightIcon />
</Link>
</div>
</div>
<div className="notificationlist__time">Today
<div className="delete__button">
<AS.IconButton >
<AS.DeleteIcon />
</AS.IconButton>
</div>
</div>
</div>
);
})}
</div>
.notificationlist__container.only-desktop {
font-size: 1.2rem;
// padding-right: 2em;
max-height: 400px;
overflow: auto;
.notificationlist__item {
padding: 0.5em 0;
border-bottom: 1px solid #d1d1d1;
&:last-of-type {
border-bottom: none;
}
display: flex;
justify-content: space-between;
align-items: flex-start;
.notificationlist__info {
margin-right: 1em;
max-width: 400px;
.notificationlist__content {
color: gray;
}
.notificationlist__detail {
margin-top: 1em;
color: var(--palette-blue-300);
display: flex;
align-items: center;
font-size: 1.1rem;
font-weight: 600;
svg {
font-size: 1.5rem !important;
}
a {
display: contents;
}
}
}
.notificationlist__time{
display: flex;
.delete__button {
float: left;
}
}
}
}
display: flex is putting divs next to each other. You can delete display: flex or just add flex-direction: column; to put them under each other. To center them horizontally add align-items: center;
You should move delete button out of notificationlist_time content, then it would be easy to manipulate it
<div className="notificationlist__right">
<div className="notificationlist__time">today</div>
<div className="delete__button">
<AS.IconButton >
<AS.DeleteIcon />
</AS.IconButton>
</div>
</div>
So since it would be two different blocks, you would have an ability to position them like you want.
I'm trying to make this component:
This is the component now :
Until now I succeeded to make with activeClassName the text to be colored blue when I'm on the right link. But I want also to have a point under the text every time I stay on that link ... I don;t know exact how to do that .
Below I will leave the code for you to understand what I did until now and what I suppose to do to make this work..
import { FC } from "react";
import { NavLink } from "react-router-dom";
// import observer from "mobx-react-lite"
import "./Navigation.css";
export const Navigation: FC = () => {
return (
<div className="nav">
<div className="logo">
<svg className="logo-image"></svg>
</div>
<div className="Center-links">
<ul className="pages">
<NavLink exact to="/" activeClassName="ceva" className="text">
<li className="row">Home</li>
</NavLink>
<NavLink to="/Bim" activeClassName="ceva" className="text">
<li className="row">Bim 2021</li>
</NavLink>
<NavLink to="/Regulations" activeClassName="ceva" className="text">
<li className="row">Regulations</li>
</NavLink>
<NavLink to="/History" activeClassName="ceva" className="text">
<li className="row">History</li>
</NavLink>
</ul>
</div>
<div className="Buttons-Right">
<h1>Button1</h1>
<h1>Button2</h1>
</div>
</div>
);
};
export default Navigation;
.logo-image {
mask: url("../assets/Images/logo.svg");
background-color: black;
width: 100px;
height: 65px;
margin: auto;
}
.nav {
height: 10vh;
width: 100%;
background: #6e68a7;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo {
height: 100%;
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.Center-links {
height: 100%;
width: 60%;
display: flex;
justify-content: space-around;
align-items: center;
}
.pages {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
width: 50%;
}
.Buttons-Right {
width: 20%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.ceva {
color: #33c9d3;
}
.text {
text-decoration: none;
}
.row {
list-style: none;
font-family: Poppins;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
}
You can do something like this:
li.row.active{
position:relative;
}
li.row.active::before{
content: ' ';
z-index: 999;
position: absolute;
bottom: 0;
right:50%;
width:4px;
height:4px;
background-color: red;
border-radius: 999px;
}
ul {
list-style: none;
}
li {
display: inline;
padding:5px;
}
<ul>
<li class="row active">
test 1
<li>
<li class="row">
test 2
<li>
<ul>
I want to change the div size when someone clicks the corresponding button. For example, clicking the small button will make the div width 30%, and clicking the medium button will make the div width 50%.
I found this Javascript: Change Div size on button click, but it's not working for me because I don't know his HTML structure, and he is using ID instead of class.
Below is my code. Please help me:
body {
display: flex;
flex-direction: column;
justify-content: center;
height: 300px;
}
.Button_Container {
display: flex;
flex-direction: row;
justify-content: center;
}
.Medium {
margin: 0 15px;
}
.Content_Container {
width: 100%;
height: 150px;
background-color: blue;
margin-top: 30px;
}
<div class="Button_Container">
<button class=">FULL" onclick="myFunction">FULL</button>
<button class="Medium" onclick="myFunction">Medium</button>
<button class="Small" onclick="myFunction">Small</button>
</div>
<div class="Content_Container"></div>
function myFunction(width){
var all = document.getElementsByClassName('Content_Container');
for (var i = 0; i < all.length; i++) {
all[i].style.width = width;
}
}
body {
display: flex;
flex-direction: column;
justify-content: center;
height: 300px;
}
.Button_Container {
display: flex;
flex-direction: row;
justify-content: center;
}
.Medium {
margin: 0 15px;
}
.Content_Container {
width: 100%;
height: 150px;
background-color: blue;
margin-top: 30px;
}
<div class="Button_Container">
<button class=">FULL" onclick="myFunction('100%')">FULL</button>
<button class="Medium" onclick="myFunction('70%')">Medium</button>
<button class="Small" onclick="myFunction('50%')">Small</button>
</div>
<div class="Content_Container"></div>
I need a Javascript while adds the class checkedNavbar when the checkbox is checked and to remove it when unchecked.
<div class="hamburger">
<input type="checkbox" id="check" onclick="EnableDisableNavbar"/>
<label for="check" class="checkButton">
<i class="fas fa-bars" style="font-size: 35px"></i>
</label>
</div>
I want to add a class while checked and remove it when unchecked.
Here's my css:
ul{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
z-index: 0;
right: 0;
background-color: #e54136;
}
ul li{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 15px 0;
}
ul li a{
font-size: 30px;
}
.checkedNavbar{
right: 100%;
}
Try like this:
function EnableDisableNavbar() {
document.querySelector(".hamburger").classList.toggle("checkedNavbar");
}
ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
z-index: 0;
right: 0;
background-color: #e54136;
}
ul li {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 15px 0;
}
ul li a {
font-size: 30px;
}
.checkedNavbar {
right: 100%;
}
/* Below added for demo only */
.hamburger {
background-color: yellow;
}
.checkedNavbar {
background-color: purple;
}
<div class="hamburger">
<input type="checkbox" id="check" onclick="EnableDisableNavbar()" />
<label for="check" class="checkButton">
<i class="fas fa-bars" style="font-size: 35px"></i>
</label>
</div>
Checkbox onclick attribute changed to EnableDisableNavbar()
The JavaScript classList.toggle() method can be used to add/remove the checkedNavbar class each time the checkbox is clicked.
An approach like this, which toggles a class, may be needed where the styling of the parent element of the checkbox changes, because in CSS that cannot be accessed using input:checked.
here is what my services page currently looks like:
So when you choose one of the blue radio buttons, it loads the green radio buttons which are sub options, clicking on a green sub option will show the information for that specific product/service.
As you can see when you select a categeory and then a service, it all works correct but I need to add an "active-radio-button" class to the ones that are currently selected.
Similar to a nav bar showing which page is currently active.
I've tried giving each radio button a $ref and then I loop through all the refs to see if they are checked, however it doesnt work, I can't even figure out how to print each ref to the console (although I can see them in the Vue developer console).
Here is the service page:
<template>
<div class="services">
<div class="header services__header">
<h1 :class="$mq">Services</h1>
</div>
<div class="services__services-container">
<div class="select-wrapper">
<div
class="services__services-container__category-selection"
:key="`category-${index}`"
v-for="(item, index) in this.JSON"
>
<!-- GENERATE CATEGORIES -->
<input
v-model="currentCategory"
#change="UncheckRadio"
type="radio"
class="services__services-container__category-selection__category"
:class="$mq"
:value="item"
:ref="item.name"
/>
<label :for="item">{{ item.name }}</label>
</div>
</div>
<!-- GENERATE SERVICES -->
<div class="services__services-container__service-selection" v-if="currentCategory != null">
<div class="select-wrapper">
<div
class="services__services-container__service-selection__service"
:key="`option-${index}`"
:class="$mq"
v-for="(option, index) in currentCategory.options"
>
<input
type="radio"
class="services__services-container__service-selection__service__wrapper"
:class="$mq"
:value="option"
v-model="currentService"
:ref="option.optionName"
/>
<label :for="option">{{ option.optionName }}</label>
</div>
</div>
</div>
<!-- GENERATE DESCRIPTIONS -->
<div class="services__services-container__product-description" v-if="currentService != ''">
<div class="services__services-container__product-description__description" :class="$mq">
<div :class="$mq">
<img :src="currentService.images" alt />
<p>{{ currentService.description }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import services from "#/JSON/services.json";
export default {
name: "Services",
data: function() {
return {
JSON: [],
currentCategory: "",
currentService: ""
};
},
created: function() {
//TO TEST
this.JSON = services.services;
},
methods: {
UncheckRadio: function() {
this.currentService = "";
console.log("kek");
for (const ref in this.refs) {
console.log(ref.key);
}
}
}
};
</script>
<style lang="scss">
#import "#/scss/variables.scss";
#import "#/scss/button.scss";
#import "#/scss/header.scss";
#import "#/scss/input.scss";
.services {
width: 100%;
height: auto;
display: grid;
grid-template-rows: 15vh auto auto auto;
&__services-container {
//FLEX
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
//
padding: 2rem;
&__category-selection {
//FLEX
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
//
position: relative;
padding: 1rem;
cursor: pointer;
& input {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
}
& label {
cursor: pointer;
color: $colour-blue;
}
}
&__service-selection {
&__service {
//FLEX
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
//
position: relative;
padding: 1rem;
cursor: pointer;
& input {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
}
& label {
cursor: pointer;
color: $colour-green;
}
}
}
/* For IE10 */
select::-ms-expand {
display: none;
}
&__product-description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
#include green-gradient;
padding: 2rem;
border-radius: 1.5rem;
&__description {
& img {
margin-bottom: 1rem;
height: 10rem;
width: 10rem;
object-fit: cover;
}
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
}
}
}
.select-wrapper {
//FLEX
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
//
border-radius: 1.5rem;
position: relative;
width: auto;
height: auto;
margin-bottom: 1rem;
}
.select-icon {
font-size: 1rem;
color: $white;
position: absolute;
right: 0.5rem;
pointer-events: none;
}
.transition {
transition: all 0.25s linear;
}
.active-radio-button {
border-bottom: 0.1rem solid black;
}
</style>