How to limit the height of MUI Autocomplete input box - reactjs

I am having trouble in limiting the height of MUI Autocomplete component. When I select the value from the list it automatically add empty space or row at the bottom of input which I do not want.
Below is my example.
https://codesandbox.io/s/mui-5-forked-n8nc6i?file=/src/App.js
screenshot

If you want to bypass the default css style from MUI, then you can use inside your css the following:
.MuiAutocomplete-inputRoot {
flex-wrap: nowrap !important;
}
example

Related

react-virtualized - Is there a way to add hover style on rows of the Table

When we user hovers on the row, the background color of the respective row should change to #e7e7e7.
Tried to add row effect through JSS, but this allows to have row effect on the cells instead of rows.
JSS approach
I tried to add hover effect using the props rowStyle, but this didn't work for me.
Using prop rowStyle
I'm using styled-components in my project and this is how you can style the row using it.
const StyledTable = styled(Table)`
.ReactVirtualized__Table__row {
:hover {
background: red;
}
}
`;
I think you're using the wrong selector.
What styling lib are you using?

React.js - Material-ui DataGrid disable row width

Is it possible to change the width of a row? I have some rows with JSON data. It would be best to display them in a <pre> tag so that the user can view it naturally, but this seems to be impossible.
So now I'm wondering is it possible to remove the default overflow-x: hidden? And to just let the user scroll to the end of a row? Instead of the text just having 3 dots at the end, because there's a max-width.
In the data-grid css api they show the necessary classes which could be overridden, and at the end they say:
You can override the style of the component thanks to one of these customization points
...
So you could add the following style rule to override the default one :
.MuiDataGrid-root .MuiDataGrid-cell {
text-overflow: initial;
overflow-x: auto;
}

Antd: I'm trying to change the default styling of Antd's checkboxes using styled components to make the checkbox larger and change the color to black

I have an Antd checkbox that I'm trying to make larger, alter the thickness of the box itself and change the color to black but every style I apply creates a second square that sits over the checkbox and doesn't change the checkbox itself. Does anyone have any ideas on how to do this?
Figured this out by using &&&{border: 2px solid ${({ theme }) => theme.colors.black} the triple ampersand allows you to add more specificity when working with mixed styled components like mine.

react-select does not display with column-count

I have a bunch of react-select components on the screen. They are all inside a div with a class called bookData. The css for bookData is:
.bookData{
font-size:13px;
column-count: 2;
column-gap: 20px;
padding: 10px;
}
If I select something with react-select, the selection does not show up. If I remove column-count, my code for react-select works find, it will select items and display. Is there css, I can add that will allow react-select to work with column-count?
This CodeSandbox could help you: https://codesandbox.io/s/4jr596lr09
All you need to do is to wrap the two column content in a div displayed by flex.
Wrap the two elements in a div and set the flex value to 1 (Ref: What does flex: 1 mean?)

React-bootstrap Component Font Size

I wanted to manually changed the font size for a ReactJS project. I tried to add something like
* {
font-size: 10px;
}
and that works with everything that is a plain text. However, every component from react-bootstrap (e.g., DropdownButton, Panel) remains a large font size. Thus, what is the correct way to change the font size for those react-bootstrap components to the same as for other plain text? Inline styling works but I would like the changes to apply to a .css file. Thanks!
Edit: Panel Header code snippet:
<Panel>
<Panel.Heading>
<Panel.Title>
title here
</Panel.Title>
</Panel.Heading>
...
To change the font-size of all text in your project, use
* {font-size: 10px;}
Alternatively, you can pass a style prop to a component, EX: <Panel.Body style={{fontSize: 10}}
It's simple you can add style={{fontSize:"10px"}} inside the jsx button or any element, this will directly apply to your jsx element and bootstrap default won't work.

Resources