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;
}
Related
I am runnning across an issue in which I am not sure how to solve.
I have a grid system doing the following, BUT I will do a standard "div" solution. But here is my dilemna.
I have a "LogoComponent" That displays my companies logo on the left, and a partner's logo on the right.
I have two headers that display in two different conditions.
Centered Display (just the logos)
Left Aligned Display (left aligned logos, with other content on the right)
Caveats: the "partner logo" needs to confine within the div/space as sometimes the svg's are large, so I "can" offer a height, but not a width.
The image shows the two views. The "LogoComponent" I am having an issue as I was using a flexbox, but not sure that is gonna work since why I try to make it "left" as a component, it moves off the container div. Any ideas how to solve this?
I can solve it, but I feel it will be too generalized, as I'm looking to make this "LogoComponent" be wide enough for the logos, and then appropriately resize if the partner logo is there or not.
As said in the comment, you can center LogoComponent using margin: 0 auto; when it's the :only-child.
If it's not the only child, using margin-right: auto; will push all other content to the right as we are in a flex container.
.parent {
display: flex;
}
.LogoComponent {
margin-right: auto;
}
.LogoComponent:only-child {
margin: 0 auto;
}
/* for styling only */
.LogoComponent {
width: 50px;
height: 50px;
background-color: lightblue;
}
/* for styling only */
.OtherContent {
min-width: 200px;
background-color: lightgreen;
}
<div class="parent">
<div class="LogoComponent"></div>
</div>
<hr>
<div class="parent">
<div class="LogoComponent"></div>
<div class="OtherContent"></div>
</div>
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
}
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.
I've been trying to use styled-components with the alpha version of material-ui
According to the documentation, this should work out of the box.
This code:
const StyledButton = styled(Button)`
color: red;
text-transform: uppercase;
`;
return <StyledButton>Button</StyledButton>;
will generate something like this:
<button tabindex="0" class="MuiButtonBase-root-3177716317 sc-bdVaJa sxRGN" type="button" role="button">
...
</button>
It looks good.
However, the only problem I have is the order of the injected CSS styles (pic). Styles from styled-components are injected before MUI's styles which make their priority lower.
Is there any way to solve this without using !important?
In the current release (i.e. non-alpha) version, what you've asked would indeed require !important basis:
"Note that CSS properties defined inline are given priority over those defined in a CSS class. You need to use !important to take precedence over the inline style."
Ref: http://www.material-ui.com/#/customization/styles
Perhaps the alpha hasn't quite moved away from this inline requirement yet or it is still a work-in-progress.
What I've done to overcome this sort of thing myself is to (unfortunately) recreate the entire CSS on a standard <button> element when I need such a solution. Here's an example of how I'm doing that with a react-photonkit "theme"
// #flow
import styled from 'styled-components';
const PhotonStyledButton = styled.button`
font-family: Arial, Roboto, Helvetica, sans-serif;
height: 30px;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 12px !important;
line-height: 1.4;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: default;
background-image: none;
border: 1px solid transparent;
border-radius: $default-border-radius;
box-shadow: 0 1px 1px rgba(0,0,0,.06);
-webkit-app-region: no-drag;
&:focus {
outline: none;
box-shadow: none;
}
color: #333;
border-top-color: #c2c0c2;
border-right-color: #c2c0c2;
border-bottom-color: #a19fa1;
border-left-color: #c2c0c2;
background-color: #fcfcfc;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#f1f1f1));
background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%);
background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%);
&:active {
background-color: #ddd;
background-image: none;
}
`;
export default PhotonStyledButton;
styled-components in general is compatible with any component library. When you write styled(AnotherComponent) we take that component and inject an automatically generated class name. This means essentially it's the same thing as writing <AnotherComponent className="sc-asdf123" />!
The current version of material-ui specifically is a bit difficult to custom style because it uses inline styles. From the MaterialUI documentation:
Note that CSS properties defined inline are given priority over those defined in a CSS class. You need to use !important to take precedence over the inline style.
This means simply using styled(MaterialButton) won't work as the passed-in styles will mostly just be ignored. You need to bump the specificity of your styles to override the inline styles that material-ui ships with. (this article is a great primer on specificity if you're not familiar with the details)
Answer for the alpha version of material-ui
The current alpha version of material-ui has switched to using JSS under the hood. (which is CSS in JS not inline styles, like styled-components) This means the issue is likely to be that the styled-components styles are injected after the default material-ui styles. (which are injected by JSS)
JSS supports custom injection points so you might be able to add a <!-- jss --> comment to the HEAD of your HTML to make sure JSS injects its CSS before the styled-components injected CSS?
Answer for the current version of material-ui
There are two ways to bump the specificity of the styled-components injected styles, one more tedious and one a bit more "hacky". The first one is adding !important at the end of all of your styles:
const Button = styled(MaterialButton)`
color: blue!important;
`
While this works in most cases it gets tedious very fast when you have lots of custom styling in a component. The better way is to use the class name hack:
const Button = styled(MaterialButton)`
&&& {
color: blue;
}
`
These ampersands get replaced with the automatically generated class name meaning the outputted CSS looks something like this:
.sc-asdf123.sc-asdf123.sc-asdf123 {
color: blue;
}
This bumps specificity by a big margin, thusly overriding the defined inline styles, and is less annoying than having to put !important after each rule.
Now we can use <!-- material-ui --> to make sure the styles are injected after it.
By default, Material-UI will look for a html comment named to inject styles after. By adjusting the placement of this comment within your HTML body you can control the order that CSS rules are applied to your components. (ref)
I want to disable my navigation item using this code:
md-nav-bar
md-nav-item A
md-nav-item(ng-disabled=false) B
However, it doesn't work. Looking for the docs but couldn't find anything. How to disable navigation item in correct way?
I tried but couldn't find a proper way and didn't have to time to submit a pull/merge request (IF I could fix it that is). I did managed to get a work-around working, which basically intercepts and stops the click from propagating up to be handled by the mb-nav-item:
<md-nav-item md-nav-click="AppCtrl.gotoPage(1)" name="page-1">
<span ng-click="AppCtrl.gotoPageBlocker(1, $event)">Loan Details</span>
</md-nav-item>
Then in you controller/whatever, just define the gotoPageBlocker() like so:
function gotoPageBlocker(pageNo, theEvent) {
if (!userCanAccessPage(pageNo)) {
theEvent.preventDefault();
theEvent.stopPropagation();
}
}
This will intercept and either block or allow the click event to bubble up to the md-nav-item. Not the best way as using ng-disabled would be SOOO much easier + would have saved me a few hours mucking around, but it works for now. This will screw up the css a bit, so below is my "attempt" at making things look nice in css (well, scss):
.md-nav-item {
/**
* We need to move the margin and padding from the parent buttong to the child
* span. This is so the span intercepts the click from the whole area
*/
.md-button {
margin: 0px !important;
padding: 0px !important;
._md-nav-button-text span {
line-height: 24px;
margin: 0 4px;
padding: 12px 16px;
display: block;
outline: none;
}
}
/**
* This targets the unselected disabled button
*/
&[disabled] .md-button._md-nav-button.md-unselected {
color: #ff0000;
cursor: inherit;
}
}