RangeWidget and css

#1

Hy
I am trying to resize a RangeWidget, but my css seems to be ignored

for information, here is the css I use :

.slidetest {
 width: 10%;
}

and here is my widget’s code :

<$range class="slidetest" field="lifePoints_current" min="0" max={{!!life points}} default="1" increment="1"/>

I also tried with a standard html slider and it still doesn’t work in tiddlywiki, but work perfectly in a simple .html.

Is it possible to apply css to a RangeWidget slider in tiddlywiki ?

#2

It works when I tested it on https://TiddlyWiki.com. The $range widget appeared as 10% of the width of the containing tiddler. Did you remember to tag your CSS tiddler with $:/tags/Stylesheet ???

-e

1 Like
#3

Yes, the tiddler is tagged.
After reading your post, I have tried to put the range widget in a fresh tiddyiwiki and it worked.
There is probably something that edit css slider and take priority on it. Either in my addons or in a previously wrote segment of css.

Thank you for your help.

Edit : Ok, that is weird. I removed the content of all my css tiddlers one by one and saved them outside my tiddlywiki. (I use multiple css tiddlers to keep each one of them focused and make it easier to troubleshoot)
the problem disappeared when I removed the last one, with my sliders finally resizing. So I put back every other css, and checked that it was still working. Then, I put back the faulty tiddler… And it kept working.
I have change nothing, and for some reason, it now work as intended.

So… It work. I don’t know why (or rather I don’t know why it refused to work the first time), but it work… :upside_down_face:

#4

Remember the order of stylesheets also determines the order of CSS ie the cascade. See Control Panel > Info > Advanced > Stylesheets can be reordered.

One strategy during design is to use an inline style, be careful if you are redefining a common element, ie be specific.

<style>
.slidetest {
 width: 100%;
}
</style>
<$range class="slidetest" field="lifePoints_current" min="0" max={{!!life points}} default="1" increment="1"/>
#5

I understand, but .“slidetest” was the only line of css concerning the range widget, and all of its information were in the same css tiddler. Nothing should have overwritten it.

#6

That is correct, but if you used the same range widget in another tiddler that was open it may uses the same style.

#7

For future-reader purposes:

Whenever my css doesn’t work, I also make sure to use the css troubleshooting technique. Create a tiddler with these contents:

<style>.debug{display: block;}</style> <$list filter="[tag[$:/tags/Stylesheet]]" counter=nth> <style> {{!!text}} .debug-<<nth>>{display:none;} </style> <$link class={{{[[debug-]][<nth>][[ debug]]+[join[]]}}}/> </$list>

Failure to close a curly bracket, or to include the final semicolon in the style spec – if it happens anywhere higher in the css process – can ruin all the css downstream.

OR (having checked the documentation):

{{$:/snippets/DebugStylesheets}} (just paste it into a new tiddler, or stash it in a sidebar tab, etc.) will give you a list of ALL your stylesheets, with a red X next to any messed-up ones.

3 Likes