Erratum : no need for the line-height:unset nor the inline-block for the
button and its content :
.indicator-container {
display:block;
margin-top: -14px;
margin-bottom: -26px;
}
.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;
left:0;
top:0;
}
Le jeudi 12 août 2021 à 20:00:09 UTC+2, Télumire a écrit :
> 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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/89287f64-cc45-42f1-940d-ff3399e0d7e5n%40googlegroups.com.
