This may sound strange, but I don't understand how designers determine the image widths in their bootstrap layouts.
Consider the following template:
http://startbootstrap.com/templates/blog-post/
The 900x300 placeholder image is clearly not 900 wide on desktop 1080p monitor. It only ever gets shown full size when the browser is around 1000px wide.
Q) Am I being dense here? How are these widths determined/decided upon?
This is important as I want to make some designs using bootstrap, but obviously I want to make sure I select appropriate image widths.
Many ways to do this, but simplest is to use Chrome's "Inspect Element".
1) Right-click on photo and choose "inspect element". Scroll down until you see diagram of it's dimensions, padding etc
2) Adjust browser width to max out photo width (in your example it's between 990px and 1200px)
2) Keep editing the the placehold.it image-width until the inspector diagram stops changing photo width (see attached photo). This tells you the max threshold, in this case is 940px.
FYI, you can also try to determine knowing your column widths, padding, margins, and assuming you have properly reset nested column padding, but there is a lot of assumption and calculation there, so I tend to use the inspector method, at least to confirm.
Related
I want to fit the Image + Label into Scrollable View.
It looks like so My setup
So trouble here is that width of the picture and the label did not match the screen width.
I tried to change the UIImageView width from 400 to 300 or so, BUT those changes either wont take the effect(if above 300), OR those changes make label disappear (with width setted up on 300 or below). Observe.
Funny thing is - label actually appears when you see view hierarchy, even though it looks kinda distorted. But no label on the iOS screen for you, sir.
I also tried to set equal width and height from the superview, but this option just disabling scroll, making view strictly fit the screen (label appears to be cropped)
I want the label to be nice and scrollable, but I also want to see it on the screen. Too much to ask?
EDIT: I just tried removing Auto-layout and got the same as with auto-layout. (click "Observe" link to take a look again, exact same situation) Could somebody explain why?
This is quite a simple fix. For the image, you should use equal width & center horizontally; however, make sure you use a fixed width. For the image to look nice, play with the scale modes - I find Aspect Fit/Fill work best.
The label should also be equal width & centered horizontally. You may need to calculate the height of the label programmatically if the text isn't always going to be the same size.
So the answer to my particular question was - shortening the actual text that is passed to the label.
Apparently UIScrollView can't handle stuff with crazy abnormal heights (I was passing a huuuge text to it) So in my particular situation solution was - shorten the text. Now it works like a charm (even though I still need to play a little with constraints to get rid of the warnings and stuff)
I'm using Sketch to create images that will be used in my Xcode 6 auto-layout storyboards. However I can not get the image sizes correct. They always appear too large and overflow the storyboard view controller. Is there a way in Xcode to see the dimensions the storyboard expects? Is there a systematic way to do this...rather than trial and error?
Storyboard, especially in auto layout mode, doesn't expect any dimensions – dimensions will depend on device screen (in reality) or on simulated metrics (in Interface Builder in Xcode).
What matters is aspect ratio and presence of three resource files (three sizes – regular, 2x and 3x).
You can see the list of dimensions here:
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
So, let's say you want to insert an image that occupies the whole width of the screen, and the height is chosen automatically so that to keep the aspect ratio. What you could do:
Create images in Sketch with widths of 320, 750 and 1242 pixels. Save them as image.png, image#2x.png, image#3x.png.
Insert image in Interface Builder (Storyboard), add width constraint – equal as superview, instead of height constraint – keep aspect ratio.
If the image looked too big, Interface Builder will complain that preview image doesn't match constraints, you will see a little yellow arrow. Click on it, choose the warning and click again – Xcode will offer you to "Update frame". That will resize the image correctly if necessary. Don't forget to choose correct scaling mode (Aspect fit?) for your image.
Moreover, you can see current width and height of the simulated screen in Metrics tab. But those will change every time you change your preview (simulated) device type.
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I have checked many books and sites, where I can see that everyone is saying that it is a default property and we can not use top, right, bottom and left property, I can understand that. But if it is already predefined then why do we use it's syntax? Can anyone please tell me its use.
{position: static;}
We use it's syntax simply because we can make an element on a webpage change positions multiple times. Whether it's for animation purposes or for a real application it's always nice to be able to bring it back to it's default behavior (for whatever reason necessary).
For example, if you wanted a responsive website with an image in a special area, you could set that image position: relative for wide screens. Then when the screen size is reduced you can set it back to position: static , which (in my opinion) is easier to handle when the screen size is small (mobile phones).
I have a RDLC report and I am displaying it on the Report Viewer Control in my front end application. I am able to view the report perfectly.
But the problem arises when I try to export the report to a PDF (using the built-in option).
I print the report in 3 pages whereas my client wants it to be in a single page. I can't figure out the reason for it as in my report viewer I see only one page but in a PDF there are 3 pages.
Can something be done about it so that I can control the size of the report?
The answer is pretty similar to what Dugan said, but it's not always just the margins.
It is pretty simple though:
When you are editing the rdlc file in design mode, firstly click on an empty part of the BODY area of your design. Hit F4 to see the properties tab. Here, you will see a "Size" property. This can be expanded for the width and height. The width you see here represents the width that the body of your report requires as printable area. Even if you have white space all over, the page knows that it needs to keep it as a printable area. It reserves the space, in some sense. As for the height, the system generally knows that it can grow or shrink as necessary, unless you have specified otherwise within your controls therein. So the width is what will, usually, play the most important role.
Next, click on an empty area of the report (outside the header, body, and footer; basically the gray area around the design), then hit F4 to view the properties panel. Under the "Layout" category of the properties, you will see 3 different options:
InteractiveSize,
Margins,
PageSize.
Each of those Size attributes can be expanded to show the Width and Height. The Margins attribute can be expanded for the left/right/top/bottom.
Basically, the pdf export works out of the PageSize (though I generally try to keep Interactive and Page size equal). When the pdf file is rendered via the ReportViewer's built-in export function, the width and height of each "page" within the pdf will be determined by the width and height in the report's PageSize attribute (you could override this if you used your own custom code for the pdf rendering).
As for the margins, they specify how much space MUST be left blank and unprintable between the printable area reserved for your report and the edge of the page.
In other words:
Your report's Body's Width, Plus the Report's Left Margin, Plus the Report's Right Margin, MUST be smaller than or equal to the Report's PageSize's Width!
So...if your margins are too wide, or if your report's body is too wide, or if the PageSize's width is too narrow, the rendered result is forced to be broken down to multiple pages in order to fit!
For example: If my report's body has width 7.75", my Left margin is 0.5", my right margin is 0.5", and the width specified in the PageSize is 8.5", my report will always use 2 pages for each 1 page of data. The 7.75" width of the body, plus 0.5"+0.5" for the margins add up to 8.75", which is larger than the 8.5" available in my page. So the first 7.5" (or so) of each page of my report's body will be shown in the first page, and the rest will be split down to the next page. This will not be done inside the report viewer, as it allows for the report to grow beyond the page size by just adding a scrollbar, but it will be annoyingly noticeable in the pdf export.
In order to make my example report fit in 1 page, I can either try and reduce the body of my report to 7.5" or less, or I can reduce the left and right margins by a total of 0.25" or more (for example, set them to 0.3" for a total reduction of 0.4"), or I can increase the PageSize to something larger than 8.75".
Note: Acrobat Reader is pretty smart and knows about various paper sizes. Therefore, while arbitrary PageSizes will work, it is typically best to use real page sizes. As such, in my last example I would rather set the PageSize to have Width = 11" and Height = 8.5", which is a real letter-size in landscape! Adobe will typically understand this and print properly.
Also Note: Some printers, especially older ones, have trouble printing with less than 0.3" margins. If you want to be nice to your users, you should best keep the margins large enough for those older printers ;)
I hope this helps.
Always maintain body width : 7.5 or less
Left, Right Margin width less than 0.5
Set the Margin width first -> goto main menu Reports->Report Properties->Layout->change left margin and right margin
Total page width :8.5
Ramana
In addtion to watching your widths, I found other unrelated things that can cause extra blank page in the PDF.
If the tablix has any field with word wrap, this can cause it. You might want to make the font smaller if you have long data. Make the font size property equal to something like this:
=iif(len(Fields!RepGroupName.Value) > 25, "6pt","8pt")
Another thing you may have to do. And this helped me when I had no apparent reason for the extra page. In the Report property page, set:
ConsumeContainerWhitespace = true
Yet another thing to watch for. The body size can grow without you knowing it while making changes to the layout. You might have to knock it back down again.
This issue is highly annoying for the end user if not resolved and annoying as heck for us to resolve.
In case anyone else runs into this issue and ends up here, it's most likely a issue with your margins. If the margins are set incorrectly, you will often get "extra" pages that appear when you try and print, whereas when you view the document everything is fine.