Styling edit-text widget properly

#1

I think this is a simple one for someone who understands how CSS works better than I… I want to style the font color as red within an edit-text widget. It works until I give edit-text the “tag” of “input” which the docs say is how you do a single line. Once I do that the color doesn’t work unless I add the ! important which we always try to avoid. I think the answer is some modification of css definition, but I can’t find anything on this.

This works for color, but isn’t the single-line edit-text:

<style>
.testclass {
  color: red;
}
</style>

<$edit-text tiddler="$:/temp/test" default="" class="testclass"/>

But then doesn’t work when I add the tag parameter:

<style>
.testclass {
  color: red;
}
</style>

<$edit-text tiddler="$:/temp/test" default="" tag="input" class="testclass"/>

If I add the ! Important, it works totally as I want, but I’m hoping to avoid it.

<style>
.testclass {
  color: red !important;
}
</style>

<$edit-text tiddler="$:/temp/test" default="" tag="input" class="testclass"/>

I think the answer is being more specific on the .testclass { definition… something like .testclass tag:input { or someting like that…

#2

When making css styles more specific, we add more parents, not more children. So something like div.tc-tiddler-body input.textclass { }

I don’t remember how to style the color of the text in the input though. Someone’s typing :eyes:

#3

I think the answer is being more specific on the .testclass { definition… something like .testclass tag:input { or someting like that…

Yes, CSS “specificity” is the way to go. Try this:

<style> input.testclass { color: red; }</style>
<$edit-text tiddler="$:/temp/test" default="" tag="input" class="testclass"/>

Also, here’s a quick reference on CSS selector syntax: CSS Selectors Reference

2 Likes
#4

That was it!! Thanks @EricShulman and @sull-vitsy

#5

@EricShulman

how to remove this red glow around the edit text widget on focus?

image
image1106×464 19.2 KB

#6

use CSS outline:none;, like this:

<style> input.testclass { outline:none; }</style>
<$edit-text tiddler="$:/temp/test" default="" tag="input" class="testclass"/>

-e

#7

Eric,

Following on from your solution do you think designers of tiddlywiki’s would be wise to follow a convention as follows?

  • create CSS for input.classname where class name is based on the value/field that an input is going to use?

In a tiddler tagged $:/tags/Stylesheet

input.customer-name { outline:none; }
input.customer-phone { outline:none; }
etc...

When editing customer-name

<$edit-text tiddler="$:/temp/customername" default="" tag="input" class="customername*emphasized text*"/>
  • then matching CSS for display as well?
#8

Naming the class based on the fieldname could potentially result in many classes, all with the same attributes.

I think that a more mnemonic convention is to define classes named after their purpose, such as “no-outline”, “width100”, “width50”, “width33”, “width25”, etc. like this:

.no-outline { outline:none; }
.width100   { width:100%;   }
.width50    { width:50%;    }
.width33    { width:33.33%; }
.width25    { width:25%;    }

which can then be easily combined as needed to form nice blocks of inputs, like this:

\whitespace trim
<nobr>
<$edit-text tag=input field=foo1 default="" class="width100 nooutline"/><br>
<$edit-text tag=input field=foo2 default="" class="width50 nooutline"/>
<$edit-text tag=input field=foo3 default="" class="width50 nooutline"/><br>
<$edit-text tag=input field=foo4 default="" class="width33 nooutline"/>
<$edit-text tag=input field=foo5 default="" class="width33 nooutline"/>
<$edit-text tag=input field=foo6 default="" class="width33 nooutline"/><br>
<$edit-text tag=input field=foo7 default="" class="width25 nooutline"/>
<$edit-text tag=input field=foo8 default="" class="width25 nooutline"/>
<$edit-text tag=input field=foo9 default="" class="width25 nooutline"/>
<$edit-text tag=input field=foo10 default="" class="width25 nooutline"/>
</nobr>
#9

Thanks @EricShulman I see value in a combination of our two approaches.

In a custom wiki or tool eg contact manager, maybe only a dozen or so fields need be defined and since we know the field name we automatically know the classname, this is perhaps the “semantic approach”, but as you say if its the fit for purpose classes, the “functional approach”, each which can be combined this will often be more than enough. As in the OT.

I often have wondered if it is possible to define a class that is defined by multiple classes. Then one could bring together multiple classes into one, so you only set the “meta class”, but I expect this is part of my CSS ignorance. Because I have not found a way to do it.

#10

Sounds like you want Sass or Less.

There’s also css-native “nesting” on the way:

https://www.w3.org/TR/css-nesting-1/

but… "css " | Can I use... Support tables for HTML5, CSS3, etc