I am using React Native Navigation top tabs. I am having a issue with the text getting cut or wrap. Is there any way that I can style where all the tab names show correctly without text wrap
Set a width to the tabbar, like this
tabBarOptions: {
tabStyle: {
width: 'auto' //or put some other width which works for you
}}
Also consider using scrollable tabs or reducing font size.
Related
I have given a custom styling to my TextField mui component like below:
'& > * .MuiFilledInput-input': {
overflow: 'hidden',
textOverflow: 'ellipsis',
},
This is to show the ellipsis when the text is truncated inside TextField. This works fine but now I need to show a tooltip only when the text is truncated. So somehow I need to find out if the TextField used above styling or if the text was truncated. I do not want to use hard-coded length/width approach but instead find it out dynamically. Any ideas how to do it?
On Android (and possibly iOS, I haven't tested), there is a problem with scrolling text with a React Native Scrollview. I am attempting to create a text block component that flexes to fill the remaining space of the page with text rendered inside of it. That works.
My problem is that this text needs to be easily scrollable. In my application, I can not make minor scrolling adjustments to the text in this field. (Think about scrolling on Instagram, you can scroll up or down in very small gestures).
This text in the scrollview does not scroll unless you give it a very long and quick flick of the finger. It does scroll and it scrolls correctly functionality-wise, the user experience is just awful.
It's as if it doesn't get recognized as a scroll view unless you scroll it a massive amount.
This happens with normal text elements getting passed into props.children. I am just setting fontSize on the text elements so that the text is bigger. Right now the text font size is set to 60 so that I can test the scrolling functionality.
Here is my text block code:
const TextBlock = (props) => {
return (
<View style={{...props.style, ...styles.container}}>
<ScrollView style={styles.scrollView} contentContainerStyle={{flexGrow: 1}}>
{props.children}
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.whiteBackgroundColor,
paddingHorizontal: 18,
paddingVertical: 10,
borderRadius: 20,
width: '90%',
flex: 1
}
});
Any help on this would be greatly appreciated. I've tried putting a flex grow on the inner elements. I have tried wrapping the inside text in another view (both with and without flex attributes). I have tried removing the flex altogether.
Please let me know if there's some way to fix this.
I want a mini drawer on the left of my screen, like the example on the Material UI Documentation:
But in my case I want it to float over the content (like the variant="temporary" version of the component) when it opens, as currently it pushes the content.
If I handle the open prop to change the variant style dynamically it doesn't look very nice.
Is there any way of achieving this?
If you set the content's styling like this, it's position will not be effected by the drawer's state as you set its position to be absolute:
content: {
position: "absolute",
marginLeft: theme.spacing.unit * 7 + 1,
padding: theme.spacing.unit * 3
}
The Header text will ofcourse shift to the left when you open the drawer.
EDIT: I am going off of the codesanbox Material UI demo for the mini variant drawer here.
I'm learning how to style React components and use npm to import libraries that i can use to do different things. I have imported react-shadow-text and tried to implement a simple h1 with text shadow. When attempting to style it, all of my styles work but when I center the text within the component, the shadow does not center along with the text. If i do not center the text and i resize the browser. the shadow stays with the text as you would expect but as soon as you apply justify-content, text-align, or any centering property to the component, the text will center itself but the shadow remains to the left and the shadow does not stay in the center with the text and instead remains to the left during resizing, making itself further away from the text.
I have tried using flexbox centering and i've also tried without flex. I've also tried to style the component with different styling techniques such as css modules and inline styles. I'm sure it's something simple, but i can't really find anything on the issues specifically regarding this particular library without using native.
import React, { Component } from 'react';
import ShadowText from 'react-shadow-text';
import styles from '../Name.css'; //imported stylesheet working
import styled from 'styled-components';
//import styles from '../Name.css';
class Name extends Component {
render() {
return(
<ShadowText className="name" theme={{
shadowTextColor: 'Black',
shadowTextShadowColor: 'Black',
shadowTextShadowBlur: '6px',
shadowTextXTranslate: '0px',
shadowTextYTranslate: '15px',
textShadowOffset: '0px', //tried messing with this
shadowTextTransitionDuration: '0.4s',
shadowTextTransitionTiming: 'ease-in-out',
}}>
Larry Young
</ShadowText>
);
}
}
export default Name;
And CSS
.name {
font-size: 2.5em;
font-family: 'Cinzel';
width: 100vw;
height: 20vh;
text-align: center; //problem child. without this, text stays to the left
//but shadow attaches itself to text. When this is
//added, or justify content is added, text detaches
//from shadow effect. Positioning issue maybe?
}
I've tried using anchorShadow prop built in to the npm library and setting it to true and it just flips the text and the shadow and does the same thing, but the shadow stays in place and the text moves...I've also tried CSS Modules css.js as well and inline styles. I guess I could try using raw text-shadow css but it kind of defeats the purpose in learning this particular library. I assume lack of experience with React is what's biting me. Thanks everyone.
I have noticed that when the react-text-shadow library adds the shadow, it does so in a seperate div that is absolute positioned. If I take away the positioning in dev tools, the shadow leaps to the center. So i tried isolating that class in index.css in the create-react app environment and changed the position value. When doing so, it worked, until I tried to edit the shadow offset to line it up more precisely. As soon as I changed the properties to control shadowTranslateXorY and reload, it generates a new class for the shadow, which negates the positioning change I made in the master index.css file. For now, I will just use CSS text-shadow. Putting text-shadow into the css file for the component, importing it into the component, and referencing to it with className is working fine. Hopefully someone else knows a little bit more about this particular library. I can't seem to find much documentation about it, aside from what is on the NPM page when you install.
I am trying to get a result looking like this (picture taken from https://material.google.com/components/tabs.html#tabs-usage):
I don't want the tabs to take 100% of the width of the page, as it is by default with material-ui. Is it possible to do this with the implementation of material-ui ? I already played with the width of each tab using the style tab property, but the inkbare seems hardcoded to use percentages according to the id of the selected tab, and therefore doesn't underline properly the resized tabs. Is there a workaround?
There is an issue related to this problem https://github.com/callemall/material-ui/issues/1203
But yes, there is an easy workaround. (unfortunately it doesnt support diffrent widths across the tabs).
You can use the Tabs tabItemContainerStyle property to set the width of the tabs container (make it the width you want to each tab times the number of tabs).
Since the background color is setted on that element, you're gonna need to override the styles for two others Tabs properties (style and contentContainerStyle).
In this example Im setting the same color as my tabs in the style property (for the whole component) and setting the contentContainerStyle back to a white background.
You could use the classes properties as well..
Ex: (Imagine you have a blue toolbar)
<Tabs
tabItemContainerStyle={{width: '400px'}}
style={{background: 'blue'}}
contentContainerStyle={{background: '#FFF'}} >