Im trying to have a Label on top of the Map but when I put them inside a Grid like this
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Red">
<Frame BackgroundColor="{StaticResource Color2}" Margin="0">
<Label TextColor="{StaticResource Color5}" FontSize="60" FontAttributes="Bold" x:Name="TituloNombre" HorizontalOptions="CenterAndExpand"></Label>
</Frame>
<local:CustomMap IsShowingUser="True" HasScrollEnabled="True" HasZoomEnabled="True" MapClicked="mapaXaml_MapClicked" x:Name="mapaXaml" Opacity="0.5"/>
</Grid>
The map covers the Label and the only way I can see it is by changing the opacity of the map.
Items within the Grid will be rendered back to front. Ie, things that are listed first will be behind things that are later in the same container
Reorder uour Grid so the Label is after the Map
Related
Predefined phone functionality: When we focus on any input it will automatically scroll to that input in mobile device.
Problem: Its not working in my ionic app, because of horizontal scroll also there, so when i click on input in mobile device, it is not scrolling automatically to that input and input hides behind the keyboard.
I have tried delegate-handle for this, but it's not working.
Plunker for the same
HTML
<ion-scroll direction="xy" class="scroll" delegate-handle="nomineeDiv">
<div class="table-row" ng-repeat="data in nominee"><!-- Multiple div show horizontally -->
<form name="data.formName">
<!-- Long vertical form
.....
.....
after 4 input tags -->
<input type="text" name="something"/>
<!-- Need to scroll to input when input focused -->
</form>
</div>
</ion-scroll>
Controller
$ionicScrollDelegate.$getByHandle('nomineeDiv').scrollBy(580, 140, true);
Solution.1 Can you try to create a double click event on which change the position of form to be static? That may take your footer to top position.
Solution.2 Using CSS apply overflow-y: scroll; on the form.
Solution.3 You can also try to remove preference <preference name="fullscreen" value="true" /> in config.xml file.
I had the same issue and I resolve it using Solution.2.
Here is a link -- Keyboard Hiding Inputs Problem
I could solve this by adding "scrollAssist: true" and "autoFocusAssist: true" to app.module in the #ngModule. Like this:
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {scrollAssist: true, autoFocusAssist: true}),
]
and add css on column like this
ion-col{
position: initial !important;
}
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 have a Windows Phone 8 application (please note that it's not 8.1) and I have the following struggle.
I have a page containing a StackPanel. Within the StackPanel there are several objects like buttons, textboxes and a LongListSelector.
The LongListSelector is bound to an ItemsSource. Because it can contain a lot of items I had to set the MaxHeight (otherwise it exceeds the limit of 2000px of vertical screen space)
However when scrolling the page down I stumble upon the LongListSelector. I can than scroll the LongListSelector too, which is fine. But when I scroll to the end of the LongListSelector it won't 'snap' to the StackPanel so it just leaves the page there and doesn't continue with scrolling to StackPanel.
A short code example:
<StackPanel>
<Button />
<TextBlock />
<TextBox />
<Button />
<LongListSelector>
This contains a bunch of items
<LongListSelector/>
<TextBox />
</StackPanel>
So what happends is.. I can scroll the complete page to the LongListSelector. I can scroll the LongListSelector. But when I'm at the end of the LongListSelector.. It wont continu scrolling the page.
So I never see the last TextBox (in this example that is)
I've also tried replacing the LongListSelector with a ListBox but that doesn't make any difference.
Hope that someone can help me out here.
From your Question what I understood is that the total height by summing up your UI Elements is more than the Page Height. If you put a ScrollViewer Tag at the start and End of StackPanel. It will work just fine. In ListBox and LongListSelector it is implied.
<ScrollViewer>
<StackPanel>
<Button />
<TextBlock />
<TextBox />
<Button />
<LongListSelector>
This contains a bunch of items
<LongListSelector/>
<TextBox />
</StackPanel>
</ScrollViewer>
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.
I'm trying to apply some effects to a TileList; basicly when i remove an element from the list i want it to dissapear fading out, and when i add an element to the list i want it to appear fading in, quite simple no? well its not, the TileList component only has one effect to play with itemsChangeEffect, don't understand why there isn't a "itemsAddEffect" or "itemsRemoveEffect". So basicly i have created a sequence using filters to apply one fade to the items being added and another to the items being removed. This is my sequence:
<mx:Sequence id="dataChangeEffectSequence" effectStart="trace1(event)" effectEnd="trace2(event)">
<mx:Fade duration="300" alphaFrom="1.0" alphaTo="0.0" perElementOffset="150" filter="removeItem"/>
<mx:Fade duration="300" alphaFrom="0.0" alphaTo="1.0" filter="addItem"/>
</mx:Sequence>
And this is my TileList:
<mx:TileList id="list" dataProvider="{arrPro}" itemRenderer="compIdea.view.Thumb" width="100%" height="100%"
itemClick="product_selected(event)" dragEnabled="true" dragComplete="updateCart()"
itemsChangeEffect="{dataChangeEffectSequence}"/>
The problem is that the fade i apply to the added items does not work, and the items are added to the tileList invisble(Faded out). It makes no sense, the fade doesn't do anything and the only way i have at least made the items appear in the tile list(Not faded out) is by doing this(don't understand why this works):
<mx:Fade duration="300" alphaFrom="1.0" alphaTo="0.0" perElementOffset="150" filter="removeItem"/>
<mx:Parallel>
<mx:RemoveItemAction filter="removeItem"/>
<mx:AddItemAction startDelay="200" filter="addItem"/>
<mx:Fade duration="300" alphaFrom="0.0" alphaTo="1.0" filter="addItem"/>
</mx:Parallel>
</mx:Sequence>
Can someone please help me? i have also tried doing it from actionScript, but it gives me null Pointer and app dies..