I have a form which AJAX loads two drop menus for state and country when a user inputs their zip code.
When the content is loaded jQuery("#element").trigger('create') is called.
All inputs are within a table, however when the above is called on the new elements, the width of ALL form inputs is changed to the full width of the screen rather than their containing td elements - pushing out the right hand side of the screen
How can I trigger the JQM styling on these new elements without them becoming the full width of the screen?
Related
I currently have an html page including a series of patterns organized as follows :
a div including a jqplot aligned to the left of the page
the associated table below the jqplot.
I'd like to align the table to the very right of the jqplot.
Here is a link showing the current organization for the html :
http://snovae.in2p3.fr/canto/scratch/spectra_sample/SN2007le_fullrun.html
As for now I don't have any style within the html.
The jqplot is called with the div and the table is not currently within any div if this helps.
Any help will be greatly appreciated.
You should set your .jqplot-target elements to have a margin-left: 0px.
Those seem to have inline style set, act on this and set their style (which is always the same) via a css acting on their class, not on each individual elements.
I'm tring to make come UI test using Coded UI. Unfortuanley, It seems to not have access to all DOM elements in browser.
I want to assert value of one text block in form, and by"Add Assertion" the lowest element i can assert is form itself. All tags contained by form was flatten and putted to "id" property in "Add Assertion" widnows, like in the screen below:
Is there a way to assert only one tag in form? In this case i want to assert value "Szczegóły przesyłki: 0--1526203258"
It depends on how your web page is designed. From the image shown it it not clear what field contains the Szczegóły przesyłki: 0--1526203258. However, given (1) the scroll bar and (2) that the Id field is shown and is empty, it is probably the Inner Text field.
Given the number of lines shown above and below the required text you are likely to have selected a larger than necessary part of the screen. When creating an assertion is it often best to move the cross hairs tool around the screen to find the smallest control that contains the required field. Such a UI Control will have no child controls.
I have found that occasionally the Coded UI cross hairs tool loses its place and leaves all four (UP, DOWN, LEFT and RIGHT) arrows grey and inactive, as shown in the screenshot. When this happens try clicking the refresh button located between Add Assertion and the arrows. Some of the arrows should then be shown as black and active. If the DOWN arrow is grey (inactive) and some of the other arrows are black then the properties panel shows a UI Control that has no child components. You should be able to find a UI Control that contains only the required text.
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?
Here's my layout. I'm using a Kendo splitter control. The left pane contains a menu and the right is the main content. Some of the content pages contain kendo grids that can contain several pages of data. My problem is that when the user clicks on the next page of the grid, it performs a post back and the whole page refreshes taking the user back to the home page. The left menu loads the right panel using javascript. Does anyone know how to get around this?
In another words, I need the grid to load the next page and target the right side of the splitter control. How do I "Ajaxify" the next page of the grid control?
It sounds like your Grid is configured for Server Binding - if so you need to change it to Ajax binding and there is not other way to put it inside a Splitter which content is loaded with Ajax.
I have three tabs in a Jquery UI tabs widget. Inside of the tabs I am creating a Wijmo Grid. One on each tab. The Grid is based on Jquery UI as well. The grid on the first tab seems fine.
The grid on the second and third tabs (the hidden ones) have strange sizing issues. The Grid on one appears roughly 10 pixels wide and the full height. The one on the third tab appears about 50 by 50 pixels.
I know the code on those tabs is fine because if I make one of those the primary tab then it works fine and the other two are broken. So I think it is some sort of interaction between the Jquery UI Tabs widget and the contents of the tabs (a Wijmo Grid). Does anyone know what causes this strange interaction and what I can do to make it work predictably?
The Grid does size calculation when initializing. It needs to be displayed somehow when doing so.
You can add class="ui-helper-hidden-accessible" to make it off screen when rendering.
Make sure you initialize the grids then the widgets. Or you can call $("#grid").wijgrid("doRefresh"); when the tab is activated that it is contained in.