What is the correct way to use own height(size) for default buttons/ input etc ? #1238
-
|
Can anyone elaborate what is the correct way to edit default sizes behaviour for daisyUI components following as (using tailwind along with): I mean I have own size for all these components, who should I change them, best way to change with variable but how or giving them own required classes in app.css? /* default components dimensions */
.btn {
height: 3rem; min-height: 3rem;
}
.btn-sm {
height: 2rem; min-height: 2rem;
}
.btn-lg {
height: 4rem; min-height: 4rem;
}
.btn-xs {
height: 1.5rem; min-height: 1.5rem;
}
.btn-circle {
height: 3rem; width: 3rem;
}
.btn-square {
height: 3rem; width: 3rem;
}kindly help |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 5 replies
-
|
Yes, you can customize the sizes from CSS file, as you mentioned. module.exports = {
plugins: [
require('daisyui'),
],
daisyui: {
themes: [
{
light: {
...require("daisyui/src/colors/themes")["[data-theme=light]"],
".btn-xs": {
"height": "2rem",
"min-height": "2rem",
},
".btn-sm": {
"height": "3rem",
"min-height": "3rem",
},
".btn-md": {
"height": "5rem",
"min-height": "5rem",
},
".btn-lg": {
"height": "6rem",
"min-height": "6rem",
}
},
},
],
},
} |
Beta Was this translation helpful? Give feedback.
-
|
is this still the correct way to do so in DaisyUI V5 and Tailwind V4? |
Beta Was this translation helpful? Give feedback.
-
|
@diegogb-08 Yes. This thread is from 2022. |
Beta Was this translation helpful? Give feedback.
-
|
I think this could be the last option, if we change height for buttons,
then we need to change the same for other relevant elements like input,
select, etc...
looking for one place where we change the height and it works for all
elements the same....
…On Sat, Oct 29, 2022 at 9:34 PM Pouya Saadeghi ***@***.***> wrote:
Yes, you can customize the sizes from CSS file, as you mentioned.
Another way I would suggest is customizing the theme from
tailwind.config.js:
https://play.tailwindcss.com/nY0VC5YL0O?file=config
module.exports = {
plugins: [
require('daisyui'),
],
daisyui: {
themes: [
{
light: {
...require("daisyui/src/colors/themes")["[data-theme=light]"],
".btn-xs": {
"height": "2rem",
"min-height": "2rem",
},
".btn-sm": {
"height": "3rem",
"min-height": "3rem",
},
".btn-md": {
"height": "5rem",
"min-height": "5rem",
},
".btn-lg": {
"height": "6rem",
"min-height": "6rem",
}
},
},
],
},}
—
Reply to this email directly, view it on GitHub
<#1238 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAHJ53UTASL5CF3G7YBHLMDWFVDB3ANCNFSM6AAAAAAREA7DJ4>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Well, not all components share the same size values. So there's no single variable to change the height of everything. |
Beta Was this translation helpful? Give feedback.
-
|
Here's how I did it: module.exports = {
plugins: [
require('daisyui'),
],
daisyui: {
themes: [
{
light: {
/*
...
other theme stuff
...
*/
'--input-size-xs': '1rem',
'--input-size-sm': '1.5rem',
'--input-size-md': '2rem',
'--input-size-lg': '3rem',
'.btn,.btn-md': {
'height': 'var(--input-size-md)',
'min-height': 'var(--input-size-md)',
},
'.btn-xs': {
'height': 'var(--input-size-xs)',
'min-height': 'var(--input-size-xs)',
},
'.btn-sm': {
'height': 'var(--input-size-sm)',
'min-height': 'var(--input-size-sm)',
},
'.btn-lg': {
'height': 'var(--input-size-lg)',
'min-height': 'var(--input-size-lg)',
},
'.btn-square,.btn-circle': {
'width': 'var(--input-size-md)',
},
'.btn-square.btn-xs,.btn-circle.btn-xs': {
'width': 'var(--input-size-xs)',
},
'.btn-square.btn-sm,.btn-circle.btn-sm': {
'width': 'var(--input-size-sm)',
},
'.btn-square.btn-lg,.btn-circle.btn-lg': {
'width': 'var(--input-size-lg)',
},
'.file-input,.select,.input': {
'height': 'var(--input-size-md)',
},
'.file-input.file-input-xs,.select.select-xs,.input.input-xs': {
'height': 'var(--input-size-xs)',
},
'.file-input.file-input-sm,.select.select-sm,.input.input-sm': {
'height': 'var(--input-size-sm)',
},
'.file-input.file-input-lg,.select.select-lg,.input.input-lg': {
'height': 'var(--input-size-lg)',
},
},
},
],
},
} |
Beta Was this translation helpful? Give feedback.
-
|
I have tried this technique and it works up to a point. This seems to make it difficult to override the height in a single button component. Looking at chrome dev tools this creates a It is possible to make this work by adding '!' to the individual overriding class names (eg !h-fit) but this seems a tad unwieldy. Surely the ":root .btn" application should be just ahead of the .btn application in the css order and after the component specific values. |
Beta Was this translation helpful? Give feedback.
-
|
You could override the css prop with something like this: <button class="btn btn-primary [--input-size-md:56px]">Blah</button> |
Beta Was this translation helpful? Give feedback.
Yes, you can customize the sizes from CSS file, as you mentioned.
Another way I would suggest is customizing the theme from
tailwind.config.js:https://play.tailwindcss.com/nY0VC5YL0O?file=config