Rails / Prototype - Modalbox Dialog Centering Issues - ruby-on-rails

I have an issue with the Prototype Modalbox Dialog not fully displaying in the user's browser, depending upon the user's screen resolution. For example, part of the content in the Modalbox is cut off by the browser viewport, and there's no way for the user to view it.
I believe it has something to do with the sequence of the content and Modalbox being loaded. For example, the Modalbox Dialog is generated, THEN the content is loaded -- this ultimately results in the Dialog not being centered in the user's browser viewport.
I am wondering if anyone else has ran into this issue? If so, what are you programmatically doing to make sure that the Dialog display optimally?

I remember having this issue. Usually it happens when ModalBox doesn't know the width/height of the content that it's loading. These steps help (no need to apply all of them, try and see what works best for you):
1) Wrap the content that will be shown in ModalBox in a DIV and set the height/width CSS properties for it.
2) Make sure that if there are images in the ModalBox content, that they have the width height also set.
3) Preload the content before you even display the ModalBox.
4) Use ModalBox callbacks (onShow if I remember correctly), and call the function to recenter it.

Related

Positioning dynamic controls dynamically in iOS ViewController

First of all, let me tell you that I am new in Xamarin.
I am facing a problem in rendering controls dynamically on UI.
Approach I am using is: Xamarin.iOS
I have list of Questions having different Question Types
I loop through all questions and render them according to the question type.
Client wants to have HTML in Question Title, so that he can add any type of html tags including images, links etc in HTML. (I cannot use ‘NSAttributedString’ because it doesn’t support all HTML tags)
I am not using AutoLayout
I think UIStackView is a new control which is not available for older versions
Problem is, when I render UIWebView for QuestionTitle, and other control (let us say UITextField) for simple input from user, I do not know about the exact content length of Title (which is HTML) and therefore, I set default height of UIWebView as ‘100’ and once WebView is loaded, I set the height of webview according to the content size height. While rendering control, I calculate the Y-axis for every control to be rendered. When WebView is loaded, its height gets shrunk or expanded according to the size of content and therefore, the preceding sibling’s y-axis remains there since we don’t know how much siblings are there whose y-axis should be adjusted. (Keep in mind we have multiple webviews, as we have more than 1 question).
Is there any way, we can position all controls automatically (Just like we have LinearLayout in Android)?
Is there any better approach I can follow in order to resolve this kind of blocker?
I will really appreciate your help in this problem.

How to make Filemaker textbox resizable according to content

I'd like to create a layout to show this table in list view, the point is to make the text field resizable according to content. I have try several method, but all fails. I am using FileMaker 12.
Any help much appreciated.
For Browse mode you can set layout objects to dynamically resize based on the layout size, but not on the object contents. If you need this functionality in Browse mode you will probably need to use a web-viewer.
In Preview mode you can use sliding left and sliding up for reduction of the size of the layout objects, but there is no option to expand.
In Browse and Find modes, if a field isn't set to have a scroll bar, the field will expand while the user is entering data, but only then. It will return to the default size when the user navigates to another field or another record.
In Preview mode, you can make the field larger than it could possibly need and set it to slide up and also reduce the size of the enclosing part. But the user won't be able to interact with the interface of the layout (can't click buttons, change data, etc.).
A workaround might be to use a tooltip. If you set the tooltip to the contents of the field itself, then the user can hover over the field to see any expanded contents.
If you really need exactly the functionality that you mention (which I would define as having field height and enclosing body part expand in list view based on the field's content length while in FileMaker), the only way I could see doing it would be to use custom web publishing to create a web page and use FileMaker's web viewer to show that web page. F 'n' web has an article that might be of some assistance if you go this route.

Customize Scrolling for Onsen Page (Pull to refresh)

I have a ons-page element that I want to customize the scrolling for. There are a few things I'd like to achieve, but mostly I want to understand what's going on.
By default, the page has -webkit-overflow-scrolling: touch. This is undesirable for two reasons:
The area "behind" the page shown during overflow is just plain white
I have no hooks to take action on over scroll. I'd like to add pull to refresh mechanics.
I've tried working with iScroll, but the behavior I'm seeing is that if I declare my scrollable element to be inside of the page, it calculates the full element height as the visible height. If I declare my scrollable element to be the page, I can move the page around, but not the content within the page.
I'm guessing some of this is related to "using native scrolling where it can", but I don't really understand how that's implemented, so I'm not really sure.
Any ideas?
Onsen UI doesn't support pull-to refresh as default.
How about using this library?
https://github.com/mgcrea/angular-pull-to-refresh
This is a library for angularJS.
P.S
Now Onsen UI support pull-to-refresh. http://onsen.io/reference/ons-pull-hook.html

How to make a DIV get Voiceover focus when it doesn't contain any focusable HTML?

I have an email client application, and I'm changing the way we show attachments for an email. Previously we had them up at the top of the email viewer in a scrollable list; now we're moving them so that they're displayed as a list at the bottom of the email content. For reasons related to the UIWebView control, it was necessary for me to implement these attachments as HTML code that is programmatically appended to the HTML of the original email (instead of doing them like a normal person would, where each attachment is just a UIView in iOS).
I'm now trying to configure accessibility for these HTML elements and running into some problems. Each "attachment" consists of a button-like background which is actually constructed from 3 images: one for the left side of the button, one for the right side of the button, and a middle portion which is stretchable (this allows the button to stretch in width without distorting the edges). There's also a paper clip image and a right-arrow image laid out on the "button", and two sub-DIVs for displaying the file name and its size.
The problem is that I want to make the outer DIV that encompasses all of these sub-elements to be the only thing that is focusable by Voiceover, and I want to be able to control what is announced by Voiceover for this DIV (so that I can include the file name, its size, whether or not it's currently downloading etc.). However, it seems that the only things Voiceover wants to focus are the three-subimages that make up the button background (and they're announced by their filenames) and the two sub-DIVs that show the filename and the file size. If I hide all of these sub-elements from Voiceover by setting aria-hidden="true", then nothing gets focused at all. If I set aria-hidden="false" on the outer DIV, the DIV is still not focused.
Is there any way to make a DIV focusable by Voiceover even when it doesn't contain any inner HTML content that Voiceover would focus on its own? I think I could hack a solution where I stretch a completely transparent PNG over the DIV and make that the only inner element with aria-hidden="false", but even then I'm not sure how to get Voiceover to read something other than the file's name.
Update: OK, it seems I can sort of achieve this by adding role="button" on my DIV while keeping all of the sub-elements aria-hidden="true". The entire DIV is now focusable, but it still announces itself as a "button" (I'd like it to say "attachment" instead as the type, but I can live with "button" if necessary). The main problem I'm now encountering is that Voiceover seems to ignore the aria-label property, and instead reads out any text that is contained in my sub-DIVs. Is there any way I can get Voiceover to read the aria-label property that I explicity set instead?

Placing an image in the titlebar of a firefox sidebar extension

Is it possible to put a background image, and/or modify the close button (X) in the sidebar's titlebar?
I know I can set the text value of it by changing sidebartitle="" but is there any way to put an image in there?
Basically I'd like to put my logo up there instead of inside the sidebar where real-estate is already limited.
I'd also like to be able to do this without modifying my profile CSS so that I can deploy the changes with the extension.
Any ideas?
I ended up finding the element within sidebar-box with the ID of "sidebar-header" and setting that to a variable named "sbhead".
I was then able to sbhead.style.display="none";
Finally in my overlay.xul I added an hbox tag as a new header and set the height to 25 pixels so it would look about the same as the tabs.
Inside the hbox I added the content I wanted, to include a close button that calls toggleSidebar() so that the functionality of the header was the same.
I hope this is helpful to someone!

Resources