1[I tried to change the z-index of pagination to 0 it didnt't work]
Here is the link to my codesandbox:
Please check the last select dropdown, it's going behind pagination.
https://codesandbox.io/s/jolly-chandrasekhar-uim6k
React-select exposes a menuPortalTarget prop, that lets you portal the select menu to a dom node of your choosing.
To target body :
<ReactSelect
options={[
{ value: "one", label: "One" },
{ value: "two", label: "Two" },
{ value: "three", label: "Three" }
]}
menuPortalTarget={document.body}
/>
CodeSandbox Link : https://codesandbox.io/s/blissful-cerf-wqtto
Related
I'm trying to load a JPG image from my local folder in my react-native application.
The image is stored inside assets folder which I''m trying to render inside Image tag
Here's my JSON object
{
title: 'Device 2',
image: '../assets/imgs/device_default.jpg',
cta: 'View device',
mac: '1234-xxxx-xxxx-5678'
},
Here's my code for the same
<Block flex style={imgContainer}>
<Image source={{uri: item.image}} style={imageStyles} />
</Block>
here item contains the props value. I can iterate other values like title and mac
but not able to render the image.
Can anyone help me on this??
JSON
title: 'Device 2',
src : require('../assets/imgs/device_default.jpg'),
cta: 'View device',
mac: '1234-xxxx-xxxx-5678'
},
HTML
<Block flex style={imgContainer}>
<Image source={item.src} style={imageStyles} />
</Block>
Got the exact solution here
dynamic paths in require are not currently supported.The only allowed way to refer to an image in the bundle is to literally write require('name-of-the-asset') in the source.
you need to add require for image in your json.Check below example
const Profiles=[
{
"id" : "1",
"name" : "Peter Parker",
"src" : require('../images/user1.png'),
"age":"70",
},
{
"id" : "2",
"name" : "Barack Obama",
"src" : require('../images/user2.png'),
"age":"19",
},
{
"id" : "3",
"name" : "Hilary Clinton",
"src" : require('../images/user3.png'),
"age":"50",
}
]
export default Profiles;
I'm trying to get a react-select's multi-select component to submit the selected values as an array of strings but it's coming out as an array of {label, value} objects.
The structure of the objects I will be passing into react-select via react-final-form's Field component is like this:
[
{ val: "first-value", display: "First Value" },
{ val: "second-value", display: "Second Value" },
{val: "third-value", display: "Third Value"
];
Passing the prop getOptionLabel={option => option.display} is able to change the option labels to the display key given by the objects.
However doing the same thing for getOptionValue still gives me the entire {val, display} object when submitted. e.g. selecting the first item and submitting the form would get me [{val: "first-value", display: "First Value" }] when I only want ["first-value"]
I'm not too sure if it's something I need to solve on react-final-form or on react-select
import React from "react";
import { Field } from "react-final-form";
import { Form } from "react-final-form";
import Select from "react-select";
const data = [{ val: "1", display: "123" }, { val: "2", display: "321" }];
const Test2: React.FC<any> = () => {
return (
<Form
onSubmit={values => console.log(values)}
showErrorModal={showErrorModal}
setShowErrorModal={setShowErrorModal}
>
{() => (
<>
<Field
name="test"
component={MultiSelect}
label={"Multi Select test"}
placeholder="Please Select..."
options={data}
getOptionLabel={option => `${option.display}`}
getOptionValue={option => `${option.val}`}
/>
<SubmitButton btnTxt="next" />
</>
)}
</Form>
);
};
export default Test2;
When submitting, the message I get on the console is
[{"val": "1", "display": "123"}, {"val": "2", "display": "321"}]
whereas the result I'm hoping for is
["1","2"]
getOptionLabel & getOptionValue are only for viewing purpose.
When we get the selected value, it will give you the complete object as we provided array of object to options.
So the result of,
onSubmit={values => console.log(values)}
is correct, which is [{"val": "1", "display": "123"}, {"val": "2", "display": "321"}]
You need to further work on this result to get your desired result as,
onSubmit={values => console.log(values.map(data=>data.val))}
Is there a way to know when a multiselect dropdown is collapsed? I have a multiselect dropdown as show here:
On unselecting all options, the dropdown still remains expanded as shown in the above image. On clicking somewhere else in the screen outside dropdown, it collapses. I need to perform some actions (for example, display a message) when dropdown collapses. Is there a way to know when a multiselect dropdown is collapsed?
I was able to use onBlur instead. But, I need to click outside Dropdown twice in order to print the message.
<Dropdown
options={[
{ key: 'A', text: 'Option a' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c' }
]}
multiSelect={true}
onBlur={this.onFilterDropDownDismiss}
/>
private onFilterDropDownDismiss = (): void => {
console.log("Dismissed");
}
But, I need to display the message on one click outside. Please let me know if there are any suggestions to fix this.
IDropdownProps.onDismiss event could be utilized for that matter:
Callback issues when the options callout is dismissed
<Dropdown
options={[
{ key: 'A', text: 'Option a' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c' }
]}
multiSelect={true}
onDismiss={this.onFilterDropDownDismiss}
/>
private onFilterDropDownDismiss = (): void => {
console.log("Dismissed");
}
Here is a demo for your reference
I have just like website, side menu. which is different menu items, I want to display if click one tab then display related information in the next view. if again click next button display in same view. only change button view is same.
Here more clear of these images.
How to do this in sencha, I am very new in sencha. Thank you advance.
You will want to use a Card layout for the main body. See the docs here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.layout.Card
For the side navigation, you can use simple components that change the active item of the card layout using listeners on the elements of the components (for example, use singletap event for the element: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dom.Element-event-singletap).
items: [{
items: [
{
html: 'Student',
listeners: {
initialize: function(cmp) {
cmp.element.on('singletap', function() {
Ext.getCmp('myCardLayout').setActiveItem(1);
}
}
}
},
{
html: 'Teacher',
listeners: {
initialize: function(cmp) {
cmp.element.on('singletap', function() {
Ext.getCmp('myCardLayout').setActiveItem(2);
}
}
}
}
]
},
{
id: 'myCardLayout',
layout: 'card',
items: [
{
//student panel
},
{
//teacher panel
}
]
}]
Note that this is pretty sloppy code (it is not MVC, it uses Ext.getCmp, etc), but it is just intended to give you the concept of what should work for you here.
I have two questions regarding component layout using Sencha Touch 2:
How can you right align text in a container?
How can you concatenate different bits of dynamic data intermixed with static data into a component that needs to line wrap?
I have a view that I want to render like this:
Where the "Seen:" text is static and right aligned, and the text on the right is a concatenated string with 3 dynamic pieces of text and two pieces of static text.
I have something that works, but it doesn't feel right.
xtype:'container',
layout:{
type:'hbox'
},
items:[
{
xtype:'container',
flex:1,
layout:{
type:'hbox'
},
items:[
{
xtype:'spacer',
layout:'fill'
},
{
xtype:'label',
layout:'fit',
html:'Seen:'
}
]
},
{
xtype:'label',
name:'contentLabel',
flex:5,
html:'[BUILD A STRING AND SET THE HTML HERE]'
}
]
Right-aligning
So to right-align the text, I basically used an hbox container with a spacer component on the left and a label on the right. There's got to be an easier way.
Concatenating
I am able to build the string that I want to place on the right, but I'd rather have multiple labels that I can map one-to-one with my model. It doesn't feel like MVC for me to have to write code to concatenate strings.
I tried breaking apart the right side into an hbox, but there were problems with line wrapping. Each label wants to render itself individually, so if there were wrapping, it would happen within its own container.
Are there easier ways of doing what I am attempting?
Right aligning: it can be done with the text-align CSS property. In the example below I use the style property for simplicity, but using the cls property would be more flexible - it adds a CSS class to the component, so you can style it in the .sass file.
Concatenating: you can use the standard join() Javascript function. It concatenates all elements of an array into a string using the given separator. In my example dynamic1 and dynamic2 are variables.
So the result code:
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
flex: 1,
html: 'Seen:',
style: 'text-align:right'
},
{
xtype: 'container',
flex: 5,
html: ['static1', 'static2', dynamic1, 'static3', dynamic2].join('')
}
]
EDIT
You can also use the tpl property to define a template that renders data property. You can update it programatically calling container.setData()
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
flex: 1,
html: 'Seen:',
style: 'text-align:right'
},
{
xtype: 'container',
flex: 5,
data: {
name: 'Harry Potter',
day: 'Saturday',
date: 'October 21, 2011'
},
tpl: [
'{name} on {day} {date}'
]
}
]