Ok now I understand what you mean … This is because tiddly wiki wrap the
content in a <p> tag, which has a margin of 14px. So to fix that, since we
can't style an element based on it's content (at least not until the
pseudo-class :has is supported) nor give it a class (as far as I know), we
need to wrap the indicators in a container and use it to compensate with
negative margin.
The code becomes :
\whitespace trim
<div class="indicator-container">
<span class="indicator-item">
{{$:/core/ui/Buttons/edit}}
</span>
..etc..
<span class="indicator-item">
{{$:/core/ui/Buttons/cancel}}
</span>
</div>
And the css becomes
.indicator-container {
display:block;
margin-top: -14px;
margin-bottom: -26px;
line-height:unset;
}
.indicator-item{
height:40px;
width:40px;
display:inline-block;
position:relative;
}
.indicator-item button, .indicator-item button * {
width:100%!important;
height:100%!important;
padding:unset;
margin:unset;
display:inline-block;
left:0;
top:0;
}
Le jeudi 12 août 2021 à 08:22:19 UTC+2, TW Tones a écrit :
> Télumire
>
> I just tried this on tiddlywiki.com;
>
> Thanks, we are almost there.
>
> I set the width and height to 15px, look like I wanted then added
> list-before = $:/core/ui/SideBarSegments/tabs
>
> Once it moves above the tabs there is too much white space above and below
>
> [image: Snag_1f281978.png]
>
> Is there some way to remove or reduce this space top and bottom?
>
> Regards
> Tones
>
>
> On Thursday, 12 August 2021 at 12:07:40 UTC+10 Télumire wrote:
>
>> So if I understand correctly, you want to be able to give a custom size
>> to your icons/buttons and be able to have them next to each other ?
>>
>> Try this and tell me if that works :
>>
>> In the tiddler tagged with $:/tags/SideBarSegment :
>>
>> \whitespace trim
>> <span class="indicator">
>> {{button 1}}
>> </span>
>> ..etc..
>> <span class="indicator">
>> {{button n}}
>> </span>
>>
>> In a stylesheet tiddler :
>>
>> .indicator{
>> height:20px;
>> width:20px;
>> display:inline-block;
>> position:relative;
>> }
>>
>> .indicator button, .indicator button * {
>> width:100%!important;
>> height:100%!important;
>> padding:unset;
>> margin:unset;
>> display:inline-block;
>> position:absolute;
>> left:0;
>> top:0;
>> }
>> Le jeudi 12 août 2021 à 02:42:42 UTC+2, TW Tones a écrit :
>>
>>> Folks,
>>>
>>> I have a number of projects that could use icons placed in the sidebar,
>>> top menu and other places. They would indicate some status such as a green
>>> storage icon when the local storage is on and much more. I call these
>>> indicators, They may have tooltips or actions on click, with or without
>>> modifier keys.
>>>
>>> I have attempted to build a new element tagged $:/tags/SideBarSegment
>>> and list-before $:/core/ui/SideBarSegments/tabs
>>>
>>> The problem I have for for which I seek help is I am finding it
>>> difficult to reduce icons and buttons to a half height and not have
>>> unnecessary white space above and below the indicators. Margins, padding
>>> tweeks etc... have not succeeded. We may use existing buttons and create
>>> new ones, the idea is it provides additional place(s) for which we can
>>> display content via a tag, so if I publish an indicator and you do the same
>>> they can coexist.
>>>
>>> I would hope to publish this to set a de facto standard, say using the
>>> tag $:/tags/indicator so we can all add additional and conditional iconised
>>> information in the sideBar and elsewhere as desired.
>>>
>>> Can anyone help me build this with custom css to minimise its use of
>>> space? Ideally customisable.
>>>
>>> Regards
>>> Tones
>>>
>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/7cffd46e-0ec6-41f3-9c27-8da7a3b8db48n%40googlegroups.com.
