I am working on a data entry application and I am considering using a fluid layout approach ala Swing and Silverlight where the controls resize based on the window size. My question is simple: what feedback if any have you received from users on each of these approaches? Screen size aside, I will still have a vertical scroll in place so I am wondering if I would be best served to simply go the fixed route and absolute position/size content.
Do not go the fixed route. If the user resizes the window, they do so for a reason. The widgets should resize appropriately. I can think of no valid reason to ever use a fixed layout except in vey specialized circumstances.
That being said, don't have a layout where input fields wrap. That would be very disconcerting. Just let your widgets grow and shrink naturally.
Related
How can I make this
image fit the mobile header menu? I also want to make it larger as you can barely see what's written below the logo.
The image should stay in its place on the desktop version - I am satisfied with how it looks
Website for reference
Thank you very much for your help.
Ok, first of all.. Is this done with bootstrap, or something, or did you make it from scratch?
The problem is, your "nav" is 100% wide, taking all the space to the left. Also, your header-image-wrap div is 100% wide, as well. Therefore, they can only fit one underneath another.
You need to change your code. In mobile view, navigation doesn't need to take all that space. It should only be a size of a hamburger menu. If it's bootstrap, find a nav bar that has logo on it, and make a mobile logo image, or change the default design. I don't think there's a practical solution for this one.. As far as my knowledge goes...
As far as the size of an image go, you need to make another one, for mobile view, if you want bigger letters and stuff. You can't really change this one with css.
I have an app that displays properly in portrait view but truncates in landscape view:
From the research I have done it looks like I need to understand Size Classes and Adaptive Layout. However, I am only concerned with layout on iPhone 6, not across different devices (eg iPad).
Before jumping into Adaptive Layout and Size Classes, which seems quite a complex topic, I just wanted to ask if there is a simple way to make this app display properly in both portrait and landscape for iPhone 6.
Thanks in advance!
Yes, you can do it without size classes, but it requires a reasonable modification to your UI.
If you think about it then having a picker always visible makes no sense for you. Looking at your image I am puzzled as to which date is currently being adjusted.
What you want to do instead, is to make your picker appear after user clicks on one of the dates. You can make it slide up from the bottom. In addition, you can add a label above it which will clearly indicate which date the user is currently modifying. That label can be placed in the toolbar to make it easy to add "Done" and "Cancel" buttons to the left and to the right.
In my view it would make much more sense and would also solve your problem. The rest of the UI can be put in the scroll view if you don't have enough space on old devices (e.g. 3.5 inch iPhones)
It seemed so simple just a day ago, but I can't figure it out:
How do I center an image on a page, giving it fixed % margins (10% on all sides) and still have it scale with the window on resize?
It's very important that the page and the image display well on all platforms, without scrollers (!).
The page itself is very simple and only contains the image (which on different versions of the page has different dimensions), and a bar on the top with a link to send it to another page.
The max size of the image would be 1500x1000px, no minimum size.
I wholeheartedly hope someone can help me out with this, thanks so much!
Best way to do that is using JavaScript. Get the window size, subscribe for window.onresize event and update the image size and position accordingly.
Using CSS only will NOT work, because any position properties depend on the container. In your case the container is the window, which will size itself based on the content. This creates a sort of circular dependency (window size depends on the image, the image size and position depend on the window size).
For information about getting the exact available window size in cross-browser way you could check this post: Get the size of the screen, current web page and browser window - haven't done that in a while to provide you with exact code.
Also note that you don't mention keeping the aspect ratio of the image. If it should not be maintained there is no way to do it HTML/CSS only, because all operations with them do maintain AR of images.
I have a NSView that houses about a dozen WebViews populated with HTML generated from the application. When I first init them, I wait for - (void)webView:didFinishLoadForFrame: to fire before laying them out and adding them to the view based on the documentView frame.
How would I go about resizing these WebViews along with the window? Is there a way to get the desired size of the WebView for a given width?
Since all you're using the web views for is rendering MarkDown, you should instead investigate MacDown or MarkdownLive. These render MarkDown directly into an NSTextView. This will be MUCH more efficient than multiple WebView objects.
In future, you should ensure that your question includes what you're actually trying to achieve because there's often a simpler way to do what you want than the way you think it perhaps should be achieved.
I've been banging my head about this seemingly easy task and I could really use some help.
I have a wide Image loaded in the gui (using the designer..) and I want to be able to draw only a portion of it, a rectangle.
I need to be able to change this rectangle position over the large image, in order to draw a different part of the larger image at will. In this process the rect must maintain its size.
Using the Ui::MainWindow object I'm able to access the label holding the image and a solution that involves using this option is preferred (in order to keep up with the rest of the code I've already written )
Any solution will be much appreciated :)
Thanks,
Itamar
I would definitely (for ease of use) just place an empty label as placeholder in Designer.
Then implement the paintEvent for this label (delegate it to your own method). You'll have also have to look into QPainter, QPixMap, etc... Should be doable based on these hints and the documentation.
If you want more, I suggest you provide a small code snippet to work upon.
If you want to do this more or less purely through designer, you could put a QScrollArea where you want the portion of the image to appear. If you set the scroll area's scrollbar policy to be never shown, you can then manually change what part is visible via the scroll area widget. However, this would probably be more complex that creating a derived widget and reimplementing the paint function.