Using import {dimension} from 'react-native' and flex:1 at the same time in css style and for some devices design got broken when there is input field present inside the js. CSS is so simple that's it should not be broken
MainContainer: {
height : Dimensions.get('window').height,
width : Dimensions.get('window').width,
backgroundColor: '#fff',
flex: 1
}
and moreover there is slight 1 px blank space for some android devices.
Earlier when I have started coding with react-native I have faced the same issue while using the same css style.
You should read the documentation first carefully to get idea about flex.
flex will define how your items are going to “fight” over the
available space along your primary axis. Most of the time you will
want your app container to be flex:1 to take all of the screen
height. Space will be divided according to each element flex property.
In the following example the red, yellow and the green views are all
children in the container view that got flex:1. The red view got
flex:1 , the yellow view got flex:2 and the green view got
flex:3 . 1+2+3=6 which means that red view will get 1/6 of the
space, the yellow 2/6 of the space and the red 3/6 of the space. I
think you got it…
To get more clear idea about the above lines please refer to this medium.com's post
And basically we don't use dimension while developing app using react-native .
MainContainer: {
height: '100%',
width: '100%',
backgroundColor: '#fff',
}
This will be enough to design the main container. Also If you are using Input field then I will suggest to use scrollView
I think My answer will help you.
Related
I've currently got a button module, which, based on an array it is given, generates a button with an Image, and Text. However, now that i started adding translations to the buttons, I noticed that some translations for more complex words, are overflowing out of the button, at an inconsistent way.
The bottom left is the standard/default text in English. There is some inconsistency that I've yet to sort out, but it's all style from my understand. I am still learning how styling buttons works.
All the other buttons show what happens when a different language is presented/selected/used. The buttons update the text when language is updated, so they are dynamically refreshed with new text.
Each button is generated like this:
return <button
key={buttonName}
disabled={disabledStatus}
style={this.props.buttonStyle}
onClick={this.handleButtonClick.bind(this, buttonLowerCase)
>
<img src={...} alt={buttonName}
/>
<span style={spacer}/> || This is just {width: '5px'} for seperation||
{buttonText}
</button>;
buttonStyle is passed down with following parameters from the module:
{
width: '100px',
margin: '5px',
height: '38px',
display: 'flex',
alignItems: "center",
justifyContent: "left",
};
what are possible solutions to this? Keeping in mind, that the buttons cannot grow to be a bigger size than they are currently.
I also do notice that spacer does not seem to be respected, if text is larger than given space, now that I look at it, but have no better solution for forming a bit of space from the text at this point.
If you absolutely need to force the content into the space of the button without increasing the button size dynamically to match the text length, here are some options:
Break the words. See: "word-break" css property.
Make the text smaller where needed.
I have cards to render in the grid list of material-ui. Each card has an image file at the top and some content in the remaining part, whenever there is a difference in content(text) card height changes. As far now I have tried most of the things to achieve the same height for each card, none of them worked. I am providing codesandbox link below.
working example of cards in grid list
Since your content area card (with the className "content") is to have fixed height for each card, you need to make sure the content-text is the same, or else you can give height to the content card like this :
content: {
height : "200px"
},
This would produce this as output :
However, here the height of the content card is hardcoded, so you need to make sure the content size accordingly matches.
In CardContent styling you should specify maxHeight and give it overflow. Something like:
<CardContent
style={{
paddingBottom: "0%",
maxHeight: "100px",
overflow: "auto"
}}>
I want my tooltip to be on the right of the elements on desktop, because it fits my design best. However this however raises an issue when working on a smaller screen. The bootstrap 3 documentation says it supports auto right placement, which should prefer the tooltip on the right and if that is impractical it will auto pick a side. I am using bootstrap 4 and I tried using that option, but it wont work.
Is there any way to achieve the same result in bootstrap 4?
If using 'right auto' doesn't work you could use a function to return the value based on screen size:
placement: function() {
return $(window).width() > 767 ? 'right' : 'auto';
}
This isn't a responsive solution as it doesn't update if the window size changes, but it should do for most cases. If you want fully responsive behavior you'll need re-initialize tooltips on size change.
i am newbie for material ui, this is my current website state:
reality of current website
and this what i expected:
what i expected it become
as you can see from the those 2 pictures above, i want the text in the circle was shorten and truncate by 3 dots ... i tried typography of material ui with the property of nowrap but it truncated text from the very first line like this:
nowrap typography
and i want it is truncated and ellipsised when text is too long and reached over 2 lines of the card, like the second image above, please help me out, thank you so much and have a good day :)
you can edit in the codesandbox demo in this link codesandbox demo
You could use line-clamp
mainContent: {
display: 'box',
lineClamp: 2,
boxOrient: 'vertical',
overflow: 'hidden',
}
Codesandbox demo
I have a panel in a ExtJs Viewport with BorderLayout .
It is really taking a huge space on the screen. If I change the layout to
card from fit it does not make a difference. I have to scroll down to see the buttons.
http://jsfiddle.net/fastcodejava/VvKck/7/embedded/result/
check my update to your code where was some wrongly used minWindth, removed layout fit on top and missing some parts and needed to add MaxWidth to bottom part. You can check the full code on the fiddle link
layout: 'border',
maxWidth : 400,