Comments (4)
Try this:
and CSS:
.header-button .v-btn__content{ font-size: 1.25rem; width: 100%; justify-content: flex-start; }
from node-red-dashboard.
Thanks hotNipi, that works perfectly - and teaches me about CSS...
Is this correct?
- The first name, '.header-button' in this case, is just a name and Node-Red inserts this in the class list of the widget container.
- The second name, '.v-btn__content' in this case, controls where the CSS attributes are used within the widget container.
Thinking out loud
Having to work at this level for something as simple as font size is undesirable, as is the inconsistent behaviour between the text widget (where the CSS does not need to be 'aimed') and button widget where it does. But I presume the widgets come from vuetify so their CSS structures are not under our control.
Ideal would be to move the common controls, font, colour, size, background onto the node controls, probably in the appearance tab.
Perhaps the Node-Red engine could insert a 'second name' - '.v-btn-content' for classes used on buttons ... this feels bad to me... the code would need to check there is no 'second name' already present - and some CSS controls probably need to be elsewhere anyway.
Issue 535 suggests a mechanism for dynamic control of colour on text widgets. As a user I prefer visible options on the widget controls - or at least a hint, such as the dynamic CSS icon.
Thanks again for the fix and the lesson, and you guessed correctly that I really wanted 'justify-content', not 'justify-self: left'!
from node-red-dashboard.
With DB1 the option to alter the CSS on widget level was quite of improvement. But it was and is just CSS without any magic. To make use of it, for sure it takes to understand basic principles of CSS rules but also to understand current conditions cos we deal with existing and working environment.
By allowing quite heavy override it is open window to have less configurable options for widgets. And if there is less of configuration, widgets are more lightweight and more easily controllable and the maintenance cost will be lower.
-
The first name, '.header-button' makes that specific (actually all where added) widget unique. So you can make CSS selector to address only those. Yes, it is the class name which is added to the widget.
-
The second name, '.v-btn__content' is the CSS class which is applied to span element, in where the button label goes.
Now it is possible to make a CSS selector:
.header-button .v-btn__content
Which you may read as "select all elements where is class v-btn__content but only if they are children of element with class header-button"
The rest is just the rules for that selection.
CSS is fun. But takes quite of time to learn.
from node-red-dashboard.
My feeling is that a tool such as Node-red dashboard should be able to dynamically control basic display attributes - font, colour, background colour etc without requiring knowledge of CSS - There is something wrong I think, when it is easier to create a multi variable graph than change the text size.
However function comes first, second and third. Making appearance easy to control is way down my priority list - top for me is click through on tables and graphs :-)
Thanks again
Colin
from node-red-dashboard.
Related Issues (20)
- Improve UX when importing flows
- Navigation Drawer - Configurable Styles HOT 1
- LED HOT 3
- Consistent button sizing on pc and phone please
- Markdown Node only updated on Full Deploy HOT 1
- UI-Theme does not refresh HOT 4
- Docs: Third Party Widgets HOT 4
- Programmatic Titles & Labels HOT 1
- UI Gauge - Improve sizing/layout at smaller sizes (1x and 2x widths)
- UI Gauge - cannot re-order segments
- UI Chart - Grouped Bar Chart
- Window resize only doesn't do the trick HOT 2
- Enable dynamic ui-template content with injection of msg.template
- Error running When Dashboard 2.0 on Bosch Ctrlx Core HOT 4
- Grid layout - more steps for media query to support bigger screens
- Sidebar HOT 1
- Allow GAUGE segmental sub-labels to display mdi-icons HOT 4
- Add logarithmic scale to Gauge
- Layout for widgets in group seems wrong. Missing CSS declaration grid-row-end: span [rows] HOT 4
- UI Heatmap
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 node-red-dashboard.