This question already has answers here:
Text gets cut when using <select>
(4 answers)
Closed 12 months ago.
Drop down menu broken on Windows Chrome. Works perfectly fine on MAC Chrome and the letters aren't cut off. The problem:
The word, select, should be completely visible.
The CSS is basic:
.form-control {
height: 30px;
width: 50%;
padding: 8px 12px;
font-size: 13px;
}
With standard bootstrap.
height: 30px; is likely your issue.
A quick look at the default .form-control in my Chrome inspector shows the elements as being 34px high. You've made the .form-control elements too small to display the entirety of their contents.
In general, you should avoid explicitly setting the height of these.
I ran into this issue not long ago.
Removing the vertical padding is what set it to good in windows chrome for me. It didn't impact the display negatively in Mac Chrome for me either.
.form-control {
height: 30px;
width: 50%;
padding: 0px 12px;
font-size: 13px;
}
Related
I'm testing designed page with CSS and html with different browser. When I test with chrome page working correct , but not working correct in Firefox. I didn't use strange style, Just used the margin , padding and border radius. I don't know why not working. Thanks for guiding.
background-color: #7B618F;
padding-top: 30px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
border-radius: 0 0 10px 10px;
margin-right: 2px;
margin-left: 2px;
font-size: 12px;
color: #fff;
in Firefox
in Chrome
It happens sometimes, I think it's a bug. I was using chrome and I had this type of problem so I switched to edge and firefox but sometime later it was also not working. But after rebooting my pc everything was okay.
I find solution for this problem. It's problem for right to left direction used in CSS style , when I use dir in division tag working correct in Firefox.
resolved
<div class="h-left" dir="rtl">
I've set a font-size on all of my input elements and also a line-height of 1.25. For some reason, on mobile web (currently trying with Android Chrome) the blinking cursor is much shorter than the text itself, and results in the text getting cut in the middle when the user is actively entering input. The actual text itself ends up being fine after the user exits the input (doesn't get cut off). How can I make sure that the cursor matches the real size of the text? I attached a picture for reference.
On desktop web browsers (Windows, Mac + Chrome, Safari, Firefox) it's totally fine and I don't experience this issue, although apparently on Firefox Linux the same issue pops up.
Code so far:
.input-class {
background-color: #eeeeee;
border-color: transparent;
border-radius: 10px;
box-sizing: border-box;
padding-left: 0.5rem;
line-height: 1.25 !important;
vertical-align: middle;
width: 100%;
}
.input-class::placeholder {
overflow: visible;
}
.input-class:focus {
outline: none;
}
input {
box-sizing: content-box;
font-size: 1rem;
padding: 0.5rem;
}
<input type="text" class="input-class">
Any comments are appreciated!
I found the issue after doing Remote Debugging with Chrome - highly recommend this in the future if you're also facing some similar issues on mobile. The custom font that I was using was not playing nicely with inputs and textareas on Chrome. I switched to a more common font and the issue went away.
For some reason, the padding appears different on all windows computers. My icons aren't located properly in the middle nor is the text in my buttons. It is working perfectly on windows.
https://imgur.com/a/3XMkL9N - here is an example picture
See more at: https://cobury.dk/
The CSS/HTML I use:
i.icon-facebook, i.icon-instagram, i.icon-linkedin, i.icon-youtube {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 6px;
padding-right: 6px;
border-radius: 99px;
background: #19191b;
color: #fff;
margin-right: 5px;
}
<div class="somefooter2">[icon type="icon-facebook"][icon type="icon-instagram"][icon type="icon-linkedin"][icon type="icon-youtube"]</div>
The padding is perfect in Chrome on Windows, but looks weird on both Chrome/Safari on Mac. I am using the same padding top and bottom, as you can see. What am I missing? Is it something about my divs? Line height? A bug?
I am using the paid font Gilroy.
![enter image description here][1]So i have created a website that i have tested and it works fine in all major browsers, except for when I am running windows 8. Windows 7works fine but i windows 8 a lot of my css is being affected.
I was wondering if anyone knew a list of things that were different or displayed differently because of this as i really do not want to re write the whole thing!
It appears as though padding might be adding to the height/width properties or something im not quite sure but would appreciate a heads up on any niggly things anyone else has found before i try tearing my css to pieces!
css
.whitebox-index {
background-color: #fff;
max-width: 1044px;
min-height: 1055px;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#banner {
width: 1024px;
height: 370px;
/*margin-bottom: 10px;*/
position: absolute;
background-image:url(../images/bannerhomebackground.png);
}
In chrome etc this displays as a my white background witha banner at the top and has the even white gap around it but in windows 8 ie this has the 10px gap to the left and top but the right has a 30mm gap.... the width has increased...
I just needed to uncheck "Display intranet sites in Compatibility View" from the Compatibility View Settings menu.
Edit:
Worth noting that this will affect all of your intranet sites. You could alternatively use the x-ua-compat meta tag to set the docmode to Edge. – Jonathan Sampson
I've encountered an oddity.
On one of our QA tester's boxes, there is an HTML check box that displays very large under Firefox and Chrome, but in IE, it shows up in its default size. On my box and others, the checkbox displays as is typical.
Are there any Windows desktop display settings that would affect the size that checkboxes are rendered in Firefox and Chrome? Is there anything in CSS to beware of?
Here's the combined CSS that affects the control:
various selectors {
display: inline;
margin-top: -1px;
width: 20px;
font-family: Verdana, Helvetica, Sans-Serif;
font-size: 10pt;
height: 22px;
line-height: 20px;
border: 1px solid #6d6d6d;
padding-left: 3px;
padding-top: 3px;
vertical-align: middle;
}
More simply put, avoid using pt units in CSS, as they may be interpreted differently. Stick to using px units for as much as you can. So for various selectors, set font-size: 10px;
Does the QA test box machine have the font set to a different default size in the browser? Set the font size in Pixels of the checkbox to confirm.