I have...
body { text-transform: uppercase; }
...and...
textarea { text-transform: none !important; }
Text pasted into a textarea in Webkit (Safari and Chrome) will get capitalized.
Text pasted into a textarea in Firefox or IE will be left as it was, lower or capped.
I need it to be left alone in all browsers for SQL.
Bug? Fixes?
You're likely to have a single element wrapping all content or perhaps a small number of them. I've found that the top-most element having text-transform: uppercase does not cause pasted text in WebKit to become upper case.
E.g. instead of:
body { text-transform: uppercase; … }
Use:
body { … }
#header, #content {text-transform: uppercase}
Related
I'm trying to load a custom dropdown celleditor component into my Ag-Grid in Vue3. I have reproduced the issue here: https://codesandbox.io/s/ag-grid-vue-3-example-forked-h5z6r5?file=/src/App.vue
The problem is that the options are hidden under the rows.
I have found one cheaty way of fixing this by overriding:
.ag-row-focus {
z-index: 999;
}
.ag-grid-cell {
overflow-y:visible !important;
overflow-x:visible !important;
z-index: 999 !important;
}
The problem with this approach is that it's completely dependent on ag-row-focus. If a user has a specific row selected and then clicks on the dropdown of another row, say the one above, then the selected row is still another row and therefore, the options are still hidden. There were also other issues, for instance that the dropdown itself with these overflow settings do not respect the cell width and height anymore (especially the height). When the text is larger than intended, it is also when collapsed breaking the height rules for that cell.
Ag-Grid versions used:
"ag-grid-community": "26.1.0",
"ag-grid-vue3": "26.1.2",
Update:
I got most of the behavior now working by adding the css below. Remaining issue is that the text inside the dropdown also overflows and gets too big due to which it goes onto other cells & the height goes further than the row. Expected behavior is probably here that the text gets cut off.
.ag-grid-cell {
overflow: visible !important;
z-index: 10030 !important;
}
.ag-row {
z-index: 0;
}
.ag-row.ag-row-focus {
z-index: 1;
}
.ag-root-wrapper,
.ag-root,
.ag-body-viewport,
.ag-body-viewport-wrapper,
.ag-center-cols-clipper {
overflow: visible !important;
z-index: 5;
}
.ag-center-cols-viewport {
overflow: visible !important;
}
Updated sandbox:
https://codesandbox.io/s/ag-grid-vue-3-example-forked-nvnhue?file=/src/App.vue
How do I make the ion-menu-button (hamburger menu button) larger?
The ion-menu-button component creates an ion-icon with font-size set to 26px. There is no attribute to set size and CSS seems to have no impact.
[UPDATE]
I reported this as a bug to the Ionic team and they "fixed" it here: https://github.com/ionic-team/ionic/issues/18667 although i still don't see how to modify the size.
setting:
ion-icon {
--font-size: 100px !important;
font-size: 70px;
}
does nothing
Sorted it out on my own. There was a
.sc-ion-buttons-md-h {
display: flew;
}
wrapper that was limiting the size of the button. Once i removed that:
.sc-ion-buttons-md-h {
display: block !important;
}
and used ion-grid to place button on the left side of my header, i could then use:
ion-menu-button {
font-size: 50px !important;
}
to set the size of my menu button.
I've got an inline-block element that contains a very long word. When I resize the viewport until I reach the breakpoint of the text wrapping to the next line, I get a substantial amount of space. However, I would like the inline-block element to wrap immediately to the width of its contents.
I found it hard to explain exactly what's going on, so below an animated gif to illustrate my issue:
Upon resizing the viewport:
To be clear, the image above is me continuously resizing the viewport.
Does anybody know a way to achieve what I'd like? Even with CSS hyphenation the white-space still remains (which I don't want).
JSFiddle. Resize the frames to see what I mean.
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
The inline-block indeed extends on resizing as your animation shows, so that it keeps place for the long word to go into that space again.
One simple solution would be to add text-align: justify, but I'm afraid it may not exactly be what you want (see demo).
Another one would be the use of media queries, as #Parody suggested, but you would have to know the dimentions of the containing div, and that would not be very scalable as you mentionned.
The word-break: break-all suggested by #yugi also works but causes the words to to collapse letter by letter, regardless of their length.
The only way to achieve the exact behavior is (as far as I know) to use javascript. For example, you would have to wrap your text into a span element inside the div, and then add something like this :
var paddingLeft = parseInt($('#foo').css('padding-left')),
paddingRight = parseInt($('#foo').css('padding-left')),
paddingTop = parseInt($('#foo').css('padding-top')),
paddingBottom = parseInt($('#foo').css('padding-Bottom')),
cloned = $('#foo span').clone(),
cloned_wrap = document.createElement('div');
$(cloned_wrap).css({
paddingLeft : paddingLeft,
paddingRight : paddingRight,
display : 'inline-block',
visibility: 'hidden',
float: 'left',
});
$(cloned_wrap).insertAfter('#foo');
cloned.appendTo(cloned_wrap);
$(window).on('resize', function(){
$('#foo').css('width', cloned.width() + 1);
$(cloned_wrap).css('margin-top',- $('#foo').height() - paddingTop - paddingBottom);
}).resize();
Please see the jsfiddle working demo. (← edited many times)
That's quite a lot of code, but it works ; )
(PS : I assumed jquery was available, if not, quite the same is achievable in pure JS)
I don't think this is possible only with CSS for the one element. The reason for your behavior is that the width of the element is still 100% of its container. The only way I could think to accomplish this is by doing something a little bit "creative"...try setting the style to inline so you get the shrink-wrap behavior, but to get around the background color issue, also put it in a container that shares the same background. That should work.
If im understanding you correctly you could use the #media type to decide what css to use depending on the width of the screen
here is an example of what i mean
#media(min-width:0px) and (max-width:200px){
div {
display: block;
background-color: black;
color: white;
padding: 5px;
}
}
#media (min-width:200px){
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
}
I am still very appreciative of #lapin's answer (which I accepted and awarded bounty to), I found out after the fact that it didn't quite work on multiple elements next to each other (that has nothing to do with #lapin, I just didn't mention it in my original question as I thought it would be irrelevant information).
Anyway, I've come up with the following that works for me (assuming the elements it should be applied to are .title and .subtitle):
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $(document.createElement('span')),
bar = $(document.createElement('span'));
inner.addClass('inner');
bar.addClass('bar');
el.wrapInner(inner)
.append(bar)
.css({
backgroundColor: 'transparent'
});
});
function shrinkWrap() {
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $('.inner', el),
bar = $('.bar', el),
innerWidth = inner.width();
bar.css({
bottom: 0,
width: innerWidth + parseFloat(el.css('paddingLeft')) + parseFloat(el.css('paddingRight'))
});
});
}
shrinkWrap();
$(window).on('resize', function() {
shrinkWrap();
});
Basically what I do is:
put the text in an inner wrap element
create an additional absolutely-positioned background element
get the width of the inline inner wrap element
apply said width to the background element (plus padding and whatnot)
The CSS:
.title, .subtitle {
position: relative;
z-index: 500;
display: table;
padding-left: 10px;
margin-right: 10px;
background-color: red;
}
.title .bar, .subtitle .bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: -10;
background-color: red;
}
I've seen this a few times, only on Webkit. The scenario is that you have some text with a hover color, and it's using a webfont custom font. When you hover, part of the furthest right letter is not getting the hover color. To see what I mean, view this fiddle in Chrome or Safari, and look carefully at the "r" at the end of the text while hovering with your mouse, it is not completely red.
http://jsfiddle.net/jaredh159/xPZB8/
HTML from fiddle:
<a>Some Text Foo Bar</a>
CSS from fiddle:
#font-face {
font-family: 'stephanie_marie_jfregular';
src: url('stephanie-marie-jf-webfont.eot');
src: url('stephanie-marie-jf-webfont.eot?#iefix') format('embedded-opentype'),
url('stephanie-marie-jf-webfont.woff') format('woff'),
url('stephanie-marie-jf-webfont.ttf') format('truetype'),
url('stephanie-marie-jf-webfont.svg#stephanie_marie_jfregular') format('svg');
font-weight: normal;
font-style: normal;
}
a {
font-family: stephanie_marie_jfregular;
color: #000;
font-size:50px;
}
a:hover {
color: #ff0000;
}
What is this? Fixable? Is it just the case of a poorly created web-font file, or a bad font? Any one familiar with this issue or have a workaround?
The reason the right few pixels arent't given their :hover color is because they run outside the a container. Inspect it or give it a background color and you can see this. A workaround is faking the extra space by giving the a some extra padding-right.
I'm not sure how exactly the glyph is able to run outside the container, so I'm be interested if anyone else knows. For now I'm sharing celeriko's suspicion that this font's metrics are borked.
EDIT: Turns out it's the font's side bearings that allow for the glyph to run outside its bounding box. This is common with brush script fonts and allows individual letters to connect by slightly overlapping eachother. So it's a valid property of the font, unfortunately causing a problem the original typographers didn't have to account for — no hover states on paper ;)
I am new to bootstrap, and I added bootstrap 3 into my project and it shrunk all the font sizes, I never had any font size specified in these classes. I thought bootstrap 3 had the default size to 14.. is there something else I need to do?
Thanks
It appears to be happening, at least as of version 3.3.6, due to this block on line 1097:
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
You can restore your font-size by adding this to your stylesheet:
html
{
font-size: 100%;
}
You can customize/override anything - if, for example, you load YOUR css file AFTER the bootstrap file, then your settings will override it. Whatever you can dream:
p {
font-size 18px;
}
and so on...
I strongly recommend digging into the source code: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
UPDATE: TO clarify, "No" you shouldn't have to do anything else. It sounds like there is another problem. The linked source code has changed since the original answer date... as of Feb 2015, it looks like this:
html {
font-size: 10px;
}
body {
font-size: 14px;
}
Assuming we've set our project up correctly, (bower install bootstrap is pretty easy)... attempting to echo text outside of the body should result in 10px text, inside body should be 14px.
If you don't see 14 point text inside the body, then something else might be stepping on it. I'd next inspect in in Chrome (for example) to confirm where the font-size was coming from.
I'd like to add that I think it's helpful to understand how these values we see in this /dist/css file are derived from less variables... the defaults should work out of the box, but you have easy control over everything, including the body text size: see http://getbootstrap.com/css/#less-variables.