My horizontal nav bar and footer look perfect on PC, but when testing on Mac, the font is lifted about 30px above its position in the horizontal nav bar.
After trying every CSS reset and line-height adjustment, what finally worked on Mac made the font drop about 30px below its position in the horizontal nav bar on PC this time.
One Stackoverflow answer mentioned editing the glyph/baseline of a font.
I downloaded a free font editing program and noticed the characters inside of each respective square were lifted as if to have a 40px margin underneath, but I can't adjust the height of the baseline in the program.
Is there a free font manipulation program that will allow me to adjust the glyph/baseline of the font?
I appreciate your time in advance.
Try to generate your font via http://www.fontsquirrel.com/, and use the CSS for font-faces it gave you.
If the above does not work for you, try this:
Try to find out with JavaScript if the app is running on Mac. If so, load a new font-fix-mac.css file, where you will put margin-top:30px on all elements where the font is lifted above.
Related
I have this vuetify code:
<div class="mb-6">
<h1 class="text-h4">
{{title}}
</h1>
<p class="subtitle-1 font-weight-thin" v-if="subtitle">{{subtitle}}</p>
</div>
Which produces a title and subtitle that are not aligned vertically, as visible there:
The left-space between the title M is wider that the subtitle one.
Any idea why? I reckon this is the first time I have such an issue, hence I believe this is a Vuetify typography issue.
I tried playing with the letter-spacing CSS property without success: it changes the space between the letters but not in front.
I also tried playing with margin-block-start CSS property, but it doesn't change anything.
Thanks for the help
It's not a vuetify or letter-spacing issue. This comes from font you are using. Vuetify uses Google’s Roboto font by default.
There's a playground at Google fonts with Roboto font. You may notice that the problem you mentioned is present here as well. By example, there's some space in Regular 400 #64px:
Let's test your code using a different font. By example, I'll use CSS font-family: serif !important; that fallbacks to Times New Roman at Windows platforms:
Looks fine, no spacings.
So one solution to fix your problem is to change the font. I believe that there are fonts that are more suitable for websites than Times and that do not have such a problem.
According to Vuetify docs, you can change a font for the whole project with one line in src/sass/variables.scss file. Keep in mind that this cause project to build much longer:
$body-font-family: 'Work Sans', serif;
Possibly you don't want to change a font. So you can change the whole string's position this way:
.text-h4::first-letter {
margin-left: -0.04em;
}
In this case, the unselected lines will align a little, but there will be problems with selection:
Maybe this SO question will also help you. And there's a playground at CodePen where you can test some solutions.
I'm playing around with the VMware Clarity Design System UI (https://vmware.github.io/clarity/) and am running their seed application. I'm trying to replace their brand icon with my own, but it's a different size. I'm noticing that the icon appears to be hard-coded to 36px x 36px. If I try setting a new size in CSS, it still renders as 36px x 36px. Is this hard-coded?
LogoSize
That was it. I was thinking I needed to add the size to the image, not to the .clr-icon class. This works:
.header .branding .clr-icon {
height: 13px;
width: 73.9px;
&.clr-dell-logo {
background-image: url(../images/DellLogoWht.png);
}
}
Your answer is correct for when you want to set size with css (I up-voted yours to reflect that). You can also set an icon size with the size attribute on the clr-icon element:
<clr-icon shape="info" size="48"></clr-icon>
We do have an example using the size attribute here, Clarity Icons Documentation
It's about 1/2 way down the page or search for Setting the icon size. FYI - we are in the process of updating the docs for Clarity Icons.
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
I have a static layout (750px width) and I'm trying to make it renders centered and disable the horizontal scroll as well.
I did dozens of searches in google, tried lots of different viewport settings but nothing worked.
This is the site: www.motocross.es
estilos_2012.css lines 18 and 11 have a min-width: 1200px for your body. take those off and your problem is solved.
also if you want to disable horizontal scroll an overflow-x: hidden on the element you want to prevent scrolling would do the trick. read more about it here.
That is because you have min-width:1200px on your body.
I'm using Qt Designer to lay out a form with QLabel, QLineEdit and QComboBox controls inside of QFormLayout and QHBoxLayout containers. What do I need to do to have the controls aligned vertically by their text's baselines?
When previewing the dialog on Max OS X, the different controls do not align by their baseline. The following example is using QHBoxLayout, but the same happens with QFormLayout:
Notice how the underscores are not on the same vertical position.
I'm looking for a solution that will work with all widget combinations where baseline adjustment is applicable and where the adjustment is done automatically based on style, platform, widget combination, widget sizes and font settings. Something comparable with CSS's vertical-align: baseline;.
Update
I've done the same test on Windows XP and also applied RA.s suggestion of using a style sheet. But that does not seem to change any of the placement of the controls or their text.
If I understand your question correctly, you need to change the vertical alignment of the QLabels. In Qt Designer, you can accomplish this by clicking on the QLabel, then adjusting the label's alignment property. In this case, I believe that changing the vertical alignment to AlignBottom might fix your problem. If that doesn't work, the label also has a margin property that you can adjust.
Update
Consider using Qt's style sheets for your application. The following style sheet achieved the desired result on the platforms that I could test on (which, unfortunately, does not include OS X):
QLabel, QComboBox, QLineEdit
{
background-position: bottom;
}