Is there any way to center Avatar component inside Toolbar with MaterialUI components?
<Toolbar>
<ToolbarGroup float="right" lastChild>
<ToolbarTitle text="Toolbar"/>
<Avatar src="images/avatar.jpg"/>
</ToolbarGroup>
</Toolbar>
I have been playing with this few hours without any success.
Do you mean vertical-alignment or horizontal? Anywho you can use the style attributes to override the default styles.
<Toolbar>
<ToolbarGroup float="right" lastChild={true}>
<ToolbarTitle text="Toolbar" />
<Avatar src="images/uxceo-128.jpg" style={{alignSelf: 'center'}} />
</ToolbarGroup>
</Toolbar>
I'm using flexbox css properties on the Avatar to align the avatar vertically. The Toolbar has been redesigned recently using flexbox in the material-ui library.
So you can use flexbox properties to align contents within the Toolbar and ToolbarGroup.
Hope this helps.
Related
I have 2 dropdowns in Datatables to fiter the content and i've got a bug. When a dropdown on the right side of the page, it shifts the page to the left by about 10px. And in the opposite case when dropdown on the left it shifts page to the right. With first Click happens nothig, but only when i try to change the selected value.
<p-dropdown
id="ListFilter_priority_dropdown"
inputId="ListFilter_priority_dropdown_input" #priorityDropdown
styleClass="my-form-control" [options]="prioritySelectItems"
[showClear]="true" placeholder="Select"
(onChange)="filter($event.value)" appendTo="body"> <ng-template
let-option pTemplate="item"> <div
id="ListFilter_priority_item_container"> <span
id="ListFilter_priority_dropDown_{{option.label}}">{{option.label}}</span>
</div> </ng-template> </p-dropdown>
Angular v 13.3.8
PrimeNG version 13.4.1
Build / Runtime - Angular CLI App
I have already tried to play around the position of the "body" - absolute, static, relative and s.o. but it doesn't work aswell as changing the property "appendTo" of dropdown.
This seems like an unresolved bug with the p-dropdown component of PrimeNG. Other people are having this issue:
https://github.com/primefaces/primeng/issues/10992
https://github.com/primefaces/primeng/issues/11046
However, I was able to overcome the problem in PrimeNG 14.1.2 by adding [virtualScroll]="true" to the p-dropdown component, and also adding a min-width to the dropdown panel with the property [panelStyle]="{ 'min-width': 'min(100vw, 250px)' }"
Another situation that may be causing this is if you're using appendTo="body" and the body has overflow: hidden or overflow-x: hidden but has horizontally overflowing children.
If you're using appendTo="body", try setting the overflow to auto and check if you have a horizontal scrollbar.
If you do, this may be causing the problem. To fix this, either take care of the overflowing children, or set overflow: hidden/overflow-x: hidden on a child element of the body.
I'm having some issues using the Material UI Drawer component. When I try to display it in my webpage it tries to force the focus to the inner div and adds a shadow or border to the component if you're focused anywhere else.
Does anyone know what's causing this shadow to appear and how to disable it? Example screenshot below - you'll see a blue edge at the bottom (this is the same all the way round if I resize the element)
As soon as you click on content inside the Drawer e.g. a List element the shadow goes away. I assume it must be something to do with the component being modal?
<Drawer PaperProps={{ className: classes.floatingMenu }} anchor='top' open onClose={() => {}}>
<div className={classes.dummy}>
</div>
</Drawer>
Note: The floatingMenu class only adds a margin at the top of 55px (i.e. the height of the AppBar - nothing else).
This is somewhat tricky, but possible with just some props and styling. The element that is shading the rest of the UI is the Backdrop component of the Modal component. Drawer uses Modal when it's in temporary mode. The hideBackdrop prop of the Modal controls whether the shade is seen or not, and you can pass this prop to the Drawer directly as well.
However, the Modal component itself would still cover the whole viewport, preventing you from clicking other areas of the UI, before the Drawer is closed. I'm not sure if there's a simpler way, but at least you can do it by just using CSS styling to make the Modal element "through-clickable" by setting its pointer-events to none. To restore the "clickability" of the drawer itself, you should then set its pointer-events back to all.
So, for instance, just using the style prop to make simple inline styling:
<Drawer hideBackdrop style={{ pointerEvents: 'none' }}>
<div style={{ pointerEvents: 'all' }}>
I'm a sidebar!
</div>
</Drawer>
A working example
If you twiddle with Material UI's styling solution, you could also pass the pointer-events style rule to the Drawer's own Paper through the classes prop.
I was able to fix the issue in a little more simplistic manner after reading the doc's a bit more. On the Modal page it states:
Notice that you can disable the outline (often blue or gold) with the
outline: 0 CSS property.
Based on this I didn't touch the component or inner components from my question but instead I simply added one extra CSS class outline: 0 to floatingMenu (which is already passed to the PaperProps):
floatingMenu: {
marginTop: '55px',
outline: 0
}
This resolved the problem and I no longer see the blue shadow border.
I'm learning Angular. I wanted to create a simple carousel so that I can show my sponsors on homepage. I came across many study materials that talks about bootstrap carousel. But I don't want that. I want to use ngx-owlcarousel-o. I followed exactly as mentioned in their documentation. And sorry, i thought pasting code here can be very confusing for all. To save everyone's time and effort I've created a stackblitz. My problem is that I'm not getting slide in the center. They're aligned to left no matter what css i apply. Please correct me.
This is my card-holder.component.html
<owl-carousel-o [options]="customOptions">
<ng-template carouselSlide>Slide 1</ng-template>
<ng-template carouselSlide>Slide 2</ng-template>
<ng-template carouselSlide>Slide 3</ng-template>
<ng-template carouselSlide>Slide 4</ng-template>
<ng-template carouselSlide>Slide 5</ng-template>
<ng-template carouselSlide>Slide 6</ng-template>
</owl-carousel-o>
And this is the css file:
card-holder.component.css
owl-carousel-o {
align-content: center;
margin-left: 50px;
}
I tried taking help from:
CSS Layout - Horizontal & Vertical Align
angular ngx-bootstrap carousel not centered
I also tried wrapping everything inside a div and the tried:
How to horizontally center a div?
But it is so stubborn. Not ready to move even by 1 pixel. Please help me.
I've edited your stackblitz https://stackblitz.com/edit/angular-qaen88 .
Your should add "center" property to your owl configuration and text-align:center to .owl-item
I'm using react-spinkit/spinkit to create a three-bounce spinner that I want to use next to some text in place a static ellipsis.
Here is my current Typescript react code:
<div style={ {display:"flex", flexDirection:"row"} }>
<div>Loading server details</div>
<Spinner spinnerName='three-bounce' />
</div>;
It works well, but the spinner looks too big:
It looks especially out of place on an iPhone.
How can I scale down the spinner to about half that size?
(But in a "relative" kind of way, I don't want to specify pixel sizes.)
I tried surrounding the spinner element with div setting the width and height css style to 50%:
<div style={ {width:"50%", height:"50%"} }>
<Spinner spinnerName='three-bounce'/>
</div>
But that didn't seem to do anything.
After lookin at the css source for react-spinkit, I ended up adding this to my global css file:
.sk-three-bounce > div {
width: 9px;
height: 9px;
}
It doesn't do it in a "relative" way, but then neither does spinkit (the original is just hardcoded to 18px).
I've created a simple menu inside a <core-drawer-panel> element using <paper-item> with the following:
<paper-item noink>
<div class="core-menu-item">
<core-icon icon="maps:beenhere"></core-icon>
My Places
</div>
</paper-item>
As you can see, I've wrapped the insides with a <div> to adjust the icon and text style + positioning.
Achieving this effect:
So my question is, how can I style a <core-submenu> in a similar way to achieve the same results?
I've tried following the documentation but styling seems to be very limited in the light DOM; I can only seem to add padding around the whole item, not specifically the icon (for which I'd like to add more padding).
Any suggestions?
Thank you.
The core-submenu page describes part of the solution. Each core-submenu includes a core-item in its shadow DOM, which is used to display the title and icon for the submenu. You can style this using:
core-submenu::shadow #submenuItem {
color: red;
}
The item itself contains a core-icon in its shadow root, with an ID of icon, so you can access that using:
core-submenu::shadow #submenuItem::shadow #icon {
color: blue;
}