I would like to resize two images (left image - right image) and maintain both on the same line. Now if I try to modify the window size the one on the right goes below the one on left.
Example: Table with the two images - left sidebar
Seems that using a table can be the solution but I don't know how to make it responsive. Can you help me please?
You don't need a table just to align content. Tables are meant to display tabular(grid-type) data, not for layout.
If you have multiple elements in the DOM next to each other an easy approach is to set them each to display: inline-block which allows them to flow next to each other like inline elements but be styled as block level elements.
Because they are inline like text you can set vertical-align: top on both to align them to each other's top line regardless of height. This also has an advantage over the use of floats in that they take up space in the parent element as well.
Related
I've been struggling with this all over my react-native app, so I set up a very simple example of it in codesandbox which you can view here:
https://codesandbox.io/s/elastic-star-5754q?file=/src/App.js
Within the View with the green background, all of the internal views are centered horizontally within their respective spaces as I would expect thanks to the "alignItems: center" style property. I would expect that I could also center them vertically within their spaces by setting "justifyContent: center", but that doesn't seem to work for me.
Am I fundamentally misunderstanding something?
The problem is that you are not aligning the text within the individual Views. Your example mistakenly aligns the inner View elements within the larger View element rather than aligning the text.
To center-align the text vertically within their Views you just need to add justifyContent: "center" to those individual three green Views.
Here's an example: https://codesandbox.io/s/recursing-kirch-n8one?file=/src/App.js:393-417
To further explain why you were experiencing the issue you did, see this screenshot with boxes outlining the space the elements were taking up on-screen:
You can see the inner Views are only taking up the needed width of the text elements inside, but are using the max height available to them.
I’m using the mailmerge feature of Gembox.Document to produce reports.
I’m having issues with the sizing of a picture.
I have created a merge field inside a table cell, and I would like the picture to occupy the maximum of the cell size without changing it’s aspect ratio.
For now it’s inserting the picture, but the ratio is all messed up.
I’ve read in the help page that I could put a shape my merge field but after many attempts I don’t know how to do it, when I try to draw the shape in my word template, it doesn’t go inside my merge field.
Can anybody help me with this ? Either to fix the aspect ratio, or how to use the shape…
Cheers
Take a look at the second Merge Pictures example, its input "MergePicturesWithTemplates.docx" file has MergeFields with Shapes inside.
To place a Shape inside a MergeField, draw the shape, set it as "In Line with Text", and drag it inside the field.
Now that you have a shape as a placeholder for your image, you can add switches to MergeField in order to keep the aspect ratio of the merged picture:
\x - resize resulting picture horizontally, keep the template shape's height.
\y - resize resulting picture vertically, keep the template shape's width.
\x \y - resize resulting picture either horizontally or vertically.
To add a switch, press ALT + F9 in MS Word, that will reveal field's code and then write the switch within.
Beginner in Visual Studio here.
I'm trying to create an C# Windows Form application that simply displays a form to show some information about the local system.
I have created this form with the help of the VS designer:
As you can see, it consists of a simple panel with a PictureBox at the top, a label below it (both centered), three table layouts next to each other, and a button at the bottom. Never mind the label texts.
The rows of all the table layouts are set to absolute, this is because I want to programatically add rows to the end middle and right table layout if there are more than one local IP address in the computer and setting the rows to auto size or percentage would make alignment difficult if more rows are added.
Now, my problem is that I can't figure out how to make the form resize and move the controls (specifically move the 'OK' button down) when more rows are added.
I have tried anchoring the button to the bottom edge of the form as well as the bottom of the middle table, both produce the same result: the button stays where it is and the new rows overlap it, like this
I would also like to know how to have the form resize to fit the contents of the labels. For example, if the text in one of the labels inside the layout is bigger than the column width, I'd like to have the form grow to accommodate it. Likewise, I'd like the form to shrink to fit the largest text.
I realize that this may not be the most efficient or easiest way to create this particular form, but it is what I've come up with, I of course welcome any suggestions in that regard. It is important to maintain alignment between the rows of all table layouts.
Thanks in advance.
Use a data grid and add controls to it if an add button is pressed. You can scroll through the rows so you won't need to adjust the height of the form
I am using www.responsivegridsystem.com for my columns and here is what I've come up with: ux.stoicdigital.com/#intro-message.
I'd like the list to work like this one: http://doyouimpress.com/#uses-list
The biggest problems are that, above a certain amount of px (can't remember exact), the three column grid is centered, but doesn't LOOK centered due to cell widths, etc. and that below that amount of px (when list is in one-column mode), the off-center problem is even worse.
Again, I realize that this has to do with cell widths, etc. but I can't figure out where to make the changes I need to do the following at both sizes:
Align text and bullets left
Center the list itself on the page
Any advice would be appreciated. Would especially appreciate any details you can give re: changes to make to CSS.
PS: If there is another way to achieve this outside of Responsive Grid System, I'm open to that too.
The text doesn't look centered because it isn't. The container div is centered, but since you align the text to the left its all scewed to the left, just like it'd be scewed to the right if you aligned the text to the right.
You could align the text to the middle, but then your checkbox icons wouldn't be lined up. If you want the text to be centered but still have the icons lined up you need to attach the icons so something else but the text. You could display them as pseudo-elements to the <li>, but the drawback is that there would be varying amounts of space between the text and the icons.
What I'm coming at is basically that you can't center the columns this way (as long as you don't make sure that the text in each <li> is equally wide) - however you can fake it and that's what they do on that site you're referring to.
To fake it, simply give each column div a unique class name (or target them with :nth-child), then move each column manually to make it look like the content is centered. You could give them different width-values (this is what they do in your example), different padding-values or similar. That's entirely up to you.
As for the one-column layout, do something similar where you add a padding-value to push them closer to the center, but obviously use the same value for all column divs.
My aim is to have 3 images shrink, grow, and move along a horizontal axis depending on selection. Using Auto Layout seems to make the images jump about as they try to fulfil the Top space to superview / Bottom space to superview constraints.
So to combat this I have put all the images inside their own UIView. The UIView is set to the maximum size the images can grow to, it is centred on the horizontal axis. So now all the images must do is stay centred inside their corresponding UIView. This has fixed my problem as the UIViews perform the horizontal translation, while the images shrink/grow inside while remaining centred. My question is - is this the correct way to do this? It seems very long and like I am perhaps misusing the ability of Auto Layout. I have to perform similar tasks with more images and so any advice is welcome! Thanks.
I've just written a little essay on this topic here:
How do I adjust the anchor point of a CALayer, when Auto Layout is being used?
Basically autolayout does not play at all well with any kind of view transform. The easiest solution is to take your view out of autolayout's control altogether, but alternatively you can give it only constraints that won't fight back against the particular kind of transform you intend to apply. That second solution sounds like just the sort of thing you're doing.