I have a numeric textbox that renders correctly in Chrome but not in IE11. This is how it appears in IE11:
Apart from the look, the buttons do not work either.
This is the html generating it:
<label for="length">Length:</label>
<kendo-numerictextbox formControlName="length" [min]="0" [max]="maxLength" [autoCorrect]="true" id="length"
decimals="2" format="#.##'m'" placeholder="Length (meters)">
</kendo-numerictextbox>
Any help would be much appreciated.
Related
I am trying to automate the navigation of a website. I cannot choose a radio button using the methods I know so I hope someone can guide me. Here is the html:
I have tried different versions of
bot.FindElementByClass("css-k2m43g-RadioWrapper ewsdbue1").Click
bot.FindElementByClass("css-njdfi2-NativeRadio ewsdbue3").Click
bot.FindElementByClass("css-34xfl3-CustomStyledRadio ewsdbue2").Click
but that crach the VBA.
Any suggestions?
Try css attribute = value selector
bot.FindElementByCss("[type=radio]").click
I have a situation with the Sortable I can't seem to replicate in Plunker.
From what I can tell, Sortable slows down a lot because of something in change detection. Slow to the point of unusable. Visually, you can see the first animation, but then it very slowly refreshes as it slowly finishes change detection.
Here's a plunker that mimics what I have in my code.
http://plnkr.co/edit/veH2Y6CkFZ1Dc5jwcPWZ?p=preview
<kendo-sortable [data]="columns"
zone="abcdefg"
[animation]="true"
[activeIndex]="activeIndex"
itemClass="item"
emptyItemClass="emptyItem"
activeItemClass="activeItem item">
<ng-template let-column="item">
<div class="container" (click)="itemClick(column)">
<span class="col-name">
{{column.title || column.field}}
</span>
<span class="col-width">{{column.width}}</span>
</div>
</ng-template>
</kendo-sortable>
Basically the dialog is wrapped in a reusable component where I feed strings, templates or components into.
The "columns" array coming into the Input of SortableThingComponent is a copy of the array (all new'd Column objects) from a kendo grid.
Since I can't replicate the slow-down, I'm not sure what's going on. Does anyone see anything or have any tidbits about Sortable?
Edit
Here's an updated plunker that includes a grid. I noticed that if I didn't have data in the grid, the Sortable was faster. Workable, but still a little bit slow. The grid is virtual scrolling, page size 100.
http://plnkr.co/edit/hw8HaKpyZ0lRlVwF2tYp?p=preview
Edit 2
Updated the last plunker with data. Now I'm repro'ing the issue.
What can be done about this?
Here's a fix for now; detach the change detector for the grid component while the dialog with the sortable is open: http://plnkr.co/edit/yy1Z4rWC53vS3xCnxrWT?p=preview
constructor(private changeDetectorRef: ChangeDetectorRef) { }
this.changeDetectorRef.detach(); // when dialog opens
this.changeDetectorRef.reattach(); // when dialog closes
In the plunker, I had to add a this.changeDetectorRef.detectChanges() because of the way I'm opening the dialog.
For now, this is an OK workaround. I might play with the change detection strategy to get it all a little more efficient
In an XPages application I've been given the following HTML code for a navigation bar which will be used to select which of three different Custom Controls display:
<ul class="Navigation">
<li>Option One</li>
<li>Option Two</li>
<li>Option Three</li>
</ul>
I know lots of ways to display or hide Panes or Divs or Custom Controls from buttons or code but I can't figure out how to do it from a simple HREF call. I've tried hiding a div using dojo which works in CSJS in a button but not here, and using CSJS to set a sessionScope variable which of course doesn't work:
<li>Option One</li>
<li>Option Two</li>
I'd appreciate any help with this. Thanks very much in advance!
If you want to hide a custom control based on url. I believe that's can be done via the dynamic content control that comes with the ext library or 9.0x. I might have the name wrong but should be close. I think there's an example in the ext library demo app that you can get from OpenNTF.
You could hide the whole <li> element by using a panel:
<xp:panel tagName="li" rendered="...">
...
</xp:panel>
Just calculate the rendered property with your logic for that panel element.
Use XSP.partialRefreshGet() or XSP.partialRefreshPost() to refresh your panel with all custom controls from client side. Set a parameter "option" with the current value.
javascript:XSP.partialRefreshGet("#{id:panelAll}", {params: {'option': 'One'}}
Refresh the panel on server side testing the delivered option with
param.option == 'One'
and render your sub panels accordingly.
If it must be
href="optionOne"
or similar, you could try with
href="currentpage.xsp?nav=optionOne"
and use param.nav in your code to find out which option is selected. Much like Knut's idea, but then doing a full refresh.
Is there any possibility to make an editbox in xpages that looks like an editable field - notes style from Lotus Notes? Or to be able to display the field value in more lines, if it necessary ?
I tried adding Auto for the editbox, but it no works.
rows and cols properties allow you to change the size. You can also use Dojo Simple Text Area or Dojo Text Area controls from Ext Lib. The latter auto-expands depending on the content, so rows and cols are not applicable (see the part in XPages Extension Library book on that).
If you're talking about the field handles round the top left and bottom right of a field, I don't think web development supports partial borders. It will be a generic CSS web development solution you require, rather than anything specific to XPages.
I know this is kind of late but here's what I came up with:
https://codepen.io/gcoxdev/pen/MmdrYz
<div class="notes-field">
<div class="notes-editable contenteditable="true"></div>
<textarea name="test"></textarea>
</div>
Of course, you'll have to convert that to xpages markup.
Essentially I'm creating a content-editable div with unicode characters for the handles then updating the underlying textarea with javascript.
You can read my article about it here:
http://gcoxdev.com/xpages-notes-style-field
Hope that helps!
So I load some simple HTML into a webview.
The html is in the format: (it is extracted html, therefore no body tags.
<p>..blah</p>
<div style="text-align:center;">
<a href="http://services.runescape.com/m=rswikiimages/en/2012/5/combat1-18140712.jpg" target="_blank">
<img src="http://services.runescape.com/m=rswikiimages/en/2012/5/combat1_thumb-18140804.jpg"></a></div>
<p>..blah</p>
In the webview activity class I add:
webInfo = "<body style=\"color:white;font-size:15px\">" + webInfo + "</body>";
//for setting the size and color of the text
I use the following to load the html:
webview.loadDataWithBaseURL(null,webInfo,"text/html","UTF-8",null);
// webInfo is an html string
and I do the following so that it doesn't scroll horizontally and so that the image fits within the screen.
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);|
If I don't use SINGLE_COLUMN, I'm always scrolling horizontally, even though the text fits nicely within the page. I thought it had finally solved the problem but I get overlapping html when i load it. This fixes itself if I zoom slightly in or out with my fingers.
Here's a picture of whats happening:
Question 1:
How do I fix that problem and display the image so it fits in the screen and no horizontal scrolling is required?
Question 2:
I've also been having trouble getting rid of the weird symbols too, my 's show up really weird.Tried using several different encodings like UTF-8, US-ACSII and lots of Windows ones, none of them seem to work to get rid of the symbols.
I hope I've been clear, any help is appreciated, I've been fiddling with this for a while O_O...
Add in webview settings:
webSettings.setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING) //handle for font overlapping.