Skip to content

Text of options cut on one device but we cannot replicate ourselves #279

@kitkline

Description

@kitkline

Hi there

We have an odd issue! The dropdown looks great on all platforms we test on - but we have one user who captures the issue shown in the screenshot. We are unable to replicate on any device - we can get the same issue by reducing itemPadding but pushing that value up in the hope it cures it for that one device would make the items really far apart on the list for the rest of our users

The device in question is: Samsung Galaxy Active4 Pro 10.1" 128GB 5G Tablet (which we don't have access via AWS Cloud to test against)

Any suggestions or advice? Code snippet follows screenshot....

image

Code:

render() {
return (
<Dropdown
value={this.state.value}
style={this.props.style}
data={this.props.data}
baseColor={this.props.baseColor}
textColor={this.props.textColor}
itemColor="grey"
selectedItemColor="#337ab7"
itemPadding={10}
fontSize={14}
itemTextStyle={{fontFamily: 'OpenSans-SemiBold'}}
pickerStyle={{
backgroundColor: this.props.backgroundColor,
borderRadius: ScaleElement.scaleElement(4),
}}
rippleOpacity={0}
inputContainerStyle={{
marginLeft: 10,
marginRight: 10,
marginBottom: 10,
borderBottomWidth: 1.3,
borderBottomColor: '#788691',
paddingLeft: 0,
}}
labelHeight={5}
onChangeText={value => this.executeCallback(value)}
itemCount={this.props.itemCount}
disabled={this.props.disabled}
/>
);
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions