Calendar not popping up in narrow Firefox sidebar using Eric's editlist macro

#1

Hello,

I am using Eric’s great editlist macro for a calendar popdown on a edit field.
This: <<edit-list tiddler:"$:/temp/tiddler" field:date type:date focusPopup:yes>>
works great in the main story river but doesn’t popup anything on the sidebar. Worth noting is I did not install Eric’s bell-and-whistles calendar plugin … I just wanted to use vanilla as much as possible.

It turns out that if the sidebar is too narrow and causes the calendar not to have enough room, it doesn’t display (but is functional if you blindly click in the area where it should be). Is there some sort of overflow setting magic that can be set here that will make it more fail-safe if local scale is different than intended?

Thanks,
/Mike

1 Like
#2

some notes:

  1. When using <<edit-list ... type:date>> (or <<edit-list ... type:calendar>> without installing TiddlyTools/Time/Calendar), the macro uses a browser-dependent system-specific HTML type=date input field.

  2. There is NO “focusPopup” handling for the HTML date input field. Rather, the field shows a built-in calendar icon on the right (inside the input field area). You must click the calendar icon to display the popup calendar

  3. Using <<edit-list tiddler:"$:/temp/tiddler" field:date type:date focusPopup:yes>> in a tiddler tagged with $:/tags/SideBarSegment, I have not been able to reproduce the effect you describe.

  4. An HTML date input field IS displayed and, if the sidebar width ($:/themes/tiddlywiki/vanilla/metrics/sidebarwidth) is set to something narrow (e.g., 150px) , so that the HTML date input field does not fit, there is a horizontal scroll bar at the bottom of the sidebar area.

  5. With the focus in the date input field and using right-arrow to scroll the sidebar so the calendar icon is visible, I can click on the the calendar icon to display the system-provided popup calendar and then select a date from the calendar.

Note that I use the current version of Chrome in Windows10. If you are using a different browser or OS, the handling for the HTML date input may be different from what I am seeing.

Can you send me a TiddlyWiki file with a minimal test case (“MTC”), so I can, perhaps, reproduce the problem you are reporting?

-e

#3

Hi Eric,

Thanks for the feedback.

Sorry, I was going to mention the browser/OS combo but forgot to include it. This is occurring on Firefox v94 / Fedora Linux 35. Since it is the browser specific date-picker like you mentioned, I tried it in Chrome and, sure enough, I get what you are describing.

So it must be some Firefox oddity. It does popup on focus but when I remove that option in the macro call, it still does it so that must be how Firefox works by default. It also has no little calendar icon and a redundant “Clear field” X icon. Is there a way to hide the .editlist_clear control element for a single particular id and not globally?

Thanks for your insight and your super useful macro.

/Mike

#4

Give this a try:

<style>
.noclearbutton .editlist_clear { display:none !important; }
.noclearbutton .editlist_wrapper:hover        .editlist_input { width:100% !important; }
.noclearbutton .editlist_wrapper:focus-within .editlist_input { width:100% !important; }
</style>

<span class="noclearbutton">
<<edit-list tiddler:"$:/temp/tiddler" field:date type:date>>
</span>

  1. You can use the CSS “inline” as shown, or put it into a tiddler tagged with $:/tags/Stylesheet (omitting the surrounding <style> and </style> syntax) so it can be applied wherever you want within your TiddlyWiki file.

  2. The .noclearbutton class allows you to enclose the desired <<edit-list>> input in a custom class (i.e., <span class="noclearbutton">...</span> so that the styles will only apply to that specific input control.

  3. The first line of the CSS forces hiding of the clear field button

  4. The remaining 2 lines of the CSS prevents the input field from resizing so it won’t try to automatically make room for the clear field button on “hover” or “focus”

Also, since you are using a browser-specific type=date input field and also hiding the “clear input” button, you don’t actually need the <<edit-list>> macro at all. Instead, you can use a TWCore standard <$edit-text> widget, like this:

<style> .edit100 { width:100%; } </style>
<$edit-text class="edit100" tiddler="$:/temp/tiddler" field=date type=date/>

enjoy,
-e

#5

Both worked great.

A very good point re: the edit-text widget … I was making things needlessly complicated.

The standard edit-text date popup suffers from the same disappearing-when-crowded in Firefox. So this isn’t an issue with edit-list. Just browser-specific wonkiness.

Thanks for your help.
/Mike