I am trying to increase the font on Ant Design 5, as it is far too small for most users to read. I tried to override the theme attributes, but as I do all of the antd component styling seems to break.
<ConfigProvider
theme={{
token: {
fontSize: 18,
// controlHeight: 20, tried playing with this
// lineHeight: 22, tried playing with this
// size: 10, tried playing with this
},
}}
>
Docs: https://ant.design/docs/react/customize-theme
Playing with the theme-editor I wasn't able to get it to scale it up either: https://ant.design/theme-editor
The padding/margin doesn't seem to scale with the increased font. Does anyone know if there is an easier way to "scale" everything up while not making it look disastrous?
Related
I have an Angular Material Paginator which I am currently customizing the css of.
It looks like this:
I cant record my screen on my device so I will explain.
The two arrow buttons on the right side are Angular Material Icon Buttons.
When I click them, a ripple effect (gray circle) appears. I need to delete that ripple effect.
I couldn't inspect the element where it happens because it only appears on a click.
I checked SO already about this question and the most common answer, to use [disableRipple]="true" doesn't work here, since angular paginator does not have this property. I am working in a big project with several developers, so I would not like to touch global scss files.
This is my code btw:
<mat-paginator
#paginator
(page)="changePage($event)"
[length]="imagesAndFiles.length"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[pageSizeOptions]="[4, 8, 16, 24, 32]"
>
</mat-paginator>
How can I remove the ripple effect from the arrow buttons?
You can use css to hide the ripple element
Add a class to the paginator element
Hide the mat-button-ripple class
<mat-paginator
class="hide-ripple"
#paginator
(page)="changePage($event)"
[length]="imagesAndFiles.length"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[pageSizeOptions]="[4, 8, 16, 24, 32]"
>
</mat-paginator>
.hide-ripple {
::ng-deep {
.mat-button-ripple {
display: none;
}
}
}
There is a directive called matRippleDisabled that can be used in the paginator.
See the official doc about ripple
I'm using the latest version of tailwind and I have a custom breakpoint, xs:, which is equal to 540px. When I use it like this: h-[420px] xs:h-[400px] xl:h-[360px] it works fine for mobile and the xs breakpoint, but the xl breakpoint no longer registers- the height is 400 even on desktop.
This is my config:
theme: {
extend: {
screens: {
'xs': '540px',
...
Unfortunately, this works in the sandbox here and I'm not sure why it doesn't work on my local. I'm using Sveltekit (a version before the breaking changes), Ubuntu Linux and Chrome.
not sure which version of tailwind you're using, probably a version number would help, but in the latest version of tailwind, you cant simply extend smaller breakpoints because the new breakpoint will be added at the end of the breakpoints list.
If you want to add an additional small breakpoint, you can’t use extend because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system.
Instead, override the entire screens key, re-specifying the default
breakpoints:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
screens: {
'xs': '475px',
...defaultTheme.screens,
},
},
plugins: [],
}
you can read more here : https://tailwindcss.com/docs/screens#adding-smaller-breakpoints
Standard CSS3 give us to max and min values for responsive behaviors.
But tailwind responsive behaviors set as default for only min size.
what it mean ?
if you add one more responsive behavior point...
you must stop that 'xs' behaviors with sm:h-[360px] or md:h-[360px].
if you don't understand this answer, i can give you more details about it.
But please add your code more with details.
So, what I need to do is to get font size of my text, that I set in the styles:
text: {
fontSize: 25,
}
I made this by converting pt in px:
const TIME_HEIGHT = styles.text.fontSize * 1.34;
But that doesn't work the same as I expect it to work. Is there any methods to get the font size of my text and use this size later in code?
try whit this lib.
"Measure text accurately before laying it out and get font information from your App (Android and iOS)."
https://github.com/aMarCruz/react-native-text-size
I'm trying to understand how to customize a theme completely.
material-ui guidelines/docs say to check this file:
https://github.com/callemall/material-ui/blob/master/src/styles/theme-manager.js
So to a custom theme I tried adding a block like:
AppTheme = {
appBar: {
color: Colors.yellow500,
textColor: 'white'
},
but that has no effect on the app bar. The rest of the theme variables do work tho.
How do I customize the other variables in this file?
I just checked the properties that you mentioned and everything work properly with appBar.
The quickest way to check any props in Material-UI theme is to see the
storybook-addon-material-ui demo page!
(You can find appBar props at the right sidebar and play with colors.)
so it should work!
Please see my live site http://mozzor.com and hover over the circle icons at the top. Notice two effects that occur only in Firefox (I'm using FF23):
1) There is a blue underline added to the text of the tooltip
2) The text renders upon hovering, then after a moment, seems to blur itself.
I'm having trouble debugging this with Firebug...I can't find a css element that corresponds to either of these effects.
Just in case, here is some relevant code for how I style the tooltips:
// Variable currentSelect corresponds to hex color value
// selected in the jQuery widget seen at the top left side of the page
$('#notebookIcon,#pencilIcon,#headphoneIcon').tooltip().on("mouseover", function () {
var tooltip = $(this).next(".tooltip");
//Box
tooltip.find(".tooltip-inner").css({
backgroundColor: "#fff",
color: currentSelect,
borderColor: currentSelect,
borderWidth: "1px",
borderStyle: "solid"
});
//Arrow
tooltip.find(".tooltip-arrow").css({
//borderTopColor: currentSelect,
//borderLeftColor: currentSelect,
//borderRightColor: currentSelect,
borderBottomColor: currentSelect
});
});
EDIT: Second issue seems to deal with font aliasing slowly in Firefox. Issue still persists after trying several different fonts. For more information, see below:
Github issue: https://github.com/twbs/bootstrap/issues/10218
Bugzilla issue: https://bugzilla.mozilla.org/show_bug.cgi?id=909814
Your first problem is the underline, which is dictated by the CSS text-decoration property. I'm not exactly sure why it's happening on Firefox (Chrome seems to have it correct, because text-decoration for your menu items is set to none). Here's a quick fix, but I'll see if I can find the cause.
#iconrow a {
text-decoration: none;
}
About the second question: I don't understand why you can't do this with CSS.