I have problem when I want change direction of quasar to rtl - quasar

I try to change direction of quasar to RTL with quasar cli and I add it to quasar.conf.js :
build: {
rtl: true,
},
but it do not work.
can I help me?

Related

Change WMS CRS in cesiumJS

I´m currently working on a project where I need to embed a WMS, which doesn´t support CRS:84 but many EPSG Versions. Here is the link to the WMS, which I need to include (the service is not controlled from our side).
I´ve already changed the crs parameter of the WebMapServiceImageryProvider to EPSG:4326, but that doesn´t adjust the bbox parameter to the correct values.
I hope that someone could help me to change the CRS in my cesium project.
I´m happy for any help.
The Answer to my problem was to change the tilingScheme Parameter of the WebMapServiceImageryProvider to the WebMercatorTilingScheme.
new WebMapServiceImageryProvider({
url: new Resource({
url:
'https://haleconnect.com/ows/services/org.868.3ece34f2-a7fc-4135-a1e6-a339add3142c_wms',
}),
parameters: {
TRANSPARENT: true,
STYLES: 'default',
VERSION: '1.3.0',
SERVICE: 'WMS',
FORMAT: 'image/png',
},
tilingScheme: new WebMercatorTilingScheme(),
layers: 'PS.ProtectedSite',
crs: 'EPSG:3857',
}),

Need to add badge in nebular menu

I want to add badge in nebular menu for inbox count dynamically. Help me on this. Thanks
import { NbMenuItem } from '#nebular/theme';
export const MENU_ITEMS: NbMenuItem[] = [
{
title: 'Dashboard',
link: '/pages/dashboard',
home: true,
},{
title: 'Inbox',
link: '/pages/inbox',
home: true,
}]
I would like to extend the question and ask if it is possible to place a custom component or at least HTML tags within the menu item? Currently the interface allow only string (title) ...
The question above (about adding a badge) is just an example for the missing functionality - enable formatting of the menu item.
I would appreciate an example code to solve this limitation, even if it contains extending nebular framework classes.
Thx,
Yohay

PhotoSwipe next/back icon

Is anyone even use PhotoSwipe before ?
https://github.com/dimsemenov/PhotoSwipe
I stuck at image left and right (back and next)
like this image.
I don't want the other icon. I want to know how to fix this.
I already try to disable image inside css but it's still not work
Please help.
You can use the following options available to show/hide photoswipe buttons/elements.
for more info read docs here
var options = {
history: false,
focus: false,
closeEl: true,
captionEl: true,
fullscreenEl: true,
zoomEl: true,
shareEl: true,
counterEl: true,
arrowEl: true,
preloaderEl: true
};

EXTJS 5.1 WIDGET IN GRID COLUMN HEADER

Is it possible to insert custom widget (for example button or checkbox) in gridpanel column header?
From documentation it's unclear.
Already I've tried to google it, but without any success.
Please help!
The short answer is 'yes'.
You can extend the grid column, then make an afterrender listener.
In the listener, get the column's innerEl = (component.getEl().down('column-header-inner').
Then, make a new component like button/checkbox, columnComponent.headerButton = new Ext.button.Button()
Then, render it columnComponent.headerButton.render(innerEl).
I hope this helps.
I had the same problem: How to get a button (or any custom component) into the extjs grid header field.
After some research I found the solution for extjs 5: You can configure the "items" property of the grid columns:
{
xtype: "gridcolumn",
text: "column header name in grid",
dataIndex: "...",
items:[
{
xtype: "button",
text: "Foo",
handler: "onFooClick"
}
]
}
This will for example show a button under the grid header text inside the header component.

How to place ionic tabs at the bottom of the screen?

I created a simple ionic-tabs that shows my icons at the top of the screen. I tried to wrap it in a ionic-footer-bar in order to have it placed at the bottom of the screen with no success. The tabs disappear when I do that. How should I accomplish the looks I want?
<ion-footer-bar>
<ion-tabs class="tabs-icon-only tabs-stable">
...
</ion-tabs>
</ion-footer-bar>
Since the beta 14 of Ionic (http://blog.ionic.io/the-final-beta/), there are some config variables that now default to their platform values, which means that they will try to behave according to the platform that they are built on.
In the case of tabs, for iOS the default is to display on bottom, and Android on top.
You can easily "hard set" the location for all platforms by setting the tabs.position function in the $ionicConfigProvider, inside your config function like this:
MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
You can check documentation here
To place the ionicFramework tabs at the bottom of the screen for android devices just open your app.js file, and under angular.module add the following lines of code:
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
Hope this will help.
Update for Ionic 2 (cleaner/improved syntax):
In app.js:
#App({
...
config: {
tabbarPlacement: 'bottom',
}
})
See Configs
Placing it in your app.js does the work.
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
Ionic automatically takes platform configurations into account to adjust things like what transition style to use and whether tab icons should show on the top or bottom.
For example, In the case of tabs, for iOS the default is to display on bottom, and Android on top.
Note1 : It should be noted that when a platform is not iOS or Android, then it’ll default to iOS
Note2 : if you are developing on a desktop browser, it’s going to take on iOS default configs
In side the app.js file you will need to inject the $ionicConfigProvider to the .config module and add $ionicConfigProvider.tabs.position(‘bottom’)
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); //top
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.
.
.
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
How to place ionic tabs at the bottom of the screen in Ionic 2
For the current version ionic 2.0.0-beta.10.
In app.ts:
ionicBootstrap(MyApp, [], {
tabbarPlacement: "bottom"
});
See Config
For the soon to be released ionic 2.0.0-beta.11
In app.ts:
ionicBootstrap(MyApp, [], {
tabsPlacement: "bottom"
});
Config
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
Update for Ionic 2, and Ionic 3+:
You have 2 methods to change tab bar position:
Method 1: Use tabsPlacement propertive of <ion-tabs>
<ion-tabs tabsPlacement='bottom' >
<ion-tab [root]="rootTab" tabTitle="Home"></ion-tab>
</ion-tabs>
Method 2: Change config in app.module.ts
#NgModule({
imports: [
IonicModule.forRoot(MyApp, {
tabsPlacement : 'bottom'
})
]
})
See the docs
Try This
<ion-footer><ion-tabs> <ion-tab tabTitle="Return"></ion-tab> </ion-tabs></ion-footer>