Replies: 2 comments 1 reply
-
|
Hi @muktillc ! Glad to hear you like the package :) I have not yet made a clear decision on how should the styling be handled in dash-uploader. There are already lots of different parts in the component that could be styled in CSS in many different ways. One option would be to give possibility to give dictionaries as arguments to define styles for different parts of the component but that feels a bit cumbersome. CSS files are natively supported by Dash anyway, so probably the best would be to just give meaningful class names and ids to the components and handle the rest with CSS files. To your question, particularly on how to edit the button height or button font size: in dash-uploader 0.7.0devIn the dev branch (not published yet, but will be released as 0.7.0), it looks out of the box like this:
The general way to edit the CSS styles is to open the developer tools of your browser (F12 on Chrome), and then to look at the components you want to edit, and try to edit the CSS attributes there first, like this:
From here it is clear that the button style can be edited using the .btn-dash-uploader {
height: 1.9em !important;
font-size : 11px !important;
}You should see the changes in the developer tools, then:
In dash-uploader 0.6.0In the
Then, as you can see from developer tools, the buttons are inside to get:
or following div#dash-uploader button {
height: 1.5em !important;
font-size : 20px !important;
line-height: 1.0 !important;
}to get:
|
Beta Was this translation helpful? Give feedback.
-
|
Hi Niko,
I am sorry as I feel that I was not clear enough. I was wondering if
the size of the whole rectangle can be changed to just one line high?
The rectangle I am referring to is as shown below, not just the buttons.
[image: image.png]
…On Mon, Feb 28, 2022 at 4:24 PM Niko Pasanen ***@***.***> wrote:
Hi @muktillc <https://github.com/muktillc> !
Glad to hear you like the package :) I have not yet made a clear decision
on how should the styling be handled in dash-uploader. There are already
lots of different parts in the component that could be styled in CSS in
many different ways. One option would be to give possibility to give
dictionaries as arguments to define styles for different parts of the
component but that feels a bit cumbersome. CSS files are natively supported
by Dash anyway, so probably the best would be to just give meaningful class
names and ids to the components and handle the rest with CSS files.
To your question, particularly on how to edit the button height or button
font size:
in dash-uploader 0.7.0dev
In the dev branch (not published yet, but will be released as 0.7.0), it
looks out of the box like this:
[image: image]
<https://user-images.githubusercontent.com/17479683/156057140-beb5a903-72a3-4f04-8c32-771eb69b67c4.png>
The general way to edit the CSS styles is to open the developer tools of
your browser (F12 on Chrome), and then to look at the components you want
to edit, and try to edit the CSS attributes there first, like this:
[image: image]
<https://user-images.githubusercontent.com/17479683/156057908-7c0e0da7-706a-483f-a89a-dfbac4559ea9.png>
From here it is clear that the button style can be edited using the
.btn-dash-uploader CSS selector. So, as per dash docs
<https://dash.plotly.com/external-resources>, you would create assets
folder next to your app.py and there you would create any .css file, like
mystyling.css. Then, into that file, you would put something like:
.btn-dash-uploader {
height: 1.9em !important;
font-size : 11px !important;
}
You should see the changes in the developer tools, then:
[image: image]
<https://user-images.githubusercontent.com/17479683/156058696-ac891a84-78a8-4c5e-815f-6cc84a3a8e02.png>
In dash-uploader 0.6.0
In the stable branch (currently published as 0.6.0), it looks out of the
box like this:
[image: image]
<https://user-images.githubusercontent.com/17479683/156059724-d77dd1c9-8911-41af-9144-22affd259f3e.png>
Then, as you can see from developer tools, the buttons are inside div
which has id of dash-uploader (or whatever id you gave it). Then, you
could use following CSS:
div#dash-uploader button {
height: 1.9em !important;
font-size : 20px !important;
line-height: 1.0 !important;
}
to get:
[image: image]
<https://user-images.githubusercontent.com/17479683/156060801-ea2aaf8a-3bf0-4d86-b106-62adf85159de.png>
or following
div#dash-uploader button {
height: 1.5em !important;
font-size : 20px !important;
line-height: 1.0 !important;
}
to get:
[image: image]
<https://user-images.githubusercontent.com/17479683/156060901-9372f41d-f518-42bf-9e8a-e03d14d77eb1.png>
—
Reply to this email directly, view it on GitHub
<#78 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AHVVZ4CA6MQZAC5VBBBX6VTU5PRY5ANCNFSM5PSBBSEA>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
For some reason I can't see the image. Could you try posting it again? |
Beta Was this translation helpful? Give feedback.
-
Are there any properties that I can use to control the height of the uploader button?
Dash uploader is the best for my work and would like to reduce the height of the button displayed in the dash board.
Also is there a way to increase the font size for the characters written on the button?
New to python and dash so please forgive and guide me if this question is already answered.
Beta Was this translation helpful? Give feedback.
All reactions