Hello is there a way to set a custom width in my react select button?
I would like it if I can use bootstrap to do that so it can be responsive but if not its okay.
Here is my code:
import Select, { components } from 'react-select';
export default class AccomodationType extends Component {
render() {
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
return(
<div>
<Select
options= {options}
isClearable
isSearchable
name="color"
/>
</div>
)
}
}
I just used bootstrap sizing for it!
Here is what I added:
<Select
className="w-25 p-3"
options= {options}
isClearable
isSearchable
name="color"
/>
Related
I would like to show the preview of the selected image busing Angular, as of now if we click all images are selected, can any one suggest me how to show preview of the selected one and if we select another image previously selected image should be unselect and display new image.
public images: Array<object> = [
{
src: 'https://picsum.photos/250/250/?image=110',
description: 'Notte in hotel di lusso',
price: 250
},
{
src: 'https://picsum.photos/250/250/?image=58',
description: 'Escursione alla scoperta degli animali dell\'isola',
price: 160
}
];
HTML:
<div class="image__container" [ngClass]="{ 'selected': selected }">
<img class="image" [src]="item.src">
<div
class="image__description"
(click)="selected = !selected"
>
<div class="image__description--content">
<div class="image__description--price">
{{ item.price }}
</div>
</div>
</div>
Stackblitz
Thanks for the detailed question, You can check the below stackblitz, I needed to just add a parent property that tracks the currently selected row, then emit an event from the child which updates the latest value from the child. Then if the changes do not show up, we can call this.cdr.detectChanges() to trigger change detection manually. Please check the below code and let me know if any questions.
import {
Component,
ChangeDetectionStrategy,
ChangeDetectorRef,
ViewChildren,
QueryList,
} from '#angular/core';
import { GridItemComponent } from '../grid-item/grid-item.component';
#Component({
selector: 'aer-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GridComponent {
currentlySelected;
#ViewChildren('gridItem') gridItems: QueryList<GridItemComponent>;
public images: Array<object> = [
{
src: 'https://picsum.photos/250/250/?image=110',
description: 'Notte in hotel di lusso',
price: 250,
},
{
src: 'https://picsum.photos/250/250/?image=58',
description: "Escursione alla scoperta degli animali dell'isola",
price: 160,
},
{
src: 'https://picsum.photos/250/250/?image=76',
description: 'Gita in bicicletta',
price: 50,
},
{
src: 'https://picsum.photos/250/250/?image=61',
description: "Visita di una delle cittadine dell'isola",
price: 25,
},
{
src: 'https://picsum.photos/250/250/?image=64',
description: 'Gita in motoscafo',
price: 85,
},
{
src: 'https://picsum.photos/250/250/?image=71',
description: 'Biglietto aereo',
price: 500,
},
{
src: 'https://picsum.photos/250/250/?image=65',
description: 'Cocktail sulla spiaggia',
price: 5,
},
];
constructor(private cdr: ChangeDetectorRef) {}
updateCurrentlySelected(value: number) {
this.currentlySelected = value;
this.cdr.markForCheck();
// not needed below line
// this.gridItems.forEach((item) => item.detectChanges());
}
}
html
<section class="grid-container">
<ng-container *ngFor="let image of images; let index = index">
<aer-grid-item
#gridItem
[item]="image"
[index]="index"
[currentlySelected]="currentlySelected"
(emitChange)="updateCurrentlySelected($event)"
></aer-grid-item>
</ng-container>
</section>
<!-- Preview of the selected image-->
<br />
<br />
<section>
*ngIf="images && images[currentlySelected] && images[currentlySelected].src"
Preview:
<img [src]="images[currentlySelected].src" />
stackblitz
I'm new to materialUI. This is how I'm using a simple input field which is outlined and has an icon. But as my background is dark, I need the color of the icon, the border and the text in a lighter color, e.g. grey.
What is the materialUI way to do this?
import Input from '#material-ui/core/OutlinedInput'
import InputAdornment from '#material-ui/core/InputAdornment'
import AccountCircle from '#material-ui/icons/AccountCircle'
<Input
name='username'
type='text'
placeholder='Username'
startAdornment={
<InputAdornment position='start'>
<AccountCircle />
</InputAdornment>
}
/>
One way you could achieve this is with the following code:
import React from "react";
import Input from "#material-ui/core/OutlinedInput";
import InputAdornment from "#material-ui/core/InputAdornment";
import AccountCircle from "#material-ui/icons/AccountCircle";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(4),
backgroundColor: theme.palette.common.black
},
input: {
color: theme.palette.common.white,
"&:hover $notchedOutline": {
borderColor: theme.palette.grey[400]
},
"&$focused $notchedOutline": {
borderColor: theme.palette.grey[400]
},
},
notchedOutline: {
borderColor: theme.palette.grey[400]
},
focused: {},
adornedStart: {
color: theme.palette.grey[400]
}
}));
export default function Demo() {
const classes = useStyles();
return (
<div className={classes.root}>
<Input
classes={{
root: classes.input,
notchedOutline: classes.notchedOutline,
focused: classes.focused,
adornedStart: classes.adornedStart
}}
name="username"
type="text"
placeholder="Username"
startAdornment={
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
}
/>
</div>
);
}
CodeSandbox
In my example I've used Material UI's own styling solution. But there are also a lot of other ways to solve this. You could also use styled components for example.
Material UI has a great documentation. You can read a lot about styling solutions on this page. You could also change the default theme which changes the styles for all input fields. Or you could use the dark version of the Material UI theme which is already built in.
I tried using the Ant Design TreeSelect component withing a Modal, but when opening that TreeSelect the values of the tree is hidden behind the Modal.
I tried using a higher value of z-index but it didn't help! Any ideas?
import React from "react";
import ReactDOM from "react-dom";
import { version } from "antd";
import { TreeSelect } from "antd";
import {
Button,
ComposedModal,
ModalBody,
ModalFooter,
ModalHeader
} from "carbon-components-react";
import "antd/dist/antd.css";
import "./index.css";
const treeData = [
{
title: "Node1",
value: "0-0",
key: "0-0",
children: [
{
title: "Child Node1",
value: "0-0-1",
key: "0-0-1"
},
{
title: "Child Node2",
value: "0-0-2",
key: "0-0-2"
}
]
},
{
title: "Node2",
value: "0-1",
key: "0-1"
}
];
function treeSelectChange(e, value) {
console.log(e);
//e.preventDefault()
}
ReactDOM.render(
<div className="App">
<h1>antd version: {version}</h1>
{/* <p>
Please <b>fork</b> this sandbox to reproduce your issue.
</p> */}
<ComposedModal
open={true}
// onClose={(e) => this.closeRuleEditorModal(e) }
className=""
>
<ModalHeader title="Rule Editor" className="HeaderToolbar White" />
<ModalBody>
<TreeSelect
// className="on-front"
style={{
width: "100%"
}}
// value={element.Value}
dropdownStyle={{
maxHeight: 400,
overflow: "auto",
zIndex: 10000
// position: "absolute"
}}
treeData={treeData}
// placeholder={element.Name}
treeDefaultExpandAll
onChange={treeSelectChange}
/>
</ModalBody>
<ModalFooter>
<Button
kind="secondary"
size="small"
// onClick={(e) => this.closeRuleEditorModal(e) }
>
Cancel
</Button>
<Button
kind="primary"
id="btnSave"
size="small"
// onClick={() => this.fabricateCustomizedProject()}
>
Save
</Button>
</ModalFooter>
</ComposedModal>
</div>,
document.getElementById("root")
);
To reproduce issue, you may also use
https://codesandbox.io/s/antd-reproduction-template-ci559
Update
It worked for me when I used a z-index with value 10000 (have no idea why I had to set so high value, seems one of the css that I used for other components -Modal- is using a big z-index inside).
dropdownStyle={{ maxHeight: 400, overflow: 'auto',zIndex:"100000" }}
It works for me
I'm sure there's a really simple solution to this but I can't seem to find it, and I haven't found the question asked here already.
I'm trying to align a layout widget (area) so that when another widget is added it appears to the right of the first widget and not below.
I was hoping i could sort this with flexbox and the artistContainer class but it doesn't seem to be possible.
Dev tools and desired outcome
home.html
<section class="bodysect--dark" id="artists">
<h2 class="body__heading">Artists</h2>
<div class="artistContainer">
{{
apos.area(data.page, 'artist', {
widgets: {
artist: {}
}
})
}}
</div>
</section>
Widget.html
<div class="artist">
<div class="artistImage">
{{ apos.singleton(data.widget, 'areaImage', 'apostrophe-images', {
widgets: {
'apostrophe-images': {}
}
}) }}
</div>
<div class="artistName">
{{ apos.singleton(data.widget, 'singletonName', 'apostrophe-rich-text', {
widgets: {
'apostrophe-rich-text': {}
}
}) }}
</div>
<div class="artistBio">
{{ apos.singleton(data.widget, 'singletonBio', 'apostrophe-rich-text', {
widgets: {
'apostrophe-rich-text': {}
}
}) }}
</div>
</div>
widget index.js
module.exports = {
extend: 'apostrophe-widgets',
label: 'Artist',
contextualOnly: true,
addFields: [
{
name: 'artistImage',
type: 'singleton',
label: 'Image Area',
required: true
},
{
name: 'artistName',
type: 'singleton',
label: 'Name Area',
required: true
},
{
name: 'artistBio',
type: 'singleton',
label: 'Bio Area',
required: true
},
]
};
Thanks in advance!
There is nothing preventing you from lining up horizontally, however, to maintain the proper flex contexts, you'll need to apply styles to apostrophe-generated markup instead of just your project level classes. Here is some sample code I just demo'd
.horizontal-area {
.apos-area-widgets, // proper context for logged-in user
.apos-area { // proper context for logged-out user
display: flex;
}
.apos-area-widget-wrapper {
flex-grow: 1;
flex-basis: 0;
}
}
http://g.recordit.co/IlOPYKRUo0.gif
You might want to provide additional UI changes to adjust the horizontal Add Content line within the horizontal area scope.
I'm trying to build a vue.js front-end and the design is calling for 100% width tiles with a dynamic background image that will be passed along the rest of the content to the page. I already have the payload passing to the component that renders each tile, but I need to render the background image for each of the tiles. I also need to mention that the images are actually 3 images for each tile that need to render for each of our 3 breakpoints. So far I was able to pass one image by using :style="'background-image: url(' + backgroundImage + ')'" but this only serves one image per tile. My question is, what would be the best way to pass all 3 images per tile and render them correctly?
I have heard online that I should just use srcset and pass all 3 to an <img> tag, and make that image the background by using CSS, but that just seems unorthodox.
Is there a more elegant way to deal with responsive background images in reusable components in vue.js?
Home Page
<template>
<div class="Home">
<HomePageTile v-for="tile in tiles" :key="tile.title" :tile-title="tile.title" :tile-desc="tile.description" :tile-type="tile.position" :background-image="tile.backgroundImage"/>
</div>
</template>
<script>
import HomePageTile from '#/components/HomePageTile'
import tileImage1 from '#/assets/optimized/image1.jpg'
import tileImage2 from '#/assets/optimized/image2.jpg'
import tileImage3 from '#/assets/optimized/image3.jpg'
import tileImage4 from '#/assets/optimized/image4.jpg'
export default {
name: 'Home',
components: {
HomePageTile: HomePageTile
},
data () {
return {
tiles: [
{
title: 'Title 1',
description: 'Content 1',
position: 'right',
backgroundImage: tileImage1
}, {
title: 'Title 2',
description: 'Content 2',
position: 'right',
backgroundImage: tileImage2
}, {
title: 'Title 3',
description: 'Content 3',
position: 'right',
backgroundImage: tileImage3
}, {
title: 'Title 4',
description: 'Content 4',
position: 'right',
backgroundImage: tileImage4
}
]
}
}
}
</script>
Tile Component
<template>
<div :class="tilePosition(tileType)" :style="'background-image: url(' + backgroundImage + ')'">
<template v-if="tileType">
<div class="home-page-tile--container home-page-tile--container__with-desc">
<h2 class="home-page-tile--container--title">{{ tileTitle }}</h2>
<p class="home-page-tile--container--description">{{ tileDesc }}</p>
</div>
<div class="home-page-tile--call-to-action" v-if="callToAction">
<p class="home-page-tile--call-to-action--text">{{ callToAction.text }}</p>
<Button class="home-page-tile--call-to-action--button" :button-route="callToAction.buttonPath" :button-text="callToAction.buttonText" :button-style="callToAction.buttonStyle" />
</div>
</template>
<template v-else>
<div class="home-page-tile--container">
<h2 class="home-page-tile--container--title">{{ tileTitle }}</h2>
<Button :button-route="buttonPath" :button-text="buttonText" button-style="pill"/>
</div>
</template>
</div>
</template>
<script>
import Button from './Button'
export default {
name: 'HomePageTile',
props: {
tileType: String,
tileTitle: String,
tileDesc: String,
backgroundImage: String,
buttonText: String,
buttonPath: String,
callToAction: Object
},
components: {
Button: Button
},
data () {
return {
tilePosition: function (el) {
if (el) {
return 'home-page-tile home-page-tile__' + el
} else {
return 'home-page-tile'
}
}
}
}
}
</script>