Currently I have a XUL notification box being displayed as I am developing a Firefox Addon. At the moment the notification box will only display at the bottom of the browser and cannot find any information about changing the position to the top of the browser.
I know you can use priority_high etc... but it only seems to add this again at the bottom of the browser.
Code:
<notificationbox flex="0.1">
<browser src="http://www.mozilla.org"/>
<notification type="warning" label="Test"/>
</notificationbox>
Any help will be grateful.
I have tested with XUL Explorer, I could change the positions successfully.
Here is the code:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- your code here -->
<stack>
<hbox flex="1" left="100" right="10" top="50" bottom="10">
<notificationbox flex="0.1" >
<browser src="http://www.mozilla.org"/>
<notification type="warning" label="Test" />
</notificationbox>
</hbox>
</stack>
</window>
Related
I have an iOS-specific issue that does not happen on Android.
If the page in an app is opened in landscape mode
and then turned to portrait the logo at the center of title bar instead of moving to the center goes off the page like this:
If it is opened in portrait and then turned to landscape then it does not move to the center or off the screen, but to the left, to be stuck around a quarter of full width.
Xaml:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PhotoApp.MobileApp.Views.PhotoGaleryPage">
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Accent">#96d1ff</Color>
</ResourceDictionary>
</ContentPage.Resources>
<Shell.TitleView>
<Image
HorizontalOptions="Center"
VerticalOptions="Center"
Source="logo.png" />
</Shell.TitleView>
I advise you to use this:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PhotoApp.MobileApp.Views.PhotoGaleryPage">
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Accent">#96d1ff</Color>
</ResourceDictionary>
</ContentPage.Resources>
<Shell.TitleView>
<StackLayout HorizontalOptions="Center"
Margin="{OnPlatform iOS='0,0,25,0', Android='0,0,20,0', Default=0}"
Orientation="Horizontal">
<Image
Source="logo.png" />
</StackLayout>
</Shell.TitleView>
Alike the above answer, you can take a try like this:
<ContentPage>
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
<Image Source="logo.png">
</Image>
</StackLayout>
</NavigationPage.TitleView>
...
</ContentPage>
Just take a StackLayout to wrap the image instead of putting it in Shell.TitleView directly.
Looks like the rotation in ios caused this problem as you take advantage of Image in Shell.TitleView directly. You can imagine this: it's really in center, but the screen can't display the whole title bar, which caused the problem you have seen.
MasterDetail page Master behaviour change not working in iPhone devices. it always showing the master page below the detail page while sliding. I need master page slide above the detail page.
<MasterDetailPage
x:Class="testMasterDetail.Views.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:views="clr-namespace:testMasterDetail.Views"
MasterBehavior="Popover"
mc:Ignorable="d">
<MasterDetailPage.Master>
<views:MenuPage />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<NavigationPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="iOS" Value="tab_feed.png" />
</OnPlatform>
</NavigationPage.Icon>
<x:Arguments>
<views:ItemsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
That's the default behavior in iOS and the MasterBehavior does not have any influence on an iPhone. It works in an iPad.
There is already an issue there in GitHub of Xamarin.forms. You can follow it and add some comments to ask for more information.
Here are some thread which may help: xamarin-forms-slide-up-master-detail-page and Master-detail menu - slide over top of detail page on iOS
I've been developing a website with a custom menu (ReactJS). But it doesn't work in Chrome and Safari on iOS.
Below is the code structure.
<Header>
<TopNavigation />
<MenuBox />
</Header>
<PageBody>
<TextContainer />
<PageBody>
When menu box appears, it should cover the whole page. But on iOS, the <TextContainer /> comes on top of the menu bar.
z-index of <Header /> is higher than that of <PageBody />
Any advice on why this is happening and how to solve this would be great.
Anyway couldn't find the reason to that behaviour in iOS. Then changed the layout and made it work.
<Header>
<TopNavigation />
</Header>
<MenuBox />
<PageBody>
<TextContainer />
<PageBody>
I have a Xamarin.Android project that has been in development for awhile. I went to use my first Android Switch control yesterday. When the UI rendered on my device (I don't use Xamarion.Android preview editor cause it continually crashes VS). It only showed off/on text, and no UI for the switch control at all. This seemed to happen regardless of what width/height I specified for the control etc.
I created a new Android project, dropped the switch on and it renders fine. I then changed the API level to match my API level (21) and it rendered a bit differently, but again rendered fine.
After much debugging and frustration I discovered that if I implement by own custom drawables for the Thumb and Track that the UI seems to function.
So I was wondering: Has anyone run into this before? Do we know what the cause is?
I wanted to document this in case anyone else ran into problems.
Someone requested layout code. There's not much, but here it is:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content>
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Yes I managed to get this figured out, then forgot to update this. Unfortunately I couldn't get it working through Xamarin. Something was messed up and I didn't know what it was and couldn't get an answer from anyone. So: I drew it myself (which I ended up needing to do anyway for my app).
In my layout for the switch I set these two drawables:
android:thumb="#drawable/SwitchThumbTrack"
android:track="#drawable/SwitchTrack"
Then in my code when someone toggles it I have a drawable for SwitchTrackOn as well. If you want, here's some code to make it kind of look like an iOS switch:
SwitchThumbTrack.xml
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#FFFFFF"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
SwitchTrack
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="15dp"/>
<stroke android:width="1dp" android:color="#ffffff"/>
<solid android:color="#0000FF" />
<size android:width="80dp" android:height="30dp"/>
</shape>
SwitchTrackOn
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="15dp"/>
<stroke android:width="1dp" android:color="#color/White"/>
<solid android:color="#4ED164" />
<size android:width="80dp" android:height="30dp"/>
</shape>
Hope this helps!
James
For me, adding the following worked:
android:minWidth="100dp"
android:minHeight="50dp"
I want to ask some questions:
What steps should I do to make the interface on mozilla firefox and handle all these interfaces.
interfaces that I want to make are:
status bar that consists of labels and pictures and if the status bar on the right click menu will display the active addons (addons menu inactive hidden) and preferences.
current web page on the right click, on the browser will display a context menu "terjemahkan" and there are pictures on the left-hand corner.
when I select the options button on the tools menu >> addons, users can adjust these addons settings with the radio buttons
when the context menu is selected then the browser window will show the desired results
the steps that I have done is:
i was made the status bar but why the picture I want not to appear when I've made as directed. as well as on the context menu, the image can not appear in the upper left corner of the menu like in general.
<?xml version="1.0"?>
<overlay id="inline_trans"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<!--
<script type="application/x-javascript" src="chrome://translator/content/script.js" />
<script type="application/x-javascript" src="chrome://translator/content/interface.js" />
-->
<!-- menu klik kanan pada halaman web -->
<popup id="contentAreaContextMenu">
<menuseparator />
<menuitem id="intransContextMenuPage"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="terjemahkan dengan intrans"
oncommand="inline.script.getText()" />
</popup>
<!-- pilihan menu pada status bar -->
<popupset>
<menupopup id="intransContextMenu">
<menuitem label="intrans nonaktif"
image="chrome://inlinetrans/skin/imagesOff_kecil.png"
hidden="true"/>
<menuitem label="intrans aktif"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
hidden="false"/>
<menuseparator />
<menuitem label="preferensi"/>
</menupopup>
</popupset>
<!-- ========================================= -->
<!-- statusbar-->
<statusbar id="status-bar">
<statusbarpanel id="status-bar-intrans"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="intrans"
context="intransContextMenu"
tooltiptext="intrans versi 1.0"
/>
</statusbar>
</overlay>
UI options preferences
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://inlinetrans/locale/options.dtd">
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="translate-preferences"
title="&options.title;"
buttons="accept, cancel"
style="padding:0px; margin:0px;"
ondialogaccept="options.save()"
onload="options.init();"
onunload="options.deconstruct();">
<!--
<stringbundleset id="stringbundleset">
<stringbundle id="locale-properties" src="chrome://translator/locale/translator.properties"/>
<stringbundle id="properties" src="chrome://translator/content/translator.properties"/>
</stringbundleset>
-->
<!--
<script src="chrome://inlinetrans/content/options.js" />
-->
<description value="&options.desc;"
style="
background: #fff url('chrome://inlinetrans/skin/options.png') no-repeat;
min-width:400px;
min-height:40px;
padding-left:55px;
padding-top:10px;
margin:0px;
border-bottom: 2px solid #757575;
font-size:1.5em;"/>
<vbox style="padding:10px;">
<groupbox>
<caption label="&options.ui;"/>
<label value="&options.results.desc;"/>
<radiogroup id="display.results" style="padding-left:20px;">
<radio id="results.cat" value="category" label="&options.results.cat;"/>
<radio id="results.noncat" value="noncategory" label="&options.results.noncat;"/>
</radiogroup>
</groupbox>
</vbox>
</dialog>
The most confusing thing for me is how I do all the handler interface.
for example:
change the status of addons, from active to inactive
take the value of the selected radio button
I cannot give you an answer to all of your questions, partly because I don't know exactly what you want, but here is a start:
To show an image next to the menu item, you have to give the element the class menuitem-iconic as described in the documentation:
<menuitem id="intransContextMenuPage"
class="menuitem-iconic"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="terjemahkan dengan intrans"
oncommand="inline.script.getText()" />
I'm not sure for the statusbar, by I would follow the description in the documentation:
The following classes may be used to style the element. These classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
statusbarpanel-iconic
Use this class to have an image appear on the statusbarpanel. Specify the image using the src attribute. The image will appear instead of the label.
You can get the value of the selected radio button by getting a reference to the radiogroup,access its property selectedItem which gives you a radio element and read the value property:
var value = document.getElementById('display.results').selectedItem.value;