Using CSS3 columns to take a somewhat large text document and make it scroll horizontally. I want each column to be close to the size of the iPad screen, as I am displaying the content in a UIWebView.
If I make the -webkit-column-width: property a relatively small number, everything works great. The text stops at the max-height set for the containing and columns out horizontally.
If I make -webkit-column-width anything larger than about 300px, though, this css seems to get completely ignored. The text displays vertically as it would without styling. Any fixes?
Display when -webkit-column-width is 325px. The view scrolls to the right normally:
Display when -webkit-column-width is 500px. Text appears as one column and the view scrolls downward to the end of the document, ignoring max-height:
You are trying to divide, let's say, 600px wide container into X 500px wide columns. Browser renders only one column because it can't put 2 (or more) 500px wide columns in 600px wide container. First of all - by default, the browser will stretch your content vertically, to make it stretch it horizontally you have to specify fixed height for the container and width needs to be set to auto (which is default). Of course you need to adjust this values so columns will fit iPads viewport.
Here is demo of code, that should work properly - http://jsfiddle.net/wojtiku/bFKpa/
#container {
height: 300px;
-webkit-column-width: 150px;
-webkit-column-gap: 20px;
}
NOTE: I don't have iPad, tested on desktop.
Related
So I have a view that contains some elements (Label and Text View) that are 8px spaced between each other. However, added together, the height of the view is too big for some smaller screen size. I want to know how I can change the constraint constant (currently at 8px leading and trailing between each element) based on the screen height.
For example, for a iPhone 8 Plus I would want a 8px spacing. For a iPhone 8 I would want a 7px spacing. For a iPhone 4s, I would want a 5px spacing.
Showing how to do this on a storyboard rather than code would be super helpful.
Look at picture for a better understanding
Make it in UIScrollView instead of UIView.
Anyway, you will need to scroll content when the keyboard appears. Otherwise, a user will not see what he writes in the field.
More than you will not have to make different padding between elements.
BUT. If you want to make different paddings yet, try to make depending on
UIScreen.main.bounds.height
I am trying to make my take up all vertical space even if there are no rows in the table yet. Is clr-datagrid customizable to do so? It seems like I have to manually override flexbox properties of .datagrid-host and .datagrid-overlay-wrapper in order to make it grow in column direction.
I tried even that but the datagrid don't seem to be growing vertically.
The Clarity datagrid supports any fixed height you want on the datagrid element itself. If the height is too large for the number of displayed rows, the body will expand with empty space. If the height is too small for the number of displayed rows, the body will scroll while the header and footer remain in place.
So in your case, it's as simple as putting height: 100% for the datagrid in your CSS. That's all you need to do. See https://plnkr.co/edit/eZqaic8CS6CFHVcGxAnH?p=preview for a working example.
Auto contraints seems like a bit of a chore. I have a bunch of elements in my main view (this is a single-view app) inside Main.storyboard. So imagine a few labels, buttons, controls, etc.
For example, take one label that says "Hello World" that's centered horizontally in the upper portion of the screen.
I need to add the following constraints to make it appear "normal" in my various devices ipad/iphone:
Horizontal Center constraint
Leading Space
Top Space
Trailing Space
It works, but it seems like a lot of work, I don't remember doing this work in the good old days (~3 years ago) with struts and springs. So I need to add all these constraints to each of my other elements too. So if I have 10 elements, I need roughly 10x4=40 contraints? Is this the ideal way to do this?
If it were up to me a view and the elements as I place them in the view and all controls in it would just be stretched relatively to fit the size of the device. An example would be like in photoshop, where we just decide what the overall image looks like and then scale the image to just fit the dimensions that we want. Is this possible in xcode?
Note that my app is just portait only - for iphone/ipad, but looks exactly the same in both (ie same layout for the controls)
You don't need to set that many constraints.
Horizontal center + top space would be enough given your example, or leading, trailing and top space.
If you are setting leading, trailing and horizontal center, you are over-specifying in that axis and possibly giving the auto-layout system contradictory information that will cause problems.
For that specific example: no, you only need a horizontal center and a top space, because UILabels have an intrinsic content size so their width and height is specified by their content and not constraints (unless you want them to be).
You didn't do this work in the good old days because Auto Layout wasn't on iOS then and there was only one particular possible iPhone size at the time: now there are 4. Auto Layout is an essential tool for modern iOS development.
As for controls stretching relatively to the device size, it depends on the control, but in general standard controls maintain the 44 point touch target rule - for example nav bars have gotten wider to accommodate wider phones but they haven't gotten any taller, because the larger screen size should be used to display more content instead of more chrome.
But yes, if you wanted to have controls have particular dimensions based on device size that is definitely possible with Auto Layout.
so I'm trying to use ContentFlow (http://www.jacksasylum.eu/ContentFlow/index.php) to display non-image content pulled from a database. I have each of the ContentFlow items loading database content via AJAX, however, I would like to customize it so that the items have a fixed width.
eg. I watch to display 5 items in the coverflow. I want the center/primary item to be the largest in size (about 700px by 500px)
then I would like to the adjacent items about 100px and 70px wide respectively.
From what I've seen with the code, the ContentFlow width adjusts according to the browser width.
Is there a way to fix the item widths depending on which position they're in?
thanks
I want to increase the font-size of the text in the JQM data-role=header tag without allowing JQM to increase the height of the header bar from its normal (20px?)
JQM seems to be calculating the height for the bar based on the font-size of the child nodes.
This worked for me: http://jsfiddle.net/shanabus/Z2saQ/
Click the button to see that page 2 is different and works per your question.
I just set the .ui-header class of #page2 to a static 41px tall.
Then set the h1 to something larger like 2em.