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?)
Related
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
I have a component that renders Tabs component from Material UI 5.0.0-beta.5
There is a case when I set this components display to none.
But, then I get this error -
Material-UI: The value provided to the Tabs component is invalid. The Tab with this value (0) is not part of the document layout. Make sure the tab item is present in the document or that it's not display none.
I understand the error, and I am setting its display to none because but I wanna show and hide the component without re-rendering (because I want the user selections to persist).
Is there a way to fix this error or maybe a better way to do what I am trying to do?
You could try to use visibility: hidden instead
And if you want not to take up the space to the hidden component, set its width and height to 0 and then change them later to show the UI.
visibility: hidden;
width: 0;
height: 0;
And when you want to show it back:
visibility: visible;
width: 100%;
height: 100%;
I want my fixed navbar that stays on the top of the page to display over everything as I scroll down through the page, but when I scroll down the Carousel ends up on top of the navbar.
I have tried to give a z-index: 0 with an !important tag to the carousel, and z-index: 1 to the nav bar but that didn't do the trick. There is a photo attached to show the problem I am talking about.
give the zindex of fixed navbar some higher value like
z-index: 1090
I wrap the Navbar in a sticky div:-
<div className="sticky-top" style={{ zIndex: 1090 }}>
<Navbar></Navbar>
</div>
BTW I use react-bootstrap.
I'm looking at my header CSS properties. My header has a z-index: 1. Fiasco.
Change it to 1090. It will help you.
Check all elements what was overflow by the gallery. Check them all!!! (z-indexes)!
Im trying to create an acordion with react and styled-components.
Im trying changing display: none to display:block and adding a transition, but it changes with no transition, it only works fine if i remove the display property on the styled-component but i can see part of the div if i remove that property.Sorry for my english and thanks
https://codesandbox.io/s/z2nj50z46p?fontsize=14
I think your problem was in this part of the css
const AcordionItemWrapper = styled.div`
width: 100%; // This is now 100% and not 80%
height: auto;
overflow: hidden;
background-color: blue;
`;
And this change produces this result.
This ensures that your darkgoldenrod tab is 100% of it's containers width. When it is active the dropdown is also 100%.
After further investigation I have found your problem. Some mark up issues, plus browser applies a default margin on certain html elements. In this case paragraph has a default margin being applied. background color is ignored when margin is used.
The below link should be what you want.
https://codesandbox.io/s/nkj7mx73jj
In Angular js ui rid, how can I remove vertical and horizontal scrollbars ?
And also for each column heading I am getting a little carrot icon by default, which shows sort ascend, sort descent, Hide column. I want to remove this also from my column headings.
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableSorting : false,
enableColumnMenus : false;
Good answer from #Asqan answering the first part of your question. For the second part:
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
I'm thinking you mean you want the look in this plunker I created.
You can solve these css issues in one of two general ways.
1) Customize the ui-grid css
2) Leave the original ui-grid css then override it in your own css file
I've shows the first option to solve your "stripped" issue and the second option to implement your desired border. I have done both for example only so you can see both options - I recommend choosing and using consistently one method or the other.
The ui-grid sets the ".table-striped" look to which you are referring in the css. You can override this either in you own css file or using the customizer tool and setting the #rowcoloreven and #rowcolorodd fields to the hex code for white #ffffff. This will update the ui-grid css to contain the below:
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: #ffffff;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #ffffff;
}
For ".table-bordered" see specifically in the style.css file these added lines
.ui-grid-cell {
border-style: solid;
border-bottom: 1px #ff0000;
}