I just updated to Xcode 9 and run to an iOS11 simulator. My custom view for the navaagation bar title is shifted down.
This code was working before i updated; it was vertically centered before
companyCountryView = CompanyNameView(frame: CGRect(x: 0, y: 0, width: Utils.getScreenWidth() - 150, height: 35))
companyCountryView.companyLbl.text = ""
companyCountryView.countryLbl.text = ""
self.navigationItem.titleView = companyCountryView
Even though I change values for y and height, no effect at all.
It seems the width value i used does not do any effect too.
I have solved it! You need to override the intrinsicContentSize in your custom view class and put the size of the view there:
class CustomView: UIView {
override var intrinsicContentSize: CGSize {
return CGSize(width: Utils.getScreenWidth() - 150.0, height: 35.0)
}
}
Related
I am using react and three.js to display some 3D models in the browser. Everything works fine as long as the three.js component is the only element with visible content on the page. The three.js canvas will resize bigger and smaller just fine. You can wrap it in other containers and it still works fine. The issue starts when another element or component is added as a sibling.
I want to have a viewport with a fixed width sidebar. I'm doing this with a flexbox row container, wrapped around a sidebar component (a simple div with min-width set), and the responsive three.js component.
Resizing the window bigger works fine, the canvas fills the browser window appropriately. However, when resizing the window smaller, the canvas does not properly re-calculate it's size in relation to the available space left over by the static width sidebar, resulting in a canvas that does not fully fit in the browser and introducing scrollbars.
The canvas does shrink some, but not enough to keep it fully in the browser window. The same issue occurs vertically if a component sits above or below the three.js component. If you recompile the app while the browser window is smaller, the refreshed view will have the canvas properly resized.
Following the advice of many of the answers here on StackOverflow, the three.js react code looks something like this:
export class Viewport extends React.Component {
componentDidMount() {
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
window.addEventListener("resize", this.handleWindowResize);
// setup scene
this.scene = new THREE.Scene();
//setup camera
this.camera = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );
this.camera.position.set( 0, 5, 10 );
// setup rendering
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setClearColor('#666666');
this.renderer.setSize(width, height, false);
this.mount.appendChild(this.renderer.domElement);
// setup geo
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: '#433F81' });
this.cube = new THREE.Mesh(geometry, material);
this.scene.add(this.cube);
...
}
componentWillUnmount() {
window.removeEventListener("resize", this.handleWindowResize);
this.mount.removeChild(this.renderer.domElement);
}
handleWindowResize = () => {
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height, false);
};
render() {
return (
<div className="viewport" style={{display: 'flex', width: "100%", height: "100%"}} ref={(mount) => { this.mount = mount }} />
);
}
}
The styling is simple css flexbox, with the elements set to full width and height (100%), with the sidebar having a set min-width.
.flex-row-container {
display: flex;
flex-flow: row;
height: 100%;
width: 100%;
}
.sidebar {
display: block;
min-width: 250px;
background-color: var(--color-mid-gray);
margin: 3px 4px 3px 4px;
box-sizing: border-box;
border: 1px solid var(--color-mid-gray);
outline: 3px solid var(--color-mid-gray);
}
What am I missing?
So after commenting, I think I got it working how you want.
Basically,
I removed setting display:flex on the viewport, as this is a child of an element (the flex-row-container div) with display:flex, it does not need it, but does need flex:1 1 auto to set how it will display within the flexbox (which I did in the css rather than the JSX).
The problem then became that the viewport div would expand, but not contract (because it contains the canvas), so adding overflow:hidden fixed that.
After making those changes, this.mount.clientWidth would get the desired result that could then be used to set the three canvas size.
See This Fiddle.
I added rendering and animation to the example so the result could be easily seen.
Hope this helps.
You might be getting incorrect values by using element.clientWidth. Have you tried using element.getBoundingClientRect() instead?
const rect = this.mount.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
I have created a react native expo app and I am currently using the react native calendars module. In my app, I have an agenda screen. In the screen, I have multiple different items that, when clicked I would like to animate them scaling to the full screen, similar to the google calendar app.
I have tried animating the height and width to the same height and width of the screen, but that just animates the item in the agenda list in place, so the width and height go off screen instead of animating to the full screen. I have also tried setting a position of absolute when animating, but that doesn't work either.
expand = () => {
const {height, width} = Dimensions.get('window');
Animated.parallel([
Animated.timing(this.height, {
toValue : height,
duration : 600,
easing : Easing.linear
}).start(),
Animated.timing(this.width, {
toValue : width,
duration : 600,
easing : Easing.linear
}).start()
])
}
This code here controls the height and width expansion
<Animated.View style={[styles.item, {backgroundColor: this.props.item.type === 'HOMEWORK' ? this.props.item.color : '#fff', height : this.height, width : this.width, position: this.height > 67 ? 'absolute' : 'relative',}]}>
<TouchableOpacity onPress = {() => this.expand() } style = {{flex : 1, flexDirection : 'row'}}>
</TouchableOpacity>
</Animated.View>
Video animation:
https://i.imgur.com/Mw3m6vv.mp4
I expected that the view would take up the whole screen, but since it is nested within many items, it doesn't work like that. It just takes up the portion it is nested in. See below:
I want my canvas-Element to always have the same size - independent of the client's screen-resolution.
If the user zooms with the browser, the canvas-element should always have the same size.
Furthermore, the aspect-ratio should always be the same - I want a coordinate-space of 1920-1080 points. (There can be a border on the side of the canvas-element, if the browser doesn't have the same ratio).
I managed to implement this with html + css:
with = 100% of screen
max. coordinates are 1920 x 1080
But when I imlemented fabric.js, it changed the size of canvas. And I cant set it back, to have a responsive design.
How can I achive this with fabric.js?
After experimenting a bit, I finally found a solution where I only have to modify css-properties.
The answer is very simple, although it's very long.
This is my html-body:
<body onload='init()'>
<div id="canvasWrapper">
<canvas id="canvas" width="100px" height="100px"></canvas>
</div>
</body>
And this is my css:
*{
padding: 0;
margin: 0;
border: 0;
}
body{
overflow: hidden;
}
#canvasWrapper {
background-color: red;
display: inline-block;
}
The important parts are the "inline-block" of my canvas-wrapper, and the "overflow: hidden" of the body-element. It seems that there are some pixels below the canvas, which would make both scrollbars appear.
After some experimenting, I got the following js-code:
function init(){
resizeCanvas(); //resize the canvas-Element
window.onresize = function() { resizeCanvas(); }
}
Whenever the screen-size changes, my "resize"-Function will be called.
The whole trick is done in this resize-Function:
function resizeCanvas() {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var cv = document.getElementsByTagName("canvas")[0];
//var cc = document.getElementsByClassName("canvas-container")[0]; //In case of non-Static Canvas will be used
var cc = document.getElementById("canvasWrapper");
var cx,cy; //The size of the canvas-Element
var cleft=0; //Offset to the left border (to center the canvas-element, if there are borders on the left&right)
if(x/y > sizeX/sizeY){ //x-diff > y-diff ==> black borders left&right
cx = (y*sizeX/sizeY);
cy = y;
cleft = (x-cx)/2;
}else{ //y-diff > x-diff ==> black borders top&bottom
cx = x;
cy = (x*sizeY/sizeX);
}
cc.setAttribute("style", "width:"+x+"px;height:"+y+"px;"); //canvas-content = fullscreen
cv.setAttribute("style", "width:"+cx+"px;height:"+cy+"px;position: relative; left:"+cleft+"px"); //canvas: 16:9, as big as possible, horizintally centered
}
This function calculates the window-width, and the biggest canvas-size that is possible without changing the ratio.
After that, I set the wrapper-div to fullscreen-size, and the size of the canvas-Element to the previously calculated size.
Everything works without the need of changing the content of the canvas element and without redrawing anything.
It's cross-browser compatible (tested on Firefox 25, Chrome 31 and Internet Explorer 11)
a solution in version 2.4.2-b， It's official Api method:http://fabricjs.com/docs/fabric.js.html#line7130
it works in my code, set width and height 100% :
fabricCanvas.setDimensions({
width: '100%',
height: '100%'
},{
cssOnly: true
});
Using ExtJS 4, I have the following window:
var mainWin = Ext.create('Ext.Window',{
title: 'IE Screwup Illustration',
id: 'MAINWIN',
constrain: true,
constrainTo: 'appdiv',
x: 0,
y: 0,
width: '100%',
height: 518,
moveable: false,
closable: false,
layout: {
type: 'border',
padding: 3
},
renderTo: Ext.Element.get('appdiv'),
}).show();
Note the rendering to an element called "appdiv", which is a element whose style is shown below:
#appdiv {
position: absolute;
left: 10px;
width: 90%;
height: 520px;
border: 1px solid;
overflow: hidden;
border-color: #000000;
}
There is no problem rendering the window. It appears within the appdiv without problems with a nice border around it.
The problem begins when I resize the browser. It appears that the window attempts to center itself on the screen instead of within the appdiv DIV. This causes it to be displaced within the DIV so that it renders below and to the right of the left corner.
I have tried various tricks, including an attempt to reposition the window when it resizes. Nothing seems to work and I cannot think of anything else.
Could someone please give some idea how to keep this window within its DIV when a browser is resized? Thanks...
I have created a JS Fiddle to illustrate how I usually solved the problem in my projects.
The solution is to listen to the resize event of the Component over which you would like to center your window, and then calculate your window's new position. In my example this component was the viewport.
Here is the listener, that gets the job done:
viewPort.on('resize', function(vp, width, height) {
var me = this,
winWidth = me.getWidth(),
winHeight = me.getHeight(),
left = (width -winWidth) / 2,
top = (height -winHeight) / 2;
me.setPosition(left, top);
}, mainWin);
I found the answer to the problem. It turns out to be a question of timing.
It didn't make sense that the setPosition() method suggested by Matyas seemed to be ignored, so I checked the "move" event. Apparently, when an Ext window is rendered to a <div>, it receives move events after resize events. I do not know why (perhaps experts in ExtJS internals can help here?).
So instead of doing the calculations shown in Matyas' resize listener, I created a move listener in mainWin. Mine was somewhat simpler, since I wanted the window to stay put at the <div>'s upper left corner:
listeners: {
move: function(theWin,xP,yP,theOp) {
if((xP != 0) || (yP != 0)) {
theWin.setPosition(0,0);
}
}
This way, any time the browser moved the window to a position other than where I wanted it, I would set it back. This solved the problem.
Thanks for all who responded to this question (including the comments). Without those responses, I would not have had the clues I needed to solve this problem.
Try this:
Ext.EventManager.onWindowResize(function()
{
mainWin.doComponentLayout();
}, this, {buffer: 1});
Ext.EventManager.onWindowResize(function() {
if(mainWin.isVisible()) {
mainWin.center();
}
}, this, {buffer: 1});
I have a simple Ext.ProgressBar and need to double it's height which works but didn't scale the progress image, just the outer box. I thought OK, maybee it is to small and can't scale but it has a height of >800px (sencha original images).
So how can this be done?
Here's the config
{
xtype: 'progressbar',
text: 'Some text',
border: 1,
height: 40
}
Height of progress bar is set in style definition. You can change height by changing .x-progress-bar css class. In modern browsers (eg. Chrome) all you need to do is to change height property, because background image is definied as gradient. Example:
// height of bar
.x-progress-bar {
height: 38px;
}
// height of text box
.x-progress-text {
height: 38px;
line-height: 38px;
}
Working sample: http://jsfiddle.net/D2QYN/2/
Another way is to attach handler to render event and set height of child elements which are not scaled verically. Example handler:
listeners: {
render: function(sender) {
var height = sender.bar.parent().getHeight(true); // content height
sender.bar.setStyle('height', height + 'px');
sender.textEl.setStyle('height', height + 'px');
sender.textEl.setStyle('line-height', height + 'px');
}
}
Working sample: http://jsfiddle.net/D2QYN/3/