So... Any bright ideas how we can enable Horizontal content stretching on the GroupHeader template of a Grouped ListView in Win RT - phone?
I'm all ears!
I've added a demo application so you can try it out - please do before posting your answer!
Code can be found here https://github.com/Depechie/ListView-HorizontalStretch-RT81
I added 2 pages, MainPage has the problem of not having Horizontal stretching.
MainPage2 has a fix for Horizontal stretching, but because of that fix, the JumpList ( zoomed out view ) is not working anymore.
You can navigate from MainPage to MainPage2 through the appbar button.
Here the 2 visuals
Your fix is overly complicated and deprecated. What you need for your group header style is as simple as the following:
<Style x:Key="FixedHeaderContainerStyle"
TargetType="ListViewBaseHeaderItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
And apply it to your ListView like so (old ContainerStyle is deprecated and replaced with HeaderContainerStyle):
<GroupStyle HidesIfEmpty="True"
HeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
HeaderContainerStyle="{StaticResource FixedHeaderContainerStyle}" />
BUT the header fix wasn't the reason why your ZoomedOutView stopped working. The issue is because you added the following to MainPage2:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
VirtualizingStackPanel breaks this and the new and improved panel (that includes virtualization is ItemsStackPanel, which is also the default now so omit this altogether.
If I understand the problem, add Width="{Binding ElementName=LayoutRoot, Path=ActualWidth}" to your MobileAppsGroupHeaderBorder on MainPage. That'll render as full width like MainPage2 but the jump list functionality is maintained as normal.
Related
I really feel like this is a therapy because I wouldn't post here if I wasn't seriously struggling. I can't figure out what's going wrong but my menu title and icon seem to start overlapping randomly when I switch views. In addition, sometimes even the main content in the view disappears making the app useless.
I cannot click on the icon once this happens.
Screens:
in my menu.html, I believe this is the relevant part
<ion-side-menu-content drag-content="false">
<ion-nav-bar align-title="center" class="header" ng-show="isInApp()">
<!-- Hamburger Menu Button -->
<ion-nav-buttons side="left">
<button class="c-hamburger" menu-toggle="left" ng-class="{'is-active': isActive === true}">
<span>toggle menu</span>
</button>
</ion-nav-buttons>
<!-- Settings -->
<ion-nav-buttons side="secondary">
<img src="icons/settings.png" alt="Settings Icon" class="nav-button-icon" ng-click="goToSettings()" ng-class="{'settings-button-is-active': settings_isActive === true}" ng-if="isUsersOwnProfile()">
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="mainView">
</ion-nav-view>
</ion-side-menu-content>
I then define the view name in separate template files like so
<ion-view view-title="CMON NOW">
Any advice what might be happening here? I tried copying laborously the same menu code into each view and defining the view there as well through ion-nav-title but the result was the same.
Thanks
The original question was posted on the Ionic forum. Since then, I have removed all but one ion-content elements as I found a similar question with the marked answer saying to not ddefine new ion-content directives inside of my view html, but no luck still.
I had a similar problem with an app I'm developing. The title alignment was initially working on all pages at app launch. I have the title alignment set globally with
$ionicConfigProvider.navBar.alignTitle('center');
Found from the ionic documentation: http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
The default value should be centered anyway.
After some long hours trying to figure out this problem I noticed that the title alignment problem always started with one particular page in my app. After visiting this page the title alignment was wrong randomly - not even always happening and happening in random pages of the app. I noticed in the development tools console that I was getting an error in this particular page (with $ionicNavBarDelegate stuff). After fixing this error the title alignment issue was fixed.
So in your case I would make sure there are no other errors in the code itself and this could fix and hopefully fixes your problem.
This is just a long shot and might not be the case in your app but hey, it could help debugging this problem for you and hopefully you get it fixed.
EDIT: Also came across this discussion which might be a cause to the problem and plausible fix.
https://github.com/driftyco/ionic/issues/2881
From the discussion I made a solution which ultimately solved the issue.
$scope.$on('$ionicView.afterEnter', function (event, viewData) {
$timeout(function() {
$ionicNavBarDelegate.align('center');
}, 100);
});
Try it out! Unfortunately this seems to be an angular issue rather than a ionic problem.
SECOND EDIT:
If nothing else helps you can disable the translate3d css attribute which is used to animate in the titles since it seemed that this was sometimes broken in my app. (there could be a better solution to disable the animation but I did not investigate since I was in a hurry with the fix). The css:
.title {
transition-duration: 0ms !important;
transform: translate3d(0px, 0px, 0px) !important;
text-align: center !important;
}
This ultimately solved the problem for me.
Ionic link for doc
http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
You can set it using application config
appname.config(function($ionicConfigProvider)
{
$ionicConfigProvider.navBar.alignTitle('center');
});
You can use z-index property, for you button.
.button {
position: relative;
z-index: 9999;
}
I'm developing an SAP-ui5 XML view. In that view I created dynamic custom tiles using the CustomTile tag, as demonstrated in this image:
<TileContainer
id="container"
height="400px"
tileDelete="handleTileDelete"
tiles="{/TileCollection}">
<tiles>
<CustomTile id="ct1">
<content>
<VBox>
<Toolbar class="backcolor" design="Transparent">
<Text class="sapMHeader" text="Dynamic content" />
</Toolbar>
<Button type="{infoState}" text="Button"
icon="sap-icon://approvals"
ariaDescribedBy="defaultButtonDescription genericButtonDescription">
</Button>
</VBox>
</content>
</CustomTile>
</tiles>
</TileContainer>
Currently, clicking on the navigate button slides three tiles per click. I want to get it to slide only one tile per click. How do I achieve this?
The TileContainer control is responsive meaning how many tiles you see totally depends on the available screen space and nothing else. The scroll-buttons act as an overflow and slide a complete 'page' just as a Carousel would do. There is no way of changing this behavior via existing API.
If you really want to adapt this behavior TileContainer.prototype.scrollLeft and TileContainer.prototype.scrollRight are probably a good starting point.
BR
Chris
I'm working on aspx pages and i have asp.net Menu and CSS assigned to it.
But when I run the application the CSS class names get changed and its dynamically created as we see in controls inside "ContentPlaceHolder".
The code is
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal">
<DynamicItemTemplate>
<%# Eval("Text") %>
</DynamicItemTemplate>
<Items>
.
.
.
</Items>
</asp:Menu>
please check this Image what i get when i run this..
I checked my application to know whether the Menu control is placed inside content placeholder or anything. But its not.
Do anyone know how to solve this issue.
class="menu ct100..." means that this element has two classes 1:menu and 2:ct100...
and nothing is wrong with it!the ct100... is generated by asp.net and if it is different any time you run the page it's up to asp.net component and if you dont like that try not to use this built in component, that i think you should do it.
by the way the only thing is changing when using master pages is client side id, that you can avoid this from happening by code below
<asp:TextBox ID="myId" runat="server" ClientIDMode="Static"></asp:TextBox>
set ClientIDMode to Static
A very well known fact to improve the performance of a Flex app is to reduce the amount of nested containers, yet doing so seems particularly hard for me to do.
I'm developing a mobile app and resizing some of my components at runtime is quite slow (I can switch components to fullscreen and back again), we're speaking of 500-1000ms, which isn't really nice. Less complex components resize instantly with no noticeable lag, which is what I'd like for all components.
Let's assume the following component (simplified of course and some groups are components by themselves, but the nesting level is quite accurate);
<VGroup "the component's base">
// I guess this is fine
<HGroup "the component's title bar">
<SkinnableContainer "title bar skin">
<title bar components, labels etc. />
</SkinnableContainer>
</HGroup>
<HGroup "options bar that has switchable components">
<button />
<array "holds 'views' for the options bar that can be switched">
<HGroup "one option view">
<option view contents, labels etc. />
</HGroup>
<HGroup "another option view">
<option view contents, labels etc. />
</HGroup>
</array>
<button />
</HGroup>
That's it for the basic component layout. I'm not sure if the options bar can be optimised, the two buttons are used to switch the content which itself is placed between the buttons, hence the upper HGroup. The components inside the array need to be aligned horizontally as well, hence the child HGroups. That's already down to nesting level 3 in this component, which by itself is already a level 3 container (due to my navigation).
To the component's content area;
<Group "this is the content area">
// this group needs two different layouts (vertical and horizontal) that
// are switched based upon the user's choice of having the component maximised
// or minimised
<layouts />
// this list changes it's size based on the selected layout
<List />
this group also changes it's size based on the layout
<VGroup>
<scroller>
// the group here holds a large label that needs to be scrollable
<group>
</scroller>
<HGroup>
<some basic components like `SkinnableContainer` and `Label` />
</HGroup>
</VGroup>
</Group>
And that's pretty much the layout of my worst performing (layout resizing wise) component, closing tag...
</VGroup>
... and we're done.
So the big question, is there room to optimise this? If so, where can I start? Obviously the layout manager has to calculate quite much during the layout switching process.
Unfortunately, since this is a mobile app, I can't work with absolute sizes at all as I need this app to work on a variety of platforms and resolutions, thus all groups have relative sizes assigned, usually 100% for both width and height.
I'd really like to streamline this, but I just don't know where to start. Any tips what I could do?
I was in charge of much of the same thing for a previous project, and while there was no 1 magic bullet that eliminated a chunk of problems, it fell in line with the "death by a thousand papercuts" theory.
A few examples of improvement based on yours:
The TitleBar: The skinnable container also has a layout property, why not just eliminate the outer Group shell, and start with the SC as the base?
<!-- <HGroup "the component's title bar"> -->
<SkinnableContainer id="originalGroupId" "title bar skin">
<layout>
<HorizontalLayout />
<layout>
<title bar components, labels etc. />
</SkinnableContainer>
<!-- </HGroup> -->
The OptionsBar: I don't know if there are limitations in the mobile space, but can you use a container that uses the INavigatorContent interface? IE. Something that will essentially use a creationPolicy flag that will only create the grandchildren of the container until the user actually requests it. With groups there is no concept of virtualization so all components get created at the instantiation of the parent.
<ViewStack "options bar that has switchable components">
<button />
</ViewStack>
The Component Area: This gets a little more challenging, sometimes it helps (at least it does for me) to take a 10,000ft view of what information you really want to display. For instance, the scrolling for a really long label, can you use something like a TextAera instead? If so that would eliminate the outer shell:
// the group here holds a large label that needs to be scrollable
<TextArea text="my really large label">
</TextArea>
Hope that helps...
Might be irrelevant, but I'd also advise against using Lists. Maybe it's not the same, but I changed one of my components from using List to dynamic skin parts and rendering of said component was noticeably faster (600 vs 100ms). Lists are pretty heavy in Spark.
This question was previously posted on Primefaces forum where I din't receive any answer.
I'm trying Primefaces 3.1 because I would need the overlay panel functionality.
Unfortunately in my Internet explorer 8 (ie8) the following very simple overlay panel is never displayed, while it works quite fine on Firefox 5.x.
Some points in the html code which seem directly related to the Ie8 problem are the following:
- the page doesn't need a vertical scrollabar (if the page has one the overlay panel is shown)
- the overlayPanel height is fixed.
<h:body>
<div style="height: 300px"></div>
<h:form>
<p:commandLink id="showAllUserList" value="Utenti online" />
<p:overlayPanel for="showAllUserList" my="right bottom" at="right top" dynamic="true"
style="width: 300px; height: 500px; border: 1px solid red; overflow-y: scroll" >
He who rules the skies rules the ground
<br/>
Monti kicks ass
</p:overlayPanel>
</h:form>
</h:body>
If I don't find a workaround soon I would have to implement something myself.
Thanks
Filippo
Put the following Javascript code before closing the h:body Tag.
<script type="text/javascript">
if ( $.browser.msie) {
if(parseInt($.browser.version, 10) === 8){
var overlayPan = $("div.ui-overlaypanel");
$(overlayPan).css('position','fixed');
}
}
</script>
You might try setting appendToBody to true for the overlay panel. This can help in some situations, though to be honest I think your page is simple enough that it wouldn't make a difference.
Check your styles for overflow:hidden (also of the child elements of .ui-overlaypanel), play around giving them overflow:visible - in combination with a fixed size (as you already have) I was able to solve the problem.