My IonTabBar is being covered always by iOS notches on the phone. How do I increase the size of the IonTabBar so it is above any notches?
I'm working on this stackblitz:
https://stackblitz.com/edit/ionic-react-demo?file=index.js
I've added onto variables.css the following:
ion-tab-bar {
--height: 1000px;
--min-height: 1000px;
}
and nothing happens.
Here is a screenshot of my issue:
https://imgur.com/a/UqkXOEB
commenter said that footer could handle iPhone notches but I've tried to add IonFooter but no matter where I add it, then the app doesn't load. I kind of have a complicated router setup (abbreviated):
App.js
<IonApp>
<IonReactRouter>
<Route path="/" component={isLoggedIn ? Maintabs : UnloggedinRoutes} />
</IonReactRouter>
</IonApp>
Maintabs.js
<IonTabs>
<IonRouterOutlet>
<Redirect exact path="/" to="/profile" />
</IonRouterOutlet>
<IonTabBar className="stylebar" slot='bottom'>
<IonTabButton color='black' tab='Profile' href='/profile'>
<IonIcon icon={ellipse} />
<IonLabel>Profile</IonLabel>
</IonTabButton>
<IonTabButton tab='Leaflet' href='/leafletMap'>
<IonIcon icon={triangle} />
<IonLabel>Map</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
I've tried adding IonFooter all over and didn't get anywhere.
Related
Edit:
Bug report Bug Report on github
Situation:
I am writing an app with the ObjectPageLayout.
In the header content I have a sap.m.Select and a sap.m.MultiComboBox with a reset button each.
I want to have them in the header, since they filter all Diagramms and Tabels of the diffrent tabs.
I set my css class as it is discribed in the Workthrough.
When the style is set to compact mode due to the device type everything is fine.
Problem:
When the css class is cozy the select still has the compact style.
The MultiComboBox and buttons and everything else take the cozy style.
--> it looks really bad
Does anyone have an idea, why the select doesn't have the cozy style aswell?
I even tryed hard setting the css style in the XML, but it doesn't work.
If I change the css class of the MultiComboBox or the buttons it works,
but I dont want to always have everything on compact just because the select cannot go on cozy...
To replicate the problem you can just create a new project (UI5 Version 1.71) in the webide and replace the view with mine:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.uxap"
xmlns:layout="sap.ui.layout"
xmlns:m="sap.m"
xmlns:f="sap.f"
controllerName="TEST.TestingSelects.controller.Home"
height="100%"
>
<ObjectPageLayout
id="ObjectPageLayout"
enableLazyLoading="true"
useIconTabBar="true"
showTitleInHeaderContent="false"
>
<headerTitle>
<ObjectPageHeader
id="headerForTest"
objectTitle="{i18n>home.title}"
>
</ObjectPageHeader>
</headerTitle>
<headerContent>
<m:VBox>
<m:HBox>
<m:Select
id="idStoreSelect"
selectedKey="{homeModel>/storeSelectKey}"
change="onStoreSelectChange"
items=""
>
<core:Item
key=""
text=""
/>
</m:Select>
<m:Button
icon="sap-icon://redo"
press="onResetStoreButtonPress"
tooltip="{i18n>home.store.redo.tooltip}"
type="Transparent"
/>
</m:HBox>
<m:HBox>
<m:MultiComboBox
id="idCatMCB"
selectedKeys=""
selectionChange="onCatMBCChange"
items=""
>
<core:Item
key=""
text=""
/>
</m:MultiComboBox>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</m:HBox>
</m:VBox>
</headerContent>
<sections>
<ObjectPageSection title="2014 Goals Plan">
<subSections>
<ObjectPageSubSection title=" ">
<blocks>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
<ObjectPageSection title="Personal">
<subSections>
<ObjectPageSubSection title="Connect">
<blocks>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</blocks>
</ObjectPageSubSection>
<ObjectPageSubSection id="paymentSubSection" title="Payment information">
<blocks>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
</sections>
</ObjectPageLayout>
</mvc:View>
Code of select when hard setting css style:
<m:Select
id="idStoreSelect"
class="sapUiSizeCozy"
selectedKey="{homeModel>/storeSelectKey}"
change="onStoreSelectChange"
items=""
>
<core:Item
key=""
text=""
/>
</m:Select>
SAP fixed the UI5 bug with the version 1.95 (commit 4c7fffe).
Here you can see, that the sap.m.Select no longer has its own height set in the ObjectPageHeaderContent but applies the height according to the density class:
UI5 ≥ 1.95
UI5 ≤ 1.94
Screenshots from: https://plnkr.co/edit/gTxIx9BvTChZovBZ?preview
To fix the width of the Select you can add the aggregation layoutData
<m:layoutData>
<m:FlexItemData growFactor="1" />
</m:layoutData>
To fix the height of the Button you need to set the content density (as described in the official Walkthrough (Step 37)).
Basically you provide a method in your Component.js which returns the correct density (and don't forget to import "sap/ui/Device" at the top!)
getContentDensityClass : function () {
if (!this._sContentDensityClass) {
if (!Device.support.touch) {
this._sContentDensityClass = "sapUiSizeCompact";
} else {
this._sContentDensityClass = "sapUiSizeCozy";
}
}
return this._sContentDensityClass;
}
Then in the controller of your root view (defined in manifest.json > sap.ui5 > rootView) you can call this method
onInit: function() {
this.getView().addStyleClass(
this.getOwnerComponent().getContentDensityClass()
);
}
I put together a small sample:
https://plnkr.co/edit/h1JZiyYrWLmuck46
i am building a web-app using react js and i am trying to put a backround image which will stay there for every page i visit.My App.js render code is this :
render() {
return (
<div > ---> Case 2: <div className="classN"> instead of <div>
<NavBar user={this.state.user} />
<main>
<Switch>
...Routes...
<Route path="/evcharge/api/admin/healthcheck" component={Healthcheck}></Route>
... More Routes...
</Switch>
</main>
----> Case 1: <img src="/images/backround.png"/>
</div>
);
}
}
What i have tried after searching online is 2 things.
As shown above in case_1 source the image there which will cause this in main page:
picture1
But if i go to,for example,login this happens:
Picture2
For the second case this is my css code:
.classN{
background-image: url(./images/backround.png);
}
In this case the image is like this :
Picture3
This both wont get bigger than the Menubar and will also disorder my other elements of the page.
What i would like to achieve is just have the same backround image be displayed in the backround of each page without influencing the other elements of each page,such as the login form.I have been stuck in this for a while and i can't seem to get it to work.Any advide would be helpful.
Thanks in advance.
If you want to use it in every page put that background image directly in body so It will be global
body {
background-image: url(./images/backround.png);
}
I've created a create-react-app project and I'm just starting to add routing to it now with reach-router. I have a simple TitleHeader component with a background-image that I use with the components for each of the routes. They mostly work, but whenever I navigate to one in particular (DissectionGame), the background image doesn't appear and then after that, it doesn't appear for any of the other components either.
Below are relevant snippets, though they really don't show the problem. At this level, all of the components are really the same and if I comment out the other nested components in the DissectionGame component, it works as well. Given that, I assume the problem has something to do with those components, but I just have no idea what to look at and what might affect the background-image in the TitleHeader component.
Does anyone have any clues as to what might be happening? Can the path to the image somehow get stomped on and if so, how? I've only been working in React for a couple months now so it's all still pretty fresh. I'd appreciate any suggestions!
function App() {
return (
<AppStyle>
<HeaderNav />
<Router>
<Home path="/" />
<Help path="help" />
<Games path="games" >
<GamesInfo path="/" />
<DissectionGame path="dissection" />
</Games>
</Router>
</AppStyle>
);
}
const HeaderBlock = styled.div`
background-image: url(./dark-paths.png);
background-size: auto;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 24px;
color: #c2d5db;
padding: 15px 0px;
margin: 5px 0px 10px;
`;
const TitleHeader = ({title}) => {
return (
<HeaderBlock>
{title}
</HeaderBlock>
)
}
const Home = () => {
return (
<React.Fragment>
<TitleHeader title="Welcome to Leading Step!" />
</React.Fragment>
)
}
const DissectionGame = () => {
return (
<React.Fragment>
<TitleHeader title="Sentence Dissection" />
/* Other game components... */
</React.Fragment>
)
}
I suggest you try to remove the . in the URL to make sure that the images is loading from the root of the server, not the relative path of the current route.
Also, don't forget to put your images under the public folder.
background-image: url(/dark-paths.png);
How do I set full width on input elements inside a radio group?
I'm using the following setup to create two options (user can either upload a file or specify a URL):
<v-radio-group v-model="photo_mode">
<v-layout row align-baseline>
<v-radio value="file" />
<v-file-input v-model="eitem.photo" class="mr-4 mt-0" :disabled="photo_mode=='url'" />
</v-layout>
<v-layout row align-baseline>
<v-radio value="url" />
<v-text-field v-model="eitem.photo_url" class="mr-4 mt-0" :disabled="photo_mode=='file'" />
</v-layout>
</v-radio-group>
The looks fine except that both v-file-input and v-text-field are not as wide as the container. Here is a snapshot:
As you see, the v-text-field above the radio group (Details field) is correctly showing full-width, but the two inputs inside the radio group are not. What can I do to fix this?
Found the solution. This is a bug in Vue. Already reported here. The solution is to simply add the following CSS in your App.vue:
<style>
.v-input--selection-controls .v-input__control{
width: 100%;
}
</style>
Make sure the style section is not marked with scoped keyword.
I found that I also needed to set the style of v-label too, in order for this workaround to function properly. Also I used scoped css locally in the component:
.radio-group-full-width >>> .v-input__control {
width: 100%
}
.radio-group-full-width >>> .v-label {
width: 100%
}
So in the template:
<v-radio-group class="radio-group-full-width">
I want custom XBL scrollbar: Add event mousedown to thumb, slider and my duppa tag. Add styles to this elements. For all scrollbars in browser window and for all scrollbars in all tabs pages.
I register StyleSheet.
It working in browser window but not working in html page in tabs:
-moz-binding working in browser window.
-moz-binding not working for html page in tabs.
Other styles working in browser window and in HTML page in tabs.
What to do to it work on HTML page in tabs?
var self = require('sdk/self');
const {Cc, Ci, Cu} = require("chrome");
Cu.import('resource://gre/modules/Services.jsm');
var sss = Cc['#mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var cssUri = Services.io.newURI(self.data.url('scroll-bar.css'), null, null);
sss.loadAndRegisterSheet(cssUri, sss.AGENT_SHEET);
data/scroll-bar.css(for example):
scrollbar {
-moz-appearance: none !important;
border: none !important;
-moz-binding: url("resource://adrr/data/scrollbar.xml#scrollbar");
}
duppa {
background: green;
width: 10px;
height: 10px;
}
data/scrollbar.xml (for example):
<?xml version="1.0" encoding="UTF-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<bindings id="scrollbarBindings" xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:xbl="http://www.mozilla.org/xbl">
<binding id="thumb" extends="xul:button"/>
<binding id="scrollbar-base" bindToUntrustedContent="true">
<handlers>
<handler event="contextmenu" preventdefault="true" action="event.stopPropagation();"/>
<handler event="click" preventdefault="true" action="event.stopPropagation();"/>
<handler event="dblclick" action="event.stopPropagation();"/>
<handler event="command" action="event.stopPropagation();"/>
</handlers>
</binding>
<binding id="scrollbar" clickthrough22="dupa" bindToUntrustedContent="true" extends="resource://cvanux-at-lukaszpolowczyk/data/scrollbar.xml#scrollbar-base">
<content clickthrough="always">
<xul:duppa sbattr="scrollbar-up-bottoxm" type="decrement" xbl:inherits="curpos,maxpos,disabled,sborient=orient"/>
<xul:scrollbarbutton sbattr="scrollbar-up-top" type="decrement" xbl:inherits="curpos,maxpos,disabled,sborient=orient"/>
<xul:scrollbarbutton sbattr="scrollbar-down-top" type="increment" xbl:inherits="curpos,maxpos,disabled,sborient=orient"/>
<xul:slider flex="1" xbl:inherits="disabled,curpos,maxpos,pageincrement,increment,orient,sborient=orient">
<xul:thumb sbattr="scrollbar-thumb" xbl:inherits="orient,sborient=orient,collapsed=disabled" align="center" pack="center"/>
</xul:slider>
<xul:scrollbarbutton sbattr="scrollbar-up-bottom" type="decrement" xbl:inherits="curpos,maxpos,disabled,sborient=orient"/>
<xul:scrollbarbutton sbattr="scrollbar-down-bottom" type="increment" xbl:inherits="curpos,maxpos,disabled,sborient=orient"/>
</content>
</binding>
</bindings>