We currently have a select made in React with ReactSelect that has a fixed 16 options in the table. Currently, when the control is clicked, the menu appears which shows 11 items and has a vertical scroll to scroll down to show the remaining 5 items.
This would be better if all 16 items showed when menu appeared, with no vertical scroll. We have tried to create the following custom style:
menu: (provided) => ({
...provided,
background: '#DDDDDD',
marginTop: '-1px',
zIndex: 10,
height: // what to put here? we've tried "auto", "fit-content", "100%" and none are good...
}),
is there another element in the select (other than menu) that we should be styling, or is there a better way to style the menu such that all options show?
Thanks!
First, I used the most upvoted answer in this post to inspect the ReactSelect menu (which I wasn't able to do previously). I discovered that menuList has a default maxHeight of 300px, which was preventing the menu from growing larger.
This then did the trick for me:
menuList: (provided) => ({
...provided,
maxHeight: null
}),
Related
I am trying to create an E-commerce Store and I'm a beginner in React.JS. What I want is for 5 images to come together on top of eachother when the user scrolls. (so they should move TranslateX on scroll). Previously, on Vanilla Javascript I would have added a window.addEventListener('scroll') and then set a value like value = window.scrollY and then I would have selected the image I wanted to move and simply translateX or Y based on that value.
However, I'm not sure how to do this in React. Where can I set the window event listener? Is there a state needed, or useEffect?
I'm attaching an image so you can clearly see what I am trying to do:
What I have in react is the "Scroll" component which contains 2 divs
-1 div on the left 2/3 flex size containing all the images that should come together
-1 div on the right 1/3 flex size containing the text and the button
inside the left div I have 5 images, and in CSS i've used position absolute to position them on top of eachother (they are all PNGs so they have transparent background).
How would I go about implementing this on my website?
HUGE thanks in advance!
You can save the scrollY in a useState, which you then use to transofrm your images. The window listeners can be loaded inside a useEffect.
It (could) look like this:
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
const handleScroll = () => {
setScrollY(window.scrollY);
};
handleScroll();
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
(You may have to add some ESLint rules if you use it)
I created a container to limit my app to 600px(sm) width, but when I did it the drawer breaks. Instead of rendering in the container page side, it is inside the appBar.
When the width is more than 600px (the page limit), the drawer is rendering inside the appBar (picture incorrect). When the page is smaller than 600px it renders correct (picture correct).
I am using material-ui components, the app bar is position as absolute, because I am implementing on scroll events. To centralize the app bar I use:
maxWidth: 600,
[theme.breakpoints.up("sm")]: {
left: "50%",
transform: "translate(-50%, 0)"
}
Here is codesandbox example code:
https://codesandbox.io/s/material-drawer-e6vrc?file=/header.js
You should make drawer sibling with AppBar instead of it's children
return (
<div className={classes.grow}>
<AppBar className={classes.app_bar}>
...
</AppBar>
{renderDrawer}
</div>
);
Go to https://snack.expo.io/HJV601djf and open login_screen/components/Form.js. As you can see, the textInput has the style
textInput: {
flex:1,
height: 50,
marginBottom: 20
}
You can see that the user icons are not aligned with the text input. If I take marginBottom out, everything goes ok, but with marginBottom: 20 the icons get dealigned. I can probably fix that by making the text input get aligned vertically too, but I'll not know the cause of the problem.
How can marginBottom affect the insides of UserInput if it's supposed to add space only on the outside?
Printscreen if you don't want to wait to load the app:
This is happening because , in your UserInput.js, you are trying to merge the styles for the textInput while the Image / Icon styles are remaining the same, therefore it is misaligned.
The optimum way to solve this would be to add a textInputContainer style to the component and set the margin to it as
TextInput.js
<View style={mergeObjects(this.props.containerStyle ? StyleSheet.flatten(this.props.containerStyle) : {}, StyleSheet.flatten(styles.inputWrapper))}>
Form.js
<UserInput
containerStyle={styles.textInputContainer}
style={styles.textInput}
source={{uri:'http://www.free-icons-download.net/images/user-icon-74490.png'}}
placeholder="e-mail"
autoCapitalize={'none'}
returnKeyType={'done'}
autoCorrect={false}
/>
and the styles
textInputContainer : {
marginBottom: 20
},
Here's the snack for the same
I am trying to add custom buttons to the left and right navButton but a spacer seems to appear if I set a backgroundImage. If only the title text is set the spacing is correct. Here is my example to reproduce the issue, I added a borderColor to show that the image is not the culprit.
var win = Ti.UI.createWindow({
width: '100%',
height: '100%',
backgroundColor: 'white'
});
var leftBtn = Ti.UI.createButton({
backgroundImage:"/images/headerCmdMenu.png",
width: '81px',
height:'74px',
title: 'left',
borderColor: 'red',
borderWidth: 1
});
var rightBtn = Ti.UI.createButton({
width: '81px',
height:'74px',
title: 'right'
});
win.leftNavButton = leftBtn;
win.rightNavButton = rightBtn;
var nc = Ti.UI.iOS.createNavigationWindow({
window : win
});
nc.open();
Here is a screenshot of the view…
http://imagebin.ca/v/13wq8Jrn1hst
Any ideas how to fix this?
Thanks.
Chris
Note: I did ask this on the official forums, but got no answer after 14 days.
http://developer.appcelerator.com/question/160022/leftnavbutton-and-rightnavbutton-spacer-appears-if-using-backgroundimage-#comment-196608
This is quite long to answer but it might still help someone else looking for same issue.
For images in left/right nav buttons, look for the below points first:
If you only set title, then it will work as expected.
If you set only backgroundImage (not set width & height), then the image will be stretched to take the full space.
If you set only backgroundImage with some width & height, then the button will behave as a normal button with expected spacing and area.
If you set both backgroundImage & title, then it will be the case of this post.
Also remember that always use correct size image files when intend to use as left/right nav buttons.
I am using jQuery-UI Tabs vertically at my site and was having no issues until I started loading content in the tab panels and found that the parent tab panel div does not grow with the content, e.g. tab "Static Info". I can "fix" the issue by setting the parent div class CSS to overflow: auto, which then creates a vertical scrollbar on the parent div. However, I would really prefer if the parent div would just grow with the child content. I did try a couple of clearfix options, including:
$( ".tabs" ).tabs().addClass( "ui-helper-clearfix" );
when intializing the document, but none of the clearfixes made any difference. As I was seeking solutions, I did try adjusting the heightStyle and tab refresh to see if either of those would make a difference. What I found was that this did nothing:
$( ".tabs" ).tabs({ heightStyle: "fill" }); I also tried "content" and "auto" with also no luck.
However, when I tried the alternative as documented at api.jquery.com/tabs:
var heightStyle = $( ".tabs" ).tabs( "option", "heightStyle" );
$( ".selector" ).tabs( "option", "heightStyle", "fill" );
the tabs layout completely broke. The content was all there, but the ul list was at the top of the page with no tabs, followed by all the panel content. I got the same result with:
$( ".tabs" ).tabs( refresh );
I did verify that my jQuery UI in general was working (e.g. I tried
$( ".tabs" ).tabs({ event: "mouseover" }); which worked fine.
This seems like it should be simple, but I've reached a relative dead end with CSS, and I don't understand what is going on with the jQuery- why it breaks with heightStyle and refresh. Any ideas or advice on getting my content to behave itself are very much appreciated... thanks!
Adjust the following from:
#tabs-left > div {
height: 35em;
}
to:
#tabs-left > div {
min-height: 35em;
}