Apps scripts FixedFooter covers input selection - javascript

I'm having an issue with the FixedFooter class in my gmail addon. Basically if there is enough items in the SelectionInput the last few items get covered by the FixedFooter.
For example in the image bellow there is supposed to be 50 items but the last five are hidden behind the FixedFooter (the create project button). Is there any solution to this?

It's a bug, already filed on Google's Issue Tracker and being worked on.
While waiting for it to be fixed, your workaround of adding empty items at the bottom is a good way to get aorund it.

Related

How can I determine which photo belongs to which product variation from the source code? Something is changing display to "none"

OBJECTIVE
I am scraping a website. This is an example of a product page I am having trouble with.
When one clicks on one of the variations on the right, all (or most, depending on the product) of the images on the left change. All that I need to do is determine which photos in the gallery belong to which of the variations from the source code.
WHAT I MANAGED TO FIND OUT
The image list that contains all images is located in a div of class name "sly_carousel". When a click takes place, their style="display:" is either set to none or removed.
PROBLEM
I can't find where the rules that determine which images are shown/hidden on the left when an image on the right representing a variation is clicked on are located so that I can then tell which image belongs to which variation.
WHAT I HAVE TRIED
I inspected the code to the very best of my ability using Chrome's inspector. I found nothing either in the source or inside the little CSS window that also appears.
PAGE LINK
https://www.feiradamadrugadasp.com.br/corretivo-liquido-natural-beauty-jasmyne-1/p/194164/
A kind friend taught me it was actually done via a post request. Thanks anyhow!

List with 3500+ items is loaded via ajax a small bunch at a time. Stops updating in the UI, but I see the li tags being appended in DOM

I have a use case where there are thousands of items on a list shown to the user. They are loaded a small batch at a time and I see the network traffic going in and out, I see data getting loaded. I see the DOM getting bigger, but the list itself in the UI stops updating (Chrome).
When I examine it, I see thousands of items in the code, when I select the items through console and make it count them, I see the proper number. But in the page itself, I don't see these items get displayed. The list uses drag-and-drop to put items from it into another list (and load additional data about them).
Not using jquery.datatables at the moment, but been meaning to migrate to them a long time ago. I can’t find a good example, though, everything I see uses pagination to split, but what if this is not an option?
How can I pinpoint what it is that is preventing the items from display? The number of entries will vary between 500 and 20 000.
Never mind. everything works as intended, duh. I was stupid and missed something very obvious: things had "display: none" for a very good reason about which I totally forgot (has to do with the core logic of the application). Next time hit me with a stick so I could remember to pay more attention.
Not sure what you meant by saying 'DOM getting bigger' but 'don't see items get displayed'.
Typically JS has a main thread which will handle functions/callbacks as well as view-refresh. So if you operation is blocking , the view will not be refreshing.
As for the pagination is not an option thing, you can consider using DOM-lazy-Loading mechanism where you only put what should be in the current viewport into the dom. As user scroll, you calculate the scroll height dynamically to add/remove items to/from the DOM. One thing to remember is you typically need to define a fixed height for your rows so that you could do the calculation. This lazy-loading way is a common way of solving this type of problem and is widely used by different frameworks like GXT, angular-gird..etc.

How to customize kendo editor tool arrangement?

I am using the KendoUI html editor, in inline mode. It works fine, but I have found some problems with the arranging of toolbar items. Namely:
I have added custom tools to the toolbar. They are not correctly 'tagged' with the k-group-start, or k-group-end classes, and thus thir edges, and margins are not correct.
I can't influence where the toolbar puts in the 'k-group-break' item (what makes a linebreak on the toolbar).
I have tried to modify these in the selection changed event (according to the demo page, that gets fired every time I click into the edited area), but the kendo built-in logic overwrites my changes after that.
Has anyone encountered this problem? What could be a good solution? I am pretty lost, since I haven't found anything on this topic in the kendo documentation, so some hack might be needed.
Just add a tool ".Separator()" in your tools list and it will create an empty "li" ..
<li class="k-separator k-group-start"></li>
you can than style this element to create the spaces, I have made this li as a block element so it pushed everything which follows down.
Hope this helps.
Cheers

jQuery data rendering issue

I'm trying to render a menu containing check boxes something using JQuery according to a defined template in a div. I have a search box which will narrow down the menu.
There is something strange happening. When I have huge list of menu items (around 5000 items), it renders fine initially. Then if I type something and narrow down the result, it works fine. But when I press backspace and go back to the full list of items, the div gets displaced for a second and reappears in the correct position.
I have no clue of whats happening. Any pointers on where to look to debug will be helpful. Thanks!
Take a look at the Chrome Developer Tools. There's a ton of things in there you'll probably never use, but for this task I'd have a look at the elements tab and also the scripts tab to pause JavaScript events and inspect the DOM elements' styles.
This is a generic answer to a generic question though. If you're using Firefox, check out Firebug, but I prefer Chrome's tools and find them better integrated and user friendly, mostly from having used them a lot more.

Need something to give me a swap image on click behavior

I can use CSS or javascript but I've been struggling with it. It needs to be an "on-click" behavior when you click on the number in the lower right corner... like this one: http://www.winteradagency.com/mrw/images/residential2.jpg
So that when you click on #1 you get the first photo, #2 the 2nd one and so on...
Any ideas?
thanks!
Without showing what you've tried, I'm a little reluctant to just give you the answer. You'll learn more if I don't. If you provide code and show where you're stuck and such, well, that's a different story.
That being said, if you want to use jQuery, there are some nice plugins that have a similar functionality to what you want. One of them being Easy Slider. Here's also a list of 15 jQuery Image Gallery Plugins that I got from doing a quick google search.
Why not create four buttons and align it to right end, and everytime the image changes you update the text of the buttons. Each button could simply update the image to the one corresponding to its number.

Categories

Resources