I want to add different styles in both mapped data. I use library antd for the dropdown, and I have default style for dropdown which is radius: 8px but for this dropdown, I need to style it a bit different, and I have mapped my dropdown
index.js
<DropdownGroup
label="test"
dropdowns={[
{
options: [],
componentProps: {
className: "w-full",
onChange: (e) => {
alert("asd");
},
},
},
{
options: [],
componentProps: {
className: "w-full",
onChange: (e) => {
alert("asd2");
},
},
},
]}
>
</DropdownGroup>
component.js
<div classname="dropdown-group">
{dropdowns &&
dropdowns.map((e, idx) => {
return (
<Dropdown
key={idx}
label={e.label}
componentProps={e.componentProps}
value={e.value}
options={e.options}
/>
);
}
</div>
dropdown.less
.dropdown-group{
display: flex;
.ant-select-selector:first-child{
border-top-right-radius: 0px ;
}
}
and the result like this
enter image description here
What I'm trying to do is, how do I style
border-top-right-radius: 0px; border-bottom-right-radius: 0px;
just for the first dropdown
I have tried to use :first-child and it seems not right.
Any advice is appreciated, Thank you
Have you tried this:
dropdown.less
.dropdown-group {
display: flex;
&:first-child {
border-top-right-radius: 0px ;
}
}
or just add
.dropdown-group:first-child {
border-top-right-radius: 0px;
}
Either way is to add pseudo class :first-child in the parent element to effect the first child of it.
Related
I have struggled the whole day to create a centered carousel with react-alice-carousel library and the results are those. Link to the library here
Basically I achieve the results showcased on the gif which were fulfilling enough for me but the fact that the focused image (the one on the left) is not centered is bugging me a lot. I have tried overwriting certain CSS properties but the results were not great (carousel item disappears if I try absolute positioning). My question is - is there a certain algorithm I can add to my logic so that the centered image would be in the middle of the carousel always? (2nd item in array of 3, 3rd item in array of 5, 4th item in an array of 7 and etc.) and if such algorithm does not exist how can I achieve to make my carousel centered-oriented.
Sandbox: https://codesandbox.io/s/happy-lichterman-knwbce?file=/src/App.js
Targeted tile (plays the role of the product in my gif) is marketed in red color
Also mostly my carousel in the project:
// Carousel helper properties / functions
const responsive = {
2000: {
items: 11,
},
1200: {
items: 5,
},
800: {
items: 3,
},
0: {
items: 1,
},
};
const handleDragStart = (e: any) => e.preventDefault();
const items = products.map((product, index) => (
<img
key={product._id}
className={selectedIndex === index ? "focusedImage" : "shownImage"}
onDragStart={handleDragStart}
style={{ height: "150px", width: "150px" }}
src={product.image}
alt='Product that is being sold on this page'
/>
));
return (
<main>
<div className='details__wrapper'>
<AliceCarousel
activeIndex={selectedIndex}
mouseTracking
responsive={responsive}
items={items}
infinite
controlsStrategy={"default"}
autoPlayStrategy='all'
autoPlayInterval={1000}
disableDotsControls
disableButtonsControls
keyboardNavigation
onSlideChanged={(e: EventObject) => {
setSelectedIndex(e.item);
setSelectedProduct(products[e.item]);
}}
/>
As seen all of the images that are seen by the user already have classes "shown" or "focused" image
And my SASS:
.alice-carousel {
&__wrapper {
& .alice-carousel__stage {
&-item {
z-index: 0 !important;
& .shownImage {
opacity: 0.5;
margin: 0 auto;
grid-area: image;
display: block;
border: 2px solid;
border-radius: 50%;
height: 20rem !important;
width: 20rem !important;
}
&.__target {
z-index: 1 !important;
.focusedImage {
opacity: 1 !important;
}
}
}
}
}
}
Mostly classes already listed in the documentation on GitHub.
I am trying to make my navbar and I want to display both react-selects in one single row so I did this
Everything was working with vanilla select but adding the react-select breaks my styling
Navbar.js
import React, { useState } from "react";
import classes from "./Navbar.module.css";
import { useDispatch } from "react-redux";
import { selectAction } from "../../../store/actions/actions";
import Logo from "../../../images/BB_S5_excl_namelab_c.jpg";
import Select from 'react-select';
const CharacterOptions = [
{ value: '-----------', label: '-----------' },
{ value: 'Get character by id', label: 'Get character by id' },
{ value: 'Get character by category', label: 'Get character by category' },
{ value: 'Get random character', label: 'Get random character' },
{ value: 'Search character by name', label: 'Search character by name' },
];
const QuoteOptions = [
{ value: '-----------', label: '-----------' },
{ value: 'Get quote by id', label: 'Get quote by id' },
{ value: 'Get quotes by series', label: 'Get quotes by series' },
{ value: 'Get a random quote', label: 'Get a random quote' },
{ value: 'Get quote by author', label: 'Get quote by author' },
{ value: 'Get a random quote by author', label: 'Get a random quote by author' },
];
const Navbar = (props) => {
const dispatch = useDispatch();
const [selectedCharacter, setSelectedCharacter] = useState(false);
const [selectedQuote, setSelectedQuote] = useState(false);
const dropDownCharacterSelected = (value) => {
if (value !== "-----------") {
setSelectedCharacter(true);
dispatch(selectAction(value.value));
} else {
dropDownCharacterDeSelected(value.value);
dispatch(selectAction(null));
}
};
const dropDownCharacterDeSelected = () => {
setSelectedCharacter(false);
};
const dropDownQuoteSelected = (value) => {
if (value !== "-----------") {
setSelectedQuote(true);
dispatch(selectAction(value.value));
} else {
dropDownQuoteDeSelected(value.value);
dispatch(selectAction(null));
}
};
const dropDownQuoteDeSelected = () => {
setSelectedQuote(false);
};
return (
<nav className={classes.Navbar}>
<img src={Logo} alt="Logo" width="100" height="60" />
<div>
<ul>
<li>
<label>Characters</label>
<Select
disabled={selectedQuote}
onChange={dropDownCharacterSelected}
options={CharacterOptions}
/>
</li>
<li>
<label>Quotes</label>
<Select
disabled={selectedCharacter}
onChange={dropDownQuoteSelected}
options={QuoteOptions}
/>
</li>
</ul>
</div>
</nav>
);
};
export default Navbar;
Navbar.module.css
.Navbar{
display: flex;
height: 52px;
box-sizing: content-box;
background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
padding: 10px;
justify-content: center;
align-items: center;
}
.Navbar div ul {
display: flex;
}
.Navbar ul li {
display: flex;
list-style: none;
}
.Navbar label {
width: 100px;
border-radius:8px;
margin:10px;
background-color: lightgrey;
color:darkgreen;
font-weight: bold;
font-size: 20px;
padding: 10px;
}
Edit
Cant increase width of react-select
Here is my Codesandbox URL for your reference
https://codesandbox.io/s/youthful-gauss-r1d8o
You can achieve that by using flexbox to align your items in a row:
.Navbar div ul {
width: 100%;
display: flex; /* use flexbox to align the inputs on same row */
}
.Navbar ul li {
display: flex; /* use flexbox to align the labels on same row than the inputs */
align-items: center; /* align the items vertically */
list-style: none;
}
.Navbar ul li input {
min-width: 100px; /* specify react-select component's width */
}
Adding display: flex, will show both component in the same row:
.Navbar div ul {
...
display: flex;
...
}
I'm using Material-UI and building a timeline. My code is as follows:
<Timeline align="right" className={classes.monthlyContainer}>
<TimelineItem >
<TimelineSeparator className={classes.timelineSeparator}>
<TimelineDot className={classes.timelineDot} />
<TimelineConnector className={classes.timelineConnector} />
</TimelineSeparator>
{(data.map(url =>
<TimelineContent className={classes.memsImageContainer}>
<img
className={classes.memsImage}
src={url}
alt="MEMs"
/>
</TimelineContent>
))}
</TimelineItem>
</Timeline>
When I render the webpage, the Material-UI timeline keeps creating a .MuiTimelineItem-missingOppositeContent:before element which is shifting the layout of my timeline to the left.
When I inspect the element, this is what I see:
<li class="MuiTimelineItem-root MuiTimelineItem-alignRightMuiTimelineItem-missingOppositeContent">
<div class="MuiTimelineSeparator-root makeStyles-timelineSeparator-4">
<span class="MuiTimelineDot-root makeStyles-timelineDot-5 MuiTimelineDot-defaultGrey">
</span>
<span class="MuiTimelineConnector-root makeStyles-timelineConnector-6">
</span>
</div>
</li>
When I inspect the styles, this is what I have:
.MuiTimelineItem-missingOppositeContent:before {
flex: 1;
content: "";
padding: 6px 16px;
padding-left: 0px;
padding-right: 0px;
I have recreated it in codesandbox here
How can I remove this element?
The definition of the default styles for the missingOppositeContent element is as follows:
/* Styles applied to the root element if no there isn't TimelineOppositeContent provided. */
missingOppositeContent: {
'&:before': {
content: '""',
flex: 1,
padding: '6px 16px',
},
},
You can override the default styles using the same structure. Overriding this in the theme would look like the following:
const Theme = createMuiTheme({
overrides: {
MuiTimelineItem: {
missingOppositeContent: {
"&:before": {
display: "none"
}
}
}
}
});
You can also do this on a case-by-case basis (in case you have other situations in your code where you want the missing-opposite-content styling) using withStyles:
const TimelineItem = withStyles({
missingOppositeContent: {
"&:before": {
display: "none"
}
}
})(MuiTimelineItem);
You won't believe that you just need to add the <TimelineOppositeContent> component and set display property as 'none'. And it will be solved.
I am trying to style a React-Bootstrap form so that a few lists of checkboxes have properly outstanding headlines. I want the text "Frontend" "backend" "databases" etc to have a padding of about 10-20 pixels.
How it looks now:
This is not simple HTML/CSS, but what I would like to do is the equivalent of simply adding "padding: 10px" to the headlines "Frontend Frameworks, Frontend, Backend, Databases".
The first thing I tried was adding a CSS stylesheet using className="formLabel" with the style for .formLabel being: padding: 10px. But that doesn't actually push the other elements away as with regular CSS. Instead I get this:
(Border added to make it easier to see what's going on)
I tried adding style={{ paddingBottom: "10px" }} as well in the style of this thread. I also read the React Bootstrap Forms docs page but found no mention of how to style a <Form.Label> element.
So suppose you want to replicate what I've done in those images, see the code below:
// this code should nicely generate a "Homepage" component to use in React
import React, { Component } from "react";
import { Form } from "react-bootstrap";
import "./home.css";
class Homepage extends Component {
state = {
checked: [
{ vue: false, category: "framework" },
{ angular: false, category: "framework" },
{ react: false, category: "framework" },
{ html: false, category: "frontend" },
{ css: false, category: "frontend" },
{ javascript: false, category: "frontend" },
{ python: false, category: "backend" },
{ SQLite: false, category: "database" }
]
};
render() {
return (
// will generate the "framework" and "frontend" checkboxes
<Form>
<Form.Label className="formLabel">
Frontend Frameworks
</Form.Label>
{this.state.checked.map((obj, index) => {
let box = null;
if (obj.category === "framework") {
box = (
<Form.Check
inline
label={Object.keys(obj)[0]} // returns values like "vue"
type={"checkbox"}
id={index}
/>
);
}
return box;
})}
</Form>
<Form>
<Form.Label className="formLabel">Frontend</Form.Label>
{this.state.checked.map((obj, index) => {
let box = null;
if (obj.category === "frontend") {
box = (
<Form.Check
inline
label={Object.keys(obj)[0]} // returns values like "vue", "react"
type={"checkbox"}
id={index}
/>
);
}
return box;
})}
</Form>
)
}
export default Homepage;
// home.css
.formLabel {
font-size: 18px;
margin-bottom: 15px;
}
.testLabel {
font-size: 18px;
padding: 10px;
border: 1px solid black;
}
Try to add "display" to "formLabel" in your stylesheet.
It should be something like this:
.formLabel {
font-size: 18px;
margin-bottom: 15px;
padding: 20px;
display: inline-block;
}
I had done one quiz application, But i want to add some animations
like fadein/fade-out, when click the prev/next button. Can any one
help me do the same. something need to change the css something need to change the CSS something need to change the css something need to change the css?
* {}
body {}
.question {
width: 70%;
margin: 0 auto;
height: auto;
display: block;
background: #eeeeee;
}
.question h1 {
text-align: center;
padding-top: 30px;
color: #666666;
}
.question h2 {
width: 100%;
font-size: 22px;
color: #0c1e5c;
padding: 1% 3% 0% 3%;
}
.question ul:nth-child(odd) {
background: #d0dff6;
width: 30%;
padding: 8px;
margin: 1% 9%;
display: inline-block;
color: #0c1e5c;
}
.question ul:nth-child(even) {
background: #d0dff6;
width: 30%;
padding: 8px;
margin: 1% 9%;
display: inline-block;
color: #0c1e5c;
}
.button {
text-align: center;
margin: 1% 0;
}
.btn {
background: #8bf8a7;
padding: 5px;
}
<html ng-app="quiz">
<head>
<meta charset="utf-8">
<title>Basic Quiz</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="quizCtrl">
<div class="question">
<h1>QUIZ APPLICATION</h1>
<h2>{{questions.question}}</h2>
<ul ng-repeat="option in questions.options">
<li style="list-style:none">
<input type="{{buttonType}}">{{option.text}}</li>
</ul>
</div>
<div class="button">
<input type="button" value="previous" class="btn" ng-show="isPrevious" ng-click="previousQuestion()">
<input type="button" value="next" class="btn" ng-show="isNext" ng-click="nextQuestion()">
</div>
</body>
<script>
var app = angular.module("quiz", [])
app.controller("quizCtrl", function($scope) {
$scope.data = [{
question: "1)Which of the following selector matches a element based on its id?",
type: "single",
options: [{
text: "The Id Selector"
},
{
text: "The Universal Selector"
},
{
text: "The Descendant Selector"
},
{
text: "The Class Selector"
}
]
},
{
question: "2)Which of the following defines a measurement as a percentage relative to another value, typically an enclosing element?",
type: "multiple",
options: [{
text: "%"
},
{
text: "cm"
},
{
text: "percentage"
},
{
text: "ex"
}
]
},
{
question: "3)Which of the following property is used to set the background color of an element?",
type: "single",
options: [{
text: "background-color"
},
{
text: "background-image"
},
{
text: "background-repeat"
},
{
text: "background-position"
}
]
},
{
question: "4)Which of the following is a true about CSS style overriding?",
type: "multiple",
options: [{
text: "Any inline style sheet takes highest priority. So, it will override any rule defined in tags or rules defined in any external style sheet file."
},
{
text: "Any rule defined in tags will override rules defined in any external style sheet file."
},
{
text: "Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable."
}
]
}
];
$scope.index = 0;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isPrevious = false;
$scope.isNext = true;
$scope.nextQuestion = function() {
if ($scope.index < 3) {
$scope.index = $scope.index + 1;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isPrevious = true;
if ($scope.index == 3) {
$scope.isNext = false;
}
} else {
// disble next botton logic
$scope.isNext = false;
}
}
$scope.previousQuestion = function() {
if ($scope.index > 0) {
$scope.index = $scope.index - 1;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isNext = true;
if ($scope.index == 0) {
$scope.isPrevious = false;
}
} else {
// disble next botton logic
$scope.isPrevious = false;
}
}
});
</script>
</html>
Check out ng-animate, basically what it does is it adds classes that you can style accordingly on showing dom and on hiding dom, like this:
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity:1;
}
And to use that functionality you would have to use ng-repeat in your html, something like this:
<div ng-repeat="item in data" ng-if="index === $index">
//Your question html here
</div>
Where data and index are $scope.data and $scope.index.
That would be the angular way of doing things.
However I see that you are using the same div, only changing scope data, that would require you to set
transition: 1s all ease;
On the question class, and then to do something like this in javascript:
angular.element('.question').css('opacity', 0);
$timeout(function() {
// change question..
angular.element('.question').css('opacity', 1);
}, 1000);