Hello, i have a dropdown but im not able to have what i show in the image. the image is what i designed in figma.
And i need to make it like that. But I dont know how to do it! I tried hard to many things and searched a lot and I did not found a way to make the dropdown start in the input place and to have some “arrow buttons” on dropdown to scroll…
This is what I have developed:
Updates, I already have the menu in right place, but I still getting difficulties to insert the bottom arrow when is possible to scroll bottom. when user can scroll top a border with arrow at top should appear too.
Im using react-select
hello and welcome to fcc forum 
share codes / codes snippet and things you have tried, that way it gets easier to offer any help when possible
happy coding
This is what I have. But the arrows just need to appear when user can scroll up or down. if we are in the start of the menu for example, the top arrow should not appear. the same thing for bottom. And if we recieve a small list that dont need to scroll, the arrows dont need to be visible too…
Code I have for now:
const YearSelection = ({ year_list }) => {
const [selectedYear, setSelectedYear] = useState({
value: year_list[0],
label: year_list[0],
});
const handleChange = (selectedOption) => {
setSelectedYear(selectedOption);
};
// CSS for the Select component
const customStyles = {
control: (provided) => ({
…provided,
width: “100px”,
fontSize: “25px”,
fontWeight: “bold”,
textAlign: “center”,
borderRadius: “20px”,
border: “2px solid #40454B40”,
alignItems: “center”,
paddingLeft: “0.2em”,
paddingRight: “0.2em”,
cursor: “pointer”,
backgroundColor: “white”,
“&:hover”: {
backgroundColor: “#40454B20”,
},
boxShadow: “none”, //remove a focus border azul quando click
}),
indicatorSeparator: () => ({ display: “none” }),
dropdownIndicator: () => ({ display: “none” }),
option: (provided, state) => ({
…provided,
fontSize: state.isSelected ? “18px” : “14px”,
backgroundColor: “transparent”,
fontWeight: “bold”,
color: state.isSelected ? “#113678” : “#40454B80”, // muda a cor normal no menu (se selecionado fica o primeiro #113678)
transition: “font-size 0.4s”,
“&:hover”: {
color: state.isSelected ? “#113678” : “#40454B”, // muda a cor no hover (se selecionado fica o primeiro #113678)
fontSize: state.isSelected ? “18px” : “16px”,
},
textAlign: “center”,
cursor: “pointer”,
}),
singleValue: (provided) => ({
…provided,
color: “#113678”,
}),
menu: (provided) => ({
…provided,
marginTop: “-38px”,
borderRadius: “20px”,
position: “absolute”,
animation: “fadeInDown 0.3s ease”,
borderTop: “20px solid #40454B10”,
“:before”: {
content: ‘“︿”’,
position: “absolute”,
top: “-23px”,
left: “50%”,
transform: “translateX(-50%)”,
fontSize: “24px”,
color: “#40454B40”,
},
borderBottom: “20px solid #40454B10”,
“:after”: {
zIndex: 999,
content: ‘“﹀”’,
position: “absolute”,
bottom: “-25px”,
left: “50%”,
transform: “translateX(-50%)”,
fontSize: “24px”,
color: “#40454B40”,
},
}),
menuList: (provided) => ({
…provided,
maxHeight: “180px”,
overflowY: “auto”,
zIndex: 1,
animation: “fadeIn 0.7s ease”,
“&::-webkit-scrollbar”: {
width: “0px”,
},
}),
};
return (
{year_title}
export default YearSelection;
maybe try using “clientY” to register that how far are they from that scrolling point and that “arrow” showuld show up then…
unless you have tried that already, then what was its outcome there, happy coding
I tried several things but nothing worked… I have this variable “canScrollUp”, what can I do in the dropdown of the Select to and and show it when user is able to scroll up ? Im using react-select
import React, { useState} from “react”;
import Select from “react-select”;
import “./YearSelection.css”;
const YearSelection = ({ year_title, year_list }) => {
const [selectedYear, setSelectedYear] = useState({
value: year_list[0],
label: year_list[0],
});
// CSS for the Select component
const customStyles = {
control: (provided) => ({
…provided,
width: “100px”,
fontSize: “25px”,
fontWeight: “bold”,
textAlign: “center”,
borderRadius: “20px”,
border: “2px solid #40454B40”,
alignItems: “center”,
paddingLeft: “0.2em”,
paddingRight: “0.2em”,
cursor: “pointer”,
backgroundColor: “white”,
“&:hover”: {
backgroundColor: “#40454B20”,
},
boxShadow: “none”, //remove a focus border azul quando click
}),
indicatorSeparator: () => ({ display: “none” }),
dropdownIndicator: () => ({ display: “none” }),
option: (provided, state) => ({
…provided,
fontSize: state.isSelected ? “18px” : “14px”,
backgroundColor: “transparent”,
fontWeight: “bold”,
color: state.isSelected ? “#113678” : “#40454B80”, // muda a cor normal no menu (se selecionado fica o primeiro #113678)
transition: “font-size 0.4s”,
“&:hover”: {
color: state.isSelected ? “#113678” : “#40454B”, // muda a cor no hover (se selecionado fica o primeiro #113678)
fontSize: state.isSelected ? “18px” : “16px”,
},
textAlign: “center”,
cursor: “pointer”,
}),
singleValue: (provided) => ({
…provided,
color: “#113678”,
}),
menu: (provided) => ({
…provided,
marginTop: “-38px”,
borderRadius: “20px”,
position: “absolute”,
animation: “fadeInDown 0.3s ease”,
borderTop: canScrollUp ? “20px solid #40454B10” : “none”,
“:before”: canScrollUp
? {
content: ‘“︿”’,
position: “absolute”,
top: “-23px”,
left: “50%”,
transform: “translateX(-50%)”,
fontSize: “24px”,
color: “#40454B40”,
}
: {},
borderBottom: “20px solid #40454B10”,
“:after”: {
zIndex: 999,
content: ‘“﹀”’,
position: “absolute”,
bottom: “-25px”,
left: “50%”,
transform: “translateX(-50%)”,
fontSize: “24px”,
color: “#40454B40”,
},
}),
menuList: (provided) => ({
…provided,
maxHeight: “180px”,
overflowY: “auto”,
zIndex: 1,
animation: “fadeIn 0.7s ease”,
“&::-webkit-scrollbar”: {
width: “0px”,
},
}),
};
return (
{year_title}
export default YearSelection;
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.