Comments (5)
einazare
commented on May 24, 2024
Hello there, @tomgreeEn ,
The link you have given sends me to open a new issue for the product at hand, please provide me with the link of the page your are having issues.
Also, you could provide me with a small video of the issue happening.
Best,
Manu
from ct-nextjs-material-kit-pro.
tomgreeEn
commented on May 24, 2024
Hi
Apologies - the correct link is here:
https://demos.creative-tim.com/nextjs-material-kit-pro/ecommerce
You shouldn't need a video if you follow the steps provided.
This is also an issue on Safari, where in fact the formating is even more broken.
Tom
from ct-nextjs-material-kit-pro.
einazare
commented on May 24, 2024
Hello there, @tomgreeEn ,
I've checked with my colleagues, the only solution is to add disableRipple on the Checkboxes from the e-commerce page, that is what we've done on the HTML counterpart of this product: https://demos.creative-tim.com/material-kit-pro/examples/ecommerce.html
So you have to change the checkboxes from:
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(9)}
checked={
checked.indexOf(9) !== -1 ? true : false
}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={
<Check className={classes.uncheckedIcon} />
}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
To
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(9)}
disableRipple
checked={
checked.indexOf(9) !== -1 ? true : false
}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={
<Check className={classes.uncheckedIcon} />
}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
Also, I found another bug, the hover background, that should not happen, for this, go inside assets/jss/nextjs-material-kit-pro/customCheckboxRadioSwitchStyle.js and change:
checkRoot: {
padding: "14px",
"&:hover": {
backgroundColor: "unset"
}
},
radioRoot: {
padding: "16px",
"&:hover": {
backgroundColor: "unset"
}
},
To
checkRoot: {
padding: "14px",
"&:hover": {
backgroundColor: "unset !important"
}
},
radioRoot: {
padding: "16px",
"&:hover": {
backgroundColor: "unset !important"
}
},
Best,
Manu
from ct-nextjs-material-kit-pro.
tomgreeEn
commented on May 24, 2024
Hi
Thanks, but this isn’t really a fix, it’s just switching the feature off !
I assume I’ll need to add some padding to the block and then give it some negative margin to position it back in the same space.
What was the change to the stylesheet supposed to achieve? As far as I can tell it’s not done anything for me and I still get the hover, partially cropped.
Tom
… On 24 Mar 2020, at 10:44, Nazare Emanuel-Ioan ***@***.***> wrote:
Hello there, @tomgreeEn <https://github.com/tomgreeEn> ,
I've checked with my colleagues, the only solution is to add disableRipple on the Checkboxes from the e-commerce page, that is what we've done on the HTML counterpart of this product: https://demos.creative-tim.com/material-kit-pro/examples/ecommerce.html <https://demos.creative-tim.com/material-kit-pro/examples/ecommerce.html>
So you have to change the checkboxes from:
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(9)}
checked={
checked.indexOf(9) !== -1 ? true : false
}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={
<Check className={classes.uncheckedIcon} />
}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
To
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(9)}
disableRipple
checked={
checked.indexOf(9) !== -1 ? true : false
}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={
<Check className={classes.uncheckedIcon} />
}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
Also, I found another bug, the hover background, that should not happen, for this, go inside assets/jss/nextjs-material-kit-pro/customCheckboxRadioSwitchStyle.js and change:
checkRoot: {
padding: "14px",
"&:hover": {
backgroundColor: "unset"
}
},
radioRoot: {
padding: "16px",
"&:hover": {
backgroundColor: "unset"
}
},
To
checkRoot: {
padding: "14px",
"&:hover": {
backgroundColor: "unset !important"
}
},
radioRoot: {
padding: "16px",
"&:hover": {
backgroundColor: "unset !important"
}
},
Best,
Manu
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub <#5 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABAQXULBSBM2MEXMS6J3GYDRJCFI7ANCNFSM4LRBQJUA>.
from ct-nextjs-material-kit-pro.
einazare
commented on May 24, 2024
Hello again, @tomgreeEn ,
I've checked with my colleagues, the only solution is to add disableRipple on the Checkboxes from the e-commerce page, that is what we've done on the HTML counterpart of this product: https://demos.creative-tim.com/material-kit-pro/examples/ecommerce.html
Please check the above link.
That area is far too small to add some more padding to it, the inside UI will be distorted on smaller screens.
We have forgotten to disable the ripple effect on the Checkboxes, that ripple effect should not happen anyway. There is no way to fix this, the only fix is to disable the ripple, at least on the e-commerce page.
Best,
Manu
from ct-nextjs-material-kit-pro.
Related Issues (20)
- [Feature Request] Convert _app and _index into modern functional components HOT 1
- [Bug] Incompatible with next-images > 1.3.1 HOT 1
- [Feature Request] Autocomplete custom input HOT 2
- Links in docs don't work. HOT 1
- Google map on contact us HOT 1
- [Bug] conflict issue using v1.2 HOT 3
- [Bug] Customizable Select with MultiSelect jumps after selecting HOT 1
- pattern not working in CustomInput HOT 1
- [Bug] Banner doesn't show currently in responsive mode for any browser below the iPad form factor
- [Bug] nom install fails HOT 2
- [Bug] npm install and npm install --force both fail HOT 1
- Typescript support ? HOT 2
- [Bug] npm install AND yarn install are failing HOT 2
- [Bug] Cannot install the software using `npm install` HOT 4
- [Bug] Bumpy install process; not geared for windows machines HOT 2
- [Bug] v1.2.1 has dependency conflict HOT 21
- [Bug] next build fail HOT 2
- [Bug] multiple errors and warnings when running the app HOT 5
- [Bug] the header component when clicking on an item (e.g. components, sections, examples) when opening the menu with the options (e.g. Presentation Page, All components, Documentation) this menu instead of appearing under the buttons it overlaps and hides the items (ex: components, sections, examples) , different from the behavior that appears on your site HOT 2
- [Bug] Bad On-Page SEO
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ct-nextjs-material-kit-pro.