SAPUI5 fixed height for scroll container rendered dynamically - scrollview

I am trying to set a fixed height for a scroll container. The problem is, that I don't know the height from the beginning. I have to wait for the backend to tell me and after that the height should stay fix.
I already tried the value auto for the height property of the scroll container. This way the scroll container takes the height needed, but I doesn't stay like that.
Any time the screen size changes, the container takes the height to it's content. So it's not scrollable anymore.
Any ideas? Thanks for your help!

Wait for the server response and set the scrollcontainer height in success handler:
oModel.read("/Entity", {
success: function (oResponse) {
this.getView().byId("myScrollContainer").setHeight(oResponse.heightFromBackend + "px");
}.bind(this)

Related

Appcelerator: How to create Ti.UI.TextArea dynamically adjusting to content but with minimal height

I want to create a Ti.UI.TextArea object which would dynamically adjust its height to content but would have default height set (if no content). In Appcelerator if you don't specify height then it will automatically adjust its size to content but if there is no text then its size will be similar to textField. This is to small for me.
If you specify height property, then TextArea height won't change even if text will be longer than editable region.
I would like to have something like this:
var textArea = Ti.UI.createTextArea({
minHeight: 30,
});
or like this:
var textArea = Ti.UI.createTextArea({
minLines: 3,
});
I am looking for solution both for Android and iOS.
Is there any workaround for that?
You can change the height of the textField dynamically.
Add onChange event handler and change the height of the textField dynamically according to the number of lines in the text field.
Starting with 7.5.0.GA you can use maxLines on Android to be able to extend the TextArea to when pressing return. For iOS you have to create a work-around since there is no parity at the moment.

Horizontal scrollbar when a Rally cardboard is used inside an Ext Tab

I have a Rally.ui.cardboard.CardBoard as an item in an Ext.tab.Panel. When there are enough cards to cause a vertical scrollbar to appear, eating 16px of width, instead of fitting the new width dynamically, a horizontal scrollbar appears too. This doesn't happen when the CardBoard is rendered to document.body.
I've been looking for the right set of config options to make the TabPanel and its child items[] resize automatically. After two days trying in vain, I'm about to give up and just force a width of 1902px for PCs and 2862px for Macs. If anyone has a better idea, I'm more than willing to try it... anything at this point.
We could find no way to do this through config options alone, so we ended up listening to the App's own resize event and updated the panel size. In the App config we have this, and it does the trick:
listeners: {
resize: function( app, width, height, oldWidth, oldHeight, eOpts ) {
if (app.TabPanel) {
app.TabPanel.setWidth(window.innerWidth);
app.TabPanel.setHeight(window.innerHeight);
}
}
}
If anyone has a better solution that only uses config options and the framework does the resizing, I'd still like to see it, as the above is an ugly hack even if it works.

ScrollViewer and SetHorizontalOffset

I use scrollviewer in my windows store application, but after calling SetHorizontalOffset function some times scrollviewer doesn't change horizontal scrolling. The same thing with vertical scrolling. Does anybody know how to work with it? May be scrollviewer scroll only for visibility for offset (I mean that if it's see that user can see offset its doesn't scroll at all)
It appears the ScrollViewer's offset lags by one frame.
If the below code is run every frame, diffPrevDesiredActual is always 0. That is to say, the value provided by ChangeView does not take affect immediately.
...
var scrollPosition = /*some new value*/;
MyScrollViewer.ChangeView(null, scrollPosition, null, true);
var current = MyScrollViewer.VerticalOffset;
var diffDesiredActual = scrollPosition - current;
var diffPrevDesiredActual = previous - current;
previous = scrollPosition;
...
private double previous;
If nothing on your screen is animating when you change the scroll offset, then it is possible the ScrollViewer won't show the new value until something triggers the draw of a new frame. To test this hypothesis, try adding an infinite animation (eg ProgressRing) to ensure frames are constantly being drawn.

dojo Tooltip repositioning after content is loaded

ALL!
I have dojo tooltip which is connected to an element.
It is created when/after page is loaded/ready. BUT, the problem is that content is loaded dynamically, when connected element is hovered the first time.
Content is loaded via AJAX. And - as far as the size of HTML content is unknown (widget is created, but content is still empty) - after hovering and content loading - Tooltip is appeared, but ARROW does not point to a connected element, but shifted down.
How to reposition a widget arrow after content is loaded dynamically?
Thanx a lot in advance!
UPDATE
After some investigations i have found, that position of tooltip Arrow is adjusted by
.tundra .dijitTooltipRight .dijitTooltipConnector class height (14px by default)
So i made quick and dirty fix for now:
function fixArrowForTooltip() {
// FIX ARROW (TODO HACK)
$(".tundra .dijitTooltipRight .dijitTooltipConnector").css("height",
"14px"); // restore to default for multiple tooltips in the page
var newHeight = $("#dijit__MasterTooltip_0").height() - 14;
$(".tundra .dijitTooltipRight .dijitTooltipConnector").css("height",
newHeight + "px");
// end of FIX
};
And placed this into onShow()...
I know, this should be re-worked, but.. WORKS PERFECT :)))
For any number of tooltips in the page arrows point DIRECTLY to connected elements :)

Sencha Touch: After scrolling a panel using a button tap it back to initial position again when scroll end

I am trying to scroll a panel using button tap, and the panel is scrolling as I want. But my problem is that,
After scroll end it back again to its initial position, doesn't stick to its new position.
Why this behavior and how can I get leave from this?
Code I used (working just fine)
var container = this.getDealdetails();
container.getScrollable().getScroller().scrollTo(x , y, true);
The scrollable container will scroll back if the scroll to position is greater than the height of the container.
This is best demonstrated with an example. Run this fiddle: http://www.senchafiddle.com/#8Qnt8
Make your browser window smaller in height and note how it behaves. Hope this makes sense.
var panel= Ext.getCmp('iObserveCreateRecords');
panel.getScrollable().getScroller().scrollTo(0, 0, true);
//iObserveCreateRecords is panel id