I have a ViewController that has content in the top third and then a UIContainerView in the bottom two thirds of the view. The UIContainerView allows the user to rotate between three childViewControllers. Using AutoLayout, I have constrained the UIContainerView to the sides of the screen (widthAnchor), the bottom of the screen (bottomAnchor) and two thirds of the way up the screen (topAnchor).
In laying out content in the first childViewController, which appears on the initial load of the parent ViewController, I ran into difficulty. It appears that on that initial load, the childViewController view is given a view.frame.height equal to the height of the device. I set up my constraints to deal with that and the first screen displays fine.
The issue I am running into now is that when I rotate through the childViewControllers, the view.frame.height is set to the height of the ContainerView (which I would have suspected to be the case from the start). This causes the constraints in the first childViewController to "break".
Look at this behavior below.
Image #1: Initial load of the ParentViewController.
https://roryent.box.com/s/xhil4wk0ga5qoddhko5jxj3a1r4103h3
Image #2: Switching the childViewController.
https://roryent.box.com/s/9f2jj0l1waui3ekyplq4eae51m6wrqn5
Image #3: Coming back to the initial childViewController. The constraints "work" but are reacting to a different view.frame.height.
https://roryent.box.com/s/cj9ffyy3m9oh8f523l2vsdezo1frk12x
NOTE: I am creating the constraints in the ChildViewController class and trying to use the frame of that childViewController frame to do so.
I have attempted to move the methods for constraining the items into willLayoutSubviews() in the childViewController with no change.
I suspect that there is something wrong with where I am loading the different items.
I would expect the self.view.frame.height used in the childViewController code reflect the height of the UIContainerView that is displaying it. In my case the height should be .67 * UIScreen.Main.Bounds.Height.
I believe the issue was due to my implementation of the ContainerView and its corresponding childViewControllers.
I have rebuilt the feature following this tutorial and have not had any problems. https://cocoacasts.com/managing-view-controllers-with-container-view-controllers/
Related
I have a graph rendered as SVG by Angular in a web page. The size of the SVG is dynamic, with its width being 100% of its container. I'd like to be able to scroll (and eventually zoom) the SVG's viewport. I'm not talking about the browser scrolling, but rather manually implemented scrolling by dragging on the background of the SVG.
I know I can use viewBox to do this, and changing the first two numbers works well, but the problem is that the second two numbers need to match the CSS width and height to be at 100% zoom. How do I work around this? Do I constantly need to update viewBox in response to the container size changing (e.g. when the browser window changes size) so it matches the CSS size?
There are many similar questions on here, but none that I can see are about this specific issue.
Update: I think I solved the first part of the problem using:
<svg #svg attr.viewBox="{{-scrollX}} {{-scrollY}} {{svg.clientWidth}} {{svg.clientHeight}}">
But I'm a little suspicious of its efficiency.
I still need to figure out how MouseEvent coordinates interact with this to be able to update my scrollX and scrollY, as well as how to make the SVG grow bigger as it needs to (but not bigger on the screen).
I was wondering if it's possible to change the order of the boxes when the window's size is reduce. For now, I have this:
Big window
And when I reduce the window's size I got this:
Small window
but what I want is one under the other like this:
1
3
2
Thank you !
Looks as though you want to employ breakpoints in your CSS. Check out this MDN docs page for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/#media
Essentially, you set width characteristics and style accordingly. This is essentially as close as CSS comes to being a logical programming language (aside from animations).
Playing with flexbox characteristics such as flex-direction: column/row will decide what direction the elements in a given container are displayed.
I have a simple bitmap image 3px wide and 150px high included as the top banner in my layout.
<s:BitmapImage id="blueBanner" source="{this.bmpimg}" width="100%"/>
The rest of the content is centered below this.
When the page opens no matter the size of the browser window, the image always fills the width available.
I have a browser window resize handler that resets my main content below the banner to the center of the new window size and this works perfectly.
But no matter how many times the browser is resized, the BitmapImage will never stretch wider than the original window width.
I have tried every property and method of BitmapImage that I think could affect this in the resize handler but nothing I can find has any effect at all.
I cannot understand how it remembers the original stage width to begin with.
Its parent containers are all set to 100% width and there are no unusual skins or any other reference to this object in the whole project except in a function where it can be included in the layout or not, but this function is never called in this case.
Can anyone offer any clue as to why it won't stretch automatically?
Doug
Simple , just set the width to screen.width and you are good to go.
<s:BitmapImage id="blueBanner" source="{this.bmpimg}" width="{screen.width}"/>
Thanks for all the responses. In fact I solved the problem by adding the BitmapImage line to the Application Skin. Once it's here as well as in the layout it works. I have no idea why it needs to be in both places, but once it's set up like this everything works correctly.
Setting ScaleMode makes no difference and setting screen.width either in the blueBanner tag or later in the resizeHandler (because not always available when the tag is run) also makes no difference in my layout.
Doug
I'm using an application called iDashboards, and in it there is a feature I can add called a ViFrame that takes very limited HTML to create a custom frame.
My knowledge of HTML is already pretty limited and with no output feedback, it's hard to use trial and error as a tactic.
I'm trying to display an image. The image changes dependent on the person that's selected in the app. The selection is taken care of by itself, but the problem is that the size of the pictures vary. I'm trying to display the image so that it has a definite height and a scaled width.
Displays the full size image. The HEIGHT element doesn't seem to constrain anything. If I add a WIDTH tag it works but the scaling would be messed up. Is there any way to do what I want?
The way I see it, I have two options I can think of:
1. Make every image in the library a square and then specify square dimensions so no distortion
2. Somehow retrieve the original height and width into variables in HTML and specify both tags with height being constant and width being an expression of the ratio between height and width. None of which I know is even possible. Is it? I don't think it allows tags either to go into JavaScript.
Sorry about my very basic knowledge in HTML, be gentle.
Are you using one object and changing the image or using many images and changing which one is displayed? Any way you could try to use width:YOUR_VALUE_HERE; height:auto in your css document, which should keep them all in the same ratio.
Set a particular class on the IMG tag:
<img class='constrained_img' src='/path/to/img.png'>
In your CSS/Stylesheet:
.constrained_img {
max-width:100px;
max-height:100px;
}
That should keep your height and width to no larger than 100px in this case. Any further work you'd need to do server-side processing (a la PHP's getimagesize()), or use a 3rd-party library (I've used Joseph Lencioni's SLIR to good effect), or muck around with JavaScript (which isn't impossible, but off the top of my head I'm not sure how I'd go about it).
I'm writing a script to output things to a window comprising a Tkhtml widget and a text widget displayed above each other in a ttk::panedwindow. Both widgets are scrollable both vertically and horizontally. There's also a button allowing the user to clear the text widget.
I'm doing some of the development on a laptop running Ubuntu. The window manager allows for four desktop workspaces in a 2x2 array, and when the GUI is first displayed, the bottom fifth or so bleeds from the workspace I'm using into the one below. It's irritating to have to muck around resizing the window to make it short enough to fit onto the screen so I want to resize it.
(I think) I know approximately how to do this, i.e bind to an appropriate event so that I can run a script when the window is first displayed. (Reset the binding from within the script so that it only fires once.) I believed that the "appropriate event" was <Map>, but when the window was first mapped, the two widgets had zero height (as reported by [winfo height]). I tried binding to <Expose> and this seems to work, ([winfo height] returns sensible numbers,) so:
Question 1: Which event should I bind to?
When the binding fires, [wm geometry] reports the geometry as 815x1029+49+24, [winfo height] reports the two heights of the two widgets as 600 and 366, and [wm screenheight] returns a height of 800. I know there are various other bits and pieces in the GUI so I'm not surprised that there are 63 pixels unaccounted for in the initial layout. I assume that I need the same amount of space after resizing, so I should request a geometry of 815x737+49+24, but when I do, a sliver (approximately the lower horizontal scrollbar) still bleeds onto the next workspace.
By mucking around manually, I know that when everything fits nicely onto the screen the geometry should be 815x717+49+24, so I've added a fudge factor of 20 to the amount of space I allow for the "other bits and pieces of the GUI". This works fine but seems a little inelegant (massive British understatement :-) ), so:
Question 2: What have I missed, requiring use of a fudge factor?
I'm using Tk 8.6.1 on Ubuntu 12.04.5 LTS. I'm using version 0.9.7.12 of the Compiz window manager.
Update
It struck me that I ought to find the height of the various panes, rather than the Tkhtml and text widgets as that would account for the scrollbars and the "Clear" button. The pane heights are 615 and 409 initially, but this just means that I have to increase my fudge factor from 20 to 78 to get the request height to my desired value of 717. Is there any way to predict what height to request for the toplevel containing my paned window in order to get that toplevel to fill the screen?
I recommend binding to <Map>. I would wait for all of: the paned window, the main tkhtml window, the text window and the scrollbars to be mapped before trying to adjust heights.
For Linux, the [winfo screenheight .] does not know about any panels that are configured, so you have to subtract those. You can get the actual screenheight available by creating a window, doing a wm attributes . -zoomed 1, then getting the geometry of the window.
The title bar and borders of the window take up space. The space needed for these can be calculated by comparing the output from [winfo geometry .] and [wm geometry .].
There is also the panedwindow sash height and any margins and padding.
You can calculate the total of these by subtracting the panedwindow heights from [winfo height .].
Here is one method that would always work, however, it is not very attractive, as the user would see the windows flashing as they change size.
Maximize the window (wm attributes . -zoomed 1)
Get the window geometry and parse out the screenheight.
De-maximize the window (wm attributes . -zoomed 0)
Get the window geometry and replace the screenheight
with the maximized screenheight.
Set the window geometry.