I uploaded a sample to my github here: https://github.com/gyrevik/dropdown-width/blob/master/src/App.js
Where I'm trying to control width like this:
<Dropdown
styles={{width: '25px'}}
items={inputItems}
placeholder="Select your hero"
checkable
getA11ySelectionMessage={{
onAdd: item => `${item} has been selected.`,
}}
/>
and deployed to vercel here: https://dropdown-width.vercel.app/
I haven't found a styling approach that works yet. Thanks in advance for looking at this!
As Alex mentioned you can add a fluent property on the Dropdown which will make the control fill the available horizontal space. So for OPs code:
<Dropdown
items={inputItems}
placeholder="Select your hero"
checkable
fluid
getA11ySelectionMessage={{
onAdd: item => `${item} has been selected.`,
}}
/>
I think you check Class css import.
enter image description here
It works with the fluid property.
Related
The title says it all. I just cant figure out how to make the grid property to work correctly. I want to display images in 2rows but swiper is not working at all. The code and current outcome is provided below-
<div className="">
<Swiper className='h-[600px]' grabCursor={true} slidesPerView={4} spaceBetween={10}
mousewheel={true} grid={{ rows: 2 }} modules={[Grid, Pagination, Mousewheel]} pagination={{ clickable: true }}>
{images.map((img) => {
return (<SwiperSlide key={img.key}><img className={"scale-50"} src={img} /></SwiperSlide>)
})}
</Swiper>
</div>
And the result is-
The images are not showing in the 2nd row, they just dont print at all. Out of 10 images only 6 are showing horizontally which is correct if they show in both rows. :")
Looking for some suggestions on how to make it work
You likely havent installed the grid module. It specifies that in the react swiper documentation
I have a problem in displaying the values from the TextField in my React app.
I'm using material UI and material-ui-phone-number as its packages. As you can see, the values after i click the flag, it is displaying on the back. I believe this is on the zIndex. Pls modify only the dialog2.js
Pls check my codesandbox here
CLICK HERE
Your MuiPhoneNumber utilizes a MUI modal for the country selection & its default z-index is 1300. It does not look like they expose a prop to alter its css properties so you can just target #country-menu (the id of the modal) using any preferred styling solutions
<div>
<style type="text/css">
{`
#country-menu {
z-index: 1801;
}
`}
</style>
<DialogContent style={{ width: 300, height: 500 }}>
<MuiPhoneNumber
name="MobileNo"
label="Mobile No."
variant="outlined"
fullWidth
defaultCountry={"vn"}
value={selectedValue}
onChange={(e) => setSelectedValue(e)}
/>
</DialogContent>
</div>
This can be achieved by doing the following changes:
Remove all CSS z-index defined
Put the Dialog 2 in Dialog 1 content
Here is the working CSB Link: https://codesandbox.io/s/nested-dialog-menuitem-dropdown-forked-wymm0?file=/dialog1.js
I have a series of Material UI buttons as such:
<Button className={classes.button}>Edit</Button>
<Button className={classes.button}>Duplicate</Button>
<hr />
<Button className={classes.button} color="secondary">
Remove
</Button>
I've given them a class that simply displays them as block eg:
button: {
display: 'block',
},
They work fine but there seems to be a setting where the smaller Edit button has extra padding on it because it has less text in the name:
If I add more text it corrects it:
Would anyone know how to fix this? If there is a setting somewhere?
The problem is with the min-width property which forces that "padding". Try just adding min-width: 'unset' to your button class.
There is a live example
https://codesandbox.io/embed/naughty-galois-bc0sz?fontsize=14&hidenavigation=1&theme=dark
In my reactJS applickation I use Material UI and react-bootstrap-table.
In a cell I use the Material UI IconButton like this:
<IconButton tooltip={t('tooltips:editRegulation')} tooltipPosition={'left'}
onClick={() => this.props.history.push("/pms-records/edit/" + row.pmsFindingId)}>{cell}}>
<FontIcon className="fa fa-pencil" aria-hidden="true"/>
</IconButton>
Result is this:
The tooltip is cut by the table cell borders. I tried to change the z-index and read this: https://github.com/mui-org/material-ui/issues/5912
But no solution.
Any hints for me?
Thanks in advance
Your cell has for sure a css that states overflow: hidden.
You can render the tooltip in a portal but you'll eventually lose the position of your element. Better to override the table-cell CSS
In GitHub linked issue:
I got it fixed by adding style={ { overflow: 'visible' } } to the
TableRowColumn that IconButton resides in.
I want to build an Edit popup dialog with an input form in Angular2 using the PrimeNG widgets. I run into trouble with dynamic content of that dialog box (see screenshot).
I've naïvely been trying to wrap the CalendarModule in a div that is positioned above the other elements. (see Angular Template HTML below)
<p-dialog [(visible)]="display" [modal]="true" [resizable]="false">
...
<table class="ui-datatable-responsive">
<tbody>
<tr>
...
</tr>
<tr>
<td class="ui-cell-data">Start By:</td>
<td class="ui-cell-data">
<div [style]="generateSafeStyle('position:relative; z-index:1000')">
<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="value"></p-calendar>
</div>
</td>
</tr>
</tbody>
...
</table>
</p-dialog>
However it seems the DialogModule frames all its content. Is there a hack to overflow that frame?
How would you handle that?
Thank you.
P.S: The generateSafeStyle Function just uses an injected DomSanitizer and works fine.
generateSafeStyle(style:string):SafeStyle{
return this.sanitizer.bypassSecurityTrustStyle(style);
}
just use appendTo="body", it will show calendar above all, even if it is in table, popup or scroll panel
<p-calendar [(ngModel)]="invariable.value" dateFormat="mm/dd/yy" required appendTo="body" readonly></p-calendar>
So I would guess things have changed since this was originally asked, but I found that if I added
[contentStyle]="{'overflow': 'visible'}"
to the p-dialog it allowed the calendar popup to overflow the dialog border.
The only thing that worked so far were the following style options:
<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="dueDate" [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999'}">
This however smashed up the table. So I got rid of the table and used flexboxes to align the elements. Looks better anyway like this.
It's related to overflow:auto on .ui-dialog-content
In dialog there is a div with class .ui-dialog-content make overflow:visible in that div and it will fix this problem.
If you check official PrimeNG Calendar documentation, you will find list of attributes for calendar component, among them there's style attribute which you can use to add needed CSS:
<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="value"
[style]="{ 'position': 'relative', 'z-index': '1000' }"></p-calendar>
I found a better solution for this. Just add a method on click listeners and select element ui date picker
(click)="modifyStyle()"
In ts file import elementRef and Renderer2
constructor(private ele: ElementRef, private ren: Renderer2)
{}
modifyStyle()
{
let ui = this.ele.nativeElement.querySelector(".ui-datepicker");
if(ui)
this.ren.setStyle(ui, "top", "unset")
}
That's it.