There is things lost in safari. Glad to be out of that mess.
Yes, but sadly means we canāt make it the default 
Dealing with this kind of stuff regularly. The artist draws some elements with zero respect of what can and what can't be done. The task still comes in with deadline and must. And then you struggle with device and browser support. The promised support starts with IE11 and iphone 5 with i don't even remember the historical os version.
But yes. That's really pity that those elements are made like there was zero standards.
#hotNipi - clearly I managed to increase the size of the colour control AND get rid of the hated underline - as you see above, but I'm not sure how you managed to fit it inside a button? That would "round things off nicely".
It is not button but the md-input-container where the input element is situated.
The styles I shared is all you'll need. But for sure as discussed with Dave, this works for Chrome. I didn't test any other browser.
EDIT: it also works on Android with Chrome, Firefox and Brave and Samsung default browser.
And for desktop I didn't test IE but for all others work.
And I don't have safari
Also the selector for that container needs to be managed to target correct element. Cos it is different in your flow. (depends on naming of tabs and groups)
/*
The selector which selects only element in one tab and one group
Starts with # followed by tab name
then group name
then "cards"
All connected with underscore
#Tabname_Groupname_cards
*/
What browser do you use?
Chrome of course - on the PC and on the Android phone.
Ok, I'm nearly with you 0 my tab names have SPACES in them.. "Bedrock Other" fror example - is that an issue?
Connect all words with underscore
#Tabname_Group_Name_With_Spaces_cards
Getting there, I'd really taken non notice of groups up to now...All works EXCEPT the colour picker is LEFT justified it seems and a bit big...
Right I shrunk it to 40*40 - good - but still left-justfied...
I need them like this to fit everything in.
The 1x1 widget size should be the values for the input element
.nr-dashboard-theme .nr-dashboard-textinput input[type="color"]{
border: none !important;
width: 58px;
height: 60px;
margin: 0 !important;
padding: 10% !important;
}
And with padding: 10% !important; you then can adjust how big the element actually will be according to container
Just beat you to it.
But now the outline is the same size as my buttons - can I make that colour square a little smaller? It looks odd stuck right up to the edges?
Hah, I tried 4 4 4 4 - fail... my CSS has never been my strongest skill... 10% is just fine thanks.
1 Like
NOW I have LOTS of room for text. Just a matter of another 9 controls to update on this tab - and another tab to do in total - I renamed my tabs to get rid of the spaces. THAT was easy. Thanks...
Pete
Space conservation is the trickiest thing in ui building for small screens. Even for skilled artist. 
Hah, I just spotted how to add that template to the site - and not just that tab. Sailing now.... Mywife has decided that RED means stop so colour change too - green for go, black for stop. Getting there.
Be aware that this selector works only for input container in that tab and group.
I did selector that way for purpose. If you use some other text input with some other input method than color picker, then those others are not affected. Avoiding possible CSS mess 
That's true . the button with colored square doesn't talk much about what will happen if you press it. And the red square is definitely STOP kind of thing.
If that is the "No go" then of course the 1x1 sized color picker can't be an option.
So if needed, something like this can be also figured out 
