I have a multi-line title side by side to an icon. I would like to keep the line-height of that title at about 1.6 . If I do so though, the text does not align on top because it stays vertically centered to the line. The result is that the top of the icon is not aligned with the top of the text. If I use line-height 1 the problem does not occur because the middle vertical alignment of a text in a line of the same size is the same as the top alignment.
You can see what I mean in this code pen.
Any idea?
You can add a negative top margin to your title.
Defining both your font size and the margin in em will allow you to achieve alignment regardless of what font size is inherited.
Related
I have shapes with integer coordinates of width and height. They can be selected and stretched separately, I want to add the function of stretching a group of selected shapes. For example, as in the Figma editor or in VS Studio on a visual canvas, when we select a set of shapes and stretch them and they stretch proportionally with integer coordinates of width and height. Can you tell me how it works? For example, I have a list of 5 shapes with a width and height of 10px, indents from each other in 1px, I have selected them and pull them along the X axis in the positive direction by 8 pixels, which algorithm do I need to use? Here is an example of how it looks in VS when stretching buttons on the canvas.
https://i.stack.imgur.com/mYOAf.gif
In my SVG picture there are some text labels that are displayed dynamically in top part of the image. In some cases (i.e. smaller screen size, bigger font size), they partially disappear outside the vievBox (like if overflow: hidden; was set) - see the picture (the long word in the middle is the overflowing label).
My idea is to scale down the image so that the labels are visible. How to achieve this?
In my case, I had quite wide bottom margin, so I could afford moving the whole image down to uncover the top part.
Final solution was wrapping the whole image with <g transform="translate(0,10)">.
The first value refers to left-right movement, the other one to up-down (positive values move the image down, negative - up).
I have two boxes filled with colors, a green one on the left, and gray one on the right. They go right up against each other in the middle of the screen, and I would like each one to extend the width of the browser, so the green one extends all the way to the left, and the gray one extends all the way to the right, no matter how wide the browser gets. How can I do this?
the width property supports percentage values, which are relative to the size of the window it exists in.
See:
http://learnlayout.com/percent.html
http://www.w3schools.com/cssref/pr_dim_width.asp
I am trying to design a form in which some elements stay at the bottom of the Form Layout when the window size is increased, and others stay at the top. Using a Vertical Spacer between the top and bottom elements almost works, but the Vertical Spacer only stretches up to the Height value of its SizeHint (see screenshots below).
Simply increasing the SizeHint to some large has the unwanted side effect that the preferred size of the overall window then also becomes very large, so the "Adjust Size (Ctrl+J)" command makes the window unacceptably large.
If I use a Vertical Layout instead of a Form Layout, the stretcher behaves as I expect it to, increasing indefinitely and respecting the SizeHint when using "Adjust Size", but of course I lose the behaviour of the form layout (the alignment of the TextLabels).
What can I do to make the Vertical Spacer stretch past its SizeHint in a Form Layout?
Use multiple layouts, not only one.
Set vertical layout for your window.
Add horizontal layout, fill it with QLabel and QLineEdit. Add Vertical Spacer.
Add another horizontal layout, fill it with QLabel and QLineEdit.
Add horizontal layout, fill it with Vertical Spacer and two QPushButtons.
If I understood you correctly, you should get what you wanted :)
Another way is to use QGridLayout.
Set QLabels to 0,0 and 1,0
Set QPushButtons to 2,1 and 2,2
Set QLineEdits to 0,1 and 1,1
Drag QLineEdits so that they span from column 1 to column 2
And Vertical Spacer between row 0 and 1.
I have tspan element with some text in it. I specified some font-size for it as well. In addition I have parent's box size, i.e. width and height. So now I'd like my text to fit the box with the specified width and height.
One of the options I have is manually calculate string width and height (but it became more complicated in case of different fonts and browsers).
So is there any other way in SVG to resize tspan to necessary sizes? Please note that I want text font size to be changed properly, i.e. so text will be displayed in max font size and any single char from it will be visible.
Well, I've came up with the following solution - have absolutely positioned div element outside of visible area. Apply all fonts and other-related styles (except font size) from tspan to that div, put text into the div. Next try different sizes (you can use binary search for better performance) and measure div size. Once max font size found - apply it along with the text to tspan.