I am new to Titanium and I am using alloy.
I developed an app that renders correctly on the emulator with resolution 1200x1920 (Android Nexus 7 Emulator), however the same code when rendered in 768x1280 emulator screen, all my controls are scattered and are not aligned anymore. How can I make the app respond relative to the screen resolution.
(FYI : Genymotion is not working as it shows issues with updating video driver, I will check that later).
My code is like this :
var LeftTopView = Ti.UI.createView({
top:'0%',
left:'0%',
height : '30%',
width : '70%',
});
var chkBuy = Ti.UI.createSwitch({
id: 'chkBuy',
left: '2%',
top:'3%',
value: true,
title:'BUY',
width:'auto',
height:'auto',
color:'Black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
font:{fontFamily:'Consolas', fontSize: '23dp', fontWeight:'bold',},
});
chkBuy.addEventListener('click',chkBuyClick);
function chkBuyClick(){
chkSell.value = false;
chkBuy.value = true;;
}
var chkSell = Ti.UI.createSwitch({
id: 'chkSell',
left: '35%',
top:'3%',
value: false,
title:'SELL',
width:'auto',
height:'auto',
color:'Black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
font:{fontFamily:'Consolas', fontSize: '23dp', fontWeight:'bold',},
});
chkSell.addEventListener('click',chkSellClick);
function chkSellClick(){
chkBuy.value = false;
chkSell.value = true;
}
LeftTopView.add(chkBuy);
LeftTopView.add(chkSell);
var MainView = Ti.UI.createView({
width:Ti.UI.FILL,
height: Ti.UI.FILL,
left:'0%',
top:'0%',
});
MainView.add(LeftTopView);
var window = Ti.UI.createWindow({
title:'Page2',
backgroundColor:'#000',
exitOnClose:'true',
});
window.add(MainView);
window.open();
You should not use % in giving top and bottom to the elements(It will cause trouble in orientation) instead use layout.
checkout the Documentation
Related
I have figma design 2380х3368.
So, I create pdf with such parameters:
const doc = new jsPDF({orientation: 'portrait',unit: 'px', userUnit: 300, format: [2780, 3368]});
and:
doc.html(pageTemplate.querySelector('html'), {
callback: function(doc) {
doc.save('pdf-template.pdf');
},
margin: [0,0,0,0],
});
But this size is too big for printing pdf. I want dpi 300, so it would be ok, but I can't find where to put this in jsPDF
I'm trying to align the title to the left instead of the center (shown in the image).
I know this is possible on chartJS v3.0.0-alpha.2, but reactchartjs only goes up to 2.9.30 as far as I know.
Does anyone know how to achieve this in reactchartjs?
I thought it would be something like:
options={{
title: {
position: 'top',
align: 'left',
},
}}
Any help would be appreciated.
You should use the align parameter. This sets the alignment of the title. Your options are:
start
center
end
Your align: 'left' isn't one of the above and will not have any effect. Setting align: 'start' however will give you exactly what you want:
The full code looks like this:
<Chart
type='line'
data={dat}
options={{
plugins: {
title: {
display: true,
align: 'start',
text: 'Bitcoin Mining Difficulty'
}
}
}} />
Let me also mention that you should not confuse that with position: 'left'. position moves the whole title into one of top, left, bottom, right area of the chart. An example with a combination of position: 'left' and align: start:
The Chart.js Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw the title yourself directly on the canvas using CanvasRenderingContext2D.fillText().
In React, you can register the plugin as follows:
componentWillMount() {
Chart.pluginService.register({
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let xAxis = chart.scales['x-axis-0'];
ctx.textAlign = "left";
ctx.font = "14px Arial";
ctx.fillStyle = "black";
ctx.fillText("Title", xAxis.left, 10);
ctx.restore();
}
});
}
You'll also have to define some extra padding at the top of the chart to make sure, the title appears on the canvas.
options: {
layout: {
padding: {
top: 20
}
},
...
Please take a look at this StackBlitz and see how it works.
I know how to centered it by use this option:
title: {
text: "This is title",
align: "center",
verticalAlign: "middle",
},
it works fine , but when there is a legend aligned in right or left , it will not perfectly displayed in the center , to add a x position to adjust it is ok ,but not responsive. when you change the window size , it will has some offsets.
here is the demo:
https://stackblitz.com/edit/react-highchart-jjzjx118
I tried use load/redraw to adjust it , but I don't know why it not work when I bind redraw function to react component, I will do some further action in it so I can't define it when I create the option.
You can position a title in a render callback function:
chart: {
events: {
render: function() {
var seriesElPos = this.seriesGroup.getBBox();
this.title.attr({
x: seriesElPos.width / 2 + seriesElPos.x
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4760/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
https://api.highcharts.com/highcharts/chart.events.render
In ExtJS when I scroll browser window Ext.window.window stays on same position on Viewport. I would like to fix this window on it's absolute position.
I saw documentation says:
fixed : Boolean
Configure as true to have this Component fixed at its X, Y coordinates in the browser viewport, immune to scrolling the document.
Defaults to: false
But does not work for me. What I am missing? How to fix window in it's absolute position and don't scroll on browser scroll?
This part works. But still, are you concerned about constrain?
handler: function(button){
var w = Ext.create('Ext.window.Window', {
height: 150,
width: 200,
renderTo: button.up('fieldset').getEl().dom,
title: 'child window'
});
this.up('fieldset').add(w);
w.show();
}
Like this maybe:
handler: function(){
var w = Ext.create('Ext.window.Window', {
height: 150,
width: 200,
title: 'child window',
});
this.up('fieldset').add(w);
w.show();
}
Is there an easy way to change the view for a user based on the current viewport size in FullCalendar?
What I'd like to do is have month view on desktop, and day view if using an iPhone or mobile device. At the moment with month view all the events are squashed up on mobile.
Current code:
$(document).ready(function() {
$("#primary #calendar").fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
timeFormat: 'h(:mm)tt',
eventSources: [
{
url: 'http://www.google.com/mycal1',
color: 'blue',
textColor: 'white'
},
{
url: 'http://www.google.com/mycal2',
color: 'white',
textColor: 'black'
}
]
})
});
This may not be exactly what you are looking for, but it may get you started in the right direction.
Our websites are responsive and we include the 'viewScreenSize' function on most every page...
var thisScreenWidth = 0, thisScreenHeight = 0;
function viewScreenSize() {
if (typeof (window.innerWidth) === 'number') {
//Non-IE
thisScreenWidth = window.innerWidth;
thisScreenHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
thisScreenWidth = document.documentElement.clientWidth;
thisScreenHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
thisScreenWidth = document.body.clientWidth;
thisScreenHeight = document.body.clientHeight;
screenWidth = thisScreenWidth;
}
// screenSize = div in page footer
$("#screenSize").html(thisScreenWidth + "x" + thisScreenHeight);
}
When fullCalendar is loaded in '$(document).ready(function () {}' and our screen width is led than 601 ...
if (thisScreenWidth < 601) $('#calendar').fullCalendar('changeView', 'basicDay');
When the screen is resized...
$(window).bind('resize', function () {
if (thisScreenWidth < 601) $('#calendar').fullCalendar('changeView', 'basicDay');
else $('#calendar').fullCalendar('changeView', 'month');
});
Working example... http://theelmatclark.com/AboutUs/Calendar - merely resize the browser window - as you resize, the current width/height appear in the footer next to the [Home] button.
There may be better ways, but I haven't found one yet. Good luck.
Question... Does anyone know of a way to divide the header into multiple lines?