EditTextWidget class attribute / CSS Question

1

Hello,

A small question about this example:

image
image1021×847 70.4 KB

Unless i specify !important in the custom class the global “General Background” seems to be applied.

Is this by design? Or is it a bug and there is way of making the class specified in the edit-text tiddler actually apply to the tiddler without having to use !important?

Thanks
James

2

I’m a new user here (was on the older google discussion pages now and then :slight_smile: ) so it only let me post one picture

image
image705×175 5.18 KB

3

@James_Anderson This is a matter of CSS Specificity. Basically every selector has a numerical value associated with it, usually the more elements the selector is made of the higher the value. !important increases the specificity dramatically trumping any other selector.

You can increase specificity here by changing your selector to:

input.etw_not_important

which should be enough.

4

You should avoid the !important flag at all cost. It will poison your CSS and it will cause you additional maintenance in the future.

Just my opinion.

5

I try to avoid that as well. I tried it in this case and it had no effect anyway.

Do inline styles take precedence over others? The browser tool show that the positioning is being set by an inline style. If I turn that style off with the tool, then the position of the pop up goes back to right next to the button. I don’t know where that style is being set but it’s got something to do with the reveal widget. Adding the position attribute to the reveal widget does nothing.

If I just copy the code provided by @Brian_Radspinner, his reveal widget doesn’t have this issue.

Thanks,

Clueless

6

If you have the following configuration it is impossible to overwrite the behaviour with a stylesheet. Even if the STYLE element is part of the tiddler itself.

Both versions should be avoided with TW UI code, because its close to impossible for users to overwrite it without !important

BAD PRACTICE WARNING

<!-- this version can be used for TESTING ONLY -->
<!-- It should _not_ land in production code -->
<style>
.test {
  background: yellow;
}
</style>

<!-- inline style like this make it impossible for users to use CSS -->
<div class="test" style="background: red;">
some text
</div>
7

It’s impossible to give specific advice without a link to some example code.

8

Sorry. I was actually replying to the wrong thread. Disregard my previous message.