I just switched from antd 4 to the latest antd 5.1.4.
A lot is different now and I am trying to get my head around. I try to change the height of the menu items. They are 40px high which I'd like to reduce.
I am trying to figure out where this styling comes from and how to adjust it:
You can try the following
.ant-menu-inline .ant-menu-item {
height: 20px;
}
Output:
Default (40px)
New (20px)
I hope this helps! Thank you!!
Related
I've tested so many things but nothing works yet. I have a page which its content is scrollable if needed.
It is working fine in windows Chrome and Firefox but in ios and safari it has a unwanted vertical bouncing scroll.
I've seen that people here mentioned that this : https://github.com/lazd/iNoBounce has been the solution for them. but how can I use this in react?
Hope everyone reading is okay,
I've an answer from the future.
Run npm i inobounce
Import it to your index.js or wherever your ReactDOM.render(...) is
import inobounce from "inobounce"
Put
inobounce.enable();
Somewhere, I put mine straight after the ReactDOM.render(...)
Don't forget to put -webkit-overflow-scrolling: touch; styling on the elements which do scroll, they should also have height or max-height, overflow: auto or overflow: scroll.
This probably won't help OP since I am a year too late but hopefully it helps someone.
Did you try react-bouncefix from https://www.npmjs.com/package/react-bouncefix?
It's straightforward to use (from docs):
var Bouncefix = require('react-bouncefix');
var MyComponent = () => {
return (
<Bouncefix className="Bouncefix">
Hello from MyComponent!
</Bouncefix>
);
}
What controls the number of items displayed in a drop down list for md-autocomplete.
I have space for more than the 5 that are being displayed.
Do you mean increase the height of the autocomplete results container? If that's the case, this is not yet posible with angular-material out of the box. See this closed issue.
As it's posted in an issue comment, as a workaround you can use a little css hack. Something like this:
.md-virtual-repeat-container.md-autocomplete-suggestions-container {
height: 350px;
max-height: 350px !important;
}
You can see it working on this plunker. Hope it helps
use md-dropdown-items="7"
Sourced from the issue linked above.
The luma theme of magento 2 has a bug.
When iam on an iphone and open the menu the menu opens to far.
It streched past the right side of the screen.
If i do this on android the menu works perfectly.
I was looking at the css code and i found that the menu width was calculated using calc();
It substracted 54px from 100%.
I thought iOs couldn't handle calc but this was not the problem.
Then i tried to fiddled with the width of the parent elements to find the calculation problem.
The problem was that none of it fixed the problem.
And even weirder was the fact that on android it kept working correctly.
Does anyone have this problem also with the luma theme?
And possibly found a solution.
Thanks in advance for you help.
On our website https://dampershop.nl we solved this problem by changing a bit of css.
We added:
html.nav-before-open, .nav-before-open body {
overflow: hidden;
position: relative;
height: 100%;
}
This makes it so that iphone/ios devices opens the responsive menu correctly.
I hope this helps!
I recently launched a landing page for a new website. But on iOS, the inputs fields are ignoring the padding of the container and the subscribe button looks completely different. How can I fix this?
View the landing page: signup.sketchtricks.com
Screenshot on iOS: cl.ly/image/0y0P0m0J3a3X
Thank you for your help, I really appreciate it!
Add...
-webkit-appearance: none;
border-radius: 0;
...to the affected selectors in your css.
I recently upgraded our mobile application to use JQM 1.1.1, and noticed a very big problem on Blackberry 6 browsers.
The screenshots tell the story best.
In the first image you'll see the search text box rendered correctly.
However in the second image you'll see that when the input text box is focused, it makes the textbox black
Please see my screenshots:
Has anyone seen this issue?
I had the same problem, and fixed it with css like this:
input.ui-focus, textarea.ui-focus {
outline: none;
-webkit-box-shadow: none;
}
Thank you for your answer.
From my side, I had to set css to:
.ui-btn.ui-focus, .ui-input-text.ui-focus, ui-input-search.ui-focus
Hope it will help!