My issue is very similar to the one faced here: PrimeNG Chips overflow behaviour
The only difference is that I'm using Multi-Select Dropdown with the Display: Chip as one of the settings. The problem is that the container keeps on stretching horizontally and goes off the page, when I want it to expand vertically. I thought perhaps finding the elements and using the suggested CSS from the previous answer would work, but to no avail... I've tried the following:
::ng-deep .p-multiselect-label-container, .p-multiselect-chip {
flex-wrap: wrap;
align-content: space-between;
padding-bottom: 0;
}
::ng-deep .p-multiselect-token, .p-multiselect-token-label {
margin-bottom: 0.5rem;
Thanks so much for your help.
You were very close. The drop down can end up having some ugly whitespace when it wraps but its better than running off the page.
::ng-deep p-multiselect .p-multiselect-label{
display: flex;
flex-wrap: wrap;
}
::ng-deep p-multiselect .p-multiselect-token{
margin-bottom: .5rem
}
Related
Hoping someone can assist. I am using the MobileStepper component, specifically:
https://mui.com/api/mobile-stepper/
and attempting to use a different background color for this stepper. Looking at the Dev Tools for this component, I found the following:
.MuiMobileStepper-root {
display: flex;
padding: 8px;
background: #fafafa;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
I actually just want to change the background value to:
.MuiMobileStepper-root {
background: #dadada;
}
Unsure how to change this within my React component.
Not sure if it's an overrides/root style change?
This worked for me
<MobileStepper sx={{ bgcolor: 'transparent' }}/>
This problem is costing my sanity.
I want to use the React Fluent UI Carousel component with thumbnails and place it in the middle of my container, everything works fine till I add more than 8 slides. The carousel moves to the left side of the screen and eventually disappears from the viewport.
I am using the default code snippet from Fluent UI IS AVAILABLE HEREFluent ui thumbnail carousel
enter image description here
I have solved the problem, just overwrite the following properties:
.ln {
width: 600px;
}
.ui-carousel__navigation {
margin-top: -55px !important;
position: absolute;
display: flex;
flex-flow: wrap;
justify-content: space-between;
width: 1000px;
margin-left: -200px;
}
.nb {
transform:none !important;
}
.ol {
transform: none !important;
}
.nc {
transform: none !important;
}
I'm having this problem related to click events in angular.
My application is a tic-tac-toe app.
My application uses angular materials.
The problem: when a user clicks a button on the board, the click event seems to be leaking into a nearby button on the board. The following image demonstrates what I'm talking about.
Image of problem. As you can see, the button in col 1 row 2 was activated even though that button was not clicked. Below is a blitz of my application.
https://stackblitz.com/github/flashato9/tic-tac-toe
It would be great if I can get some help on this problem. Thanks!
really nice question =)
So the problem seems to be, that the mat button somehow responds to the change of the text cursor position.
if you change your square.component.html like so:
<div class="grid-button"><span>{{value}}</span></button>
and change the square.component.scss like so:
.grid-button{
width: 100%;
height: 100%;
background-color: rgb(91, 158, 91);
font-size: 10rem;
border-radius: 4px;
text-align: center;
padding: 50px;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
}
.grid-button:hover {
background-color: green;
}
when you now click a "button" you clearly see, that the cursor jumps to the next Field. But a simple div does not seem to react with :hover to that.
You can additionaly to the above CSS add user-select: none; to the .grid-button to not show the cursor or maybe a plain button (not Material) would also work.
Long story short: I would recommend not to use a Material Component if you change most of it's apperance, because there will probably allways be sideeffects.
Problem Solved
Here is the link posted by Vimal Patel in the comments.
This should be an easier question, but I can't find the answer for it. I have a simple React form, and I want to put multiple levels accordions. I manage to create the subaccordions, but those are not full width. The react application is available at https://iquasere.github.io/MOSGUITO/ , with the broken accordions at the end.
The sub-accordians are displaying as expected because of the flex property, the default flex direction is row. Just update the direction of the container and it should work.
.MuiAccordionDetails-root {
display: flex;
flex-direction: column; // <-- Here
padding: 8px 16px 16px;
}
I am using antd table for reactjs application.
I created Sandbox here for you to make changes.
Can anyone help me make rows with rounded borders like below image?
Expected :
I have tried adding rowClassName={() => "rowClassName1"} with border related css but borders won't show up.
Try this approach,
.rowClassName1 td:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.rowClassName1 td:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
Working Demo :- https://codesandbox.io/s/antd-table-rounded-border-row-forked-9u4x9?file=/src/App.js
#UKS's answer solved the problem for me and able to make rows with rounded borders.
If someone wants to change header style as well with rows.
.monitorTableStyle .ant-table-container .ant-table-content table .ant-table-thead tr th:first-child{
border-top-left-radius: 15px !important;
border-bottom-left-radius: 15px !important;
}
.monitorTableStyle .ant-table-container .ant-table-content table .ant-table-thead tr th:last-child{
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}