I'm in the very difficult process of upgrading Angular Material 14 to 15 components (migration from legacy to MDC implementation).
Up to this point, I played with CSS selector priorities to override the Material styles, for instance to reduce the height of the form fields :
mat-form-field.mat-mdc-form-field.mat-form-field-appearance-outline div.mat-mdc-form-field-infix {
padding: 3px 0 0 0;
min-height: 0;
}
While tedious (and maybe not the best way of doing this), this has worked quite fine for most of the components. However, I'm facing an issue with the form fields floating labels, specifically this part of the Material generated CSS :
.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
--mat-mdc-form-field-label-transform: translateY(-32.75px)
scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
transform: var(--mat-mdc-form-field-label-transform);
}
The 75% scale has the side effect of making all the labels "blurry", which is quite annoying for readabilily.
Using CSS, I could override the scale to avoid the 0.75 and set 1.0 instead, while reducing the font-size to fixed 13px. The label would now be perfectly displayed withtout the "blurry" effect. However, the label would grow larger than the white gap in the form field border. This is due to this part of the form field component :
<div class="mdc-notched-outline__notch"
style="width: calc(45px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + 9px);">
<label ...><mat-label ...>Name</mat-label></label>
</div>
The 45px is logically calculated according to the number of characters in the label (here Name). But the final width also consider the floating label scaling (--mat-mdc-form-field-floating-label-scale).
If I understand correctly, the only solution to change the floating label scaling while changing the gap size is to override the --mat-mdc-form-field-floating-label-scale. Unfortunately I'm unable to understand how I can override such value in the Angular Material Theming Documentation. I'm not even sure it is the correct documentation for what I'm looking for.
Related
I have 2 canvases, one uses HTML attributes width and height to size it, the other uses CSS:
<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>
Compteur1 displays like it should, but not compteur2. The content is drawn using JavaScript on a 300x300 canvas.
Why is there a display difference?
It seems that the width and height attributes determine the width or height of the canvas’s coordinate system, whereas the CSS properties just determine the size of the box in which it will be shown.
This is explained in the HTML specification:
The canvas element has two attributes to control the size of the element’s bitmap: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.
To set the width and height on a canvas, you may use:
canvasObject.setAttribute('width', '150');
canvasObject.setAttribute('height', '300');
For <canvas> elements, the CSS rules for width and height set the actual size of the canvas element that will be drawn to the page. On the other hand, the HTML attributes of width and height set the size of the coordinate system or 'grid' that the canvas API will use.
For example, consider this (jsfiddle):
var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);
var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);
canvas {
border: 1px solid black;
}
<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>
Both have had the same thing drawn on them relative to the internal coordinates of the canvas element. But in the second canvas, the red rectangle will be twice as wide because the canvas as a whole is being stretched across a bigger area by the CSS rules.
Note: If the CSS rules for width and/or height aren't specified then the browser will use the HTML attributes to size the element such that 1 unit of these values equals 1px on the page. If these attributes aren't specified then they will default to a width of 300 and a height of 150.
The canvas will be stretched if you set the width and height in your CSS. If you want to dynamically manipulate the dimension of the canvas you have to use JavaScript like so:
canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');
The browser uses the css width and height, but the canvas element scales based on the canvas width and height. In javascript, read the css width and height and set the canvas width and height to that.
var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();
Shannimal correction
var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))
Canvas renders image by buffer, so when you specify the width and height HTML attributes the buffer size and length changes, but when you use CSS, the buffer's size is unchanged. Making the image stretched.
Using HTML sizing.
Size of canvas is changed -> buffer size is changed -> rendered
Using CSS sizing
Size of canvas is changed -> rendered
Since the buffer length is kept unchanged, when the context renders the image,
the image is displayed in resized canvas (but rendered in unchanged buffer).
CSS sets the width and height of the canvas element so it affects the coordinate space leaving everything drawn skewed
Here's my way on how to set the width and height with Vanilla JavaScript
canvas.width = numberForWidth
canvas.height = numberForHeight
I believe CSS has much better machinery for specifying the size of the canvas and CSS must decide styling, not JavaScript or HTML. Having said that, setting width and height in HTML is important for working around the issue with canvas.
CSS has !important rule that allows to override other styling rules for the property, including those in HTML. Usually, its usage is frowned upon but here the use is a legitimate hack.
In Rust module for WebAssembly you can do the following:
fn update_buffer(canvas: &HtmlCanvasElement) {
canvas.set_width(canvas.client_width() as u32);
canvas.set_height(canvas.client_height() as u32);
}
//..
#[wasm_bindgen(start)]
pub fn start() -> Result<(), JsValue> {
// ...
let canvas: Rc<_> = document
.query_selector("canvas")
.unwrap()
.unwrap()
.dyn_into::<HtmlCanvasElement>()
.unwrap()
.into();
update_buffer(&canvas);
// ...
// create resizing handler for window
{
let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| {
let canvas = canvas.clone();
// ...
update_buffer(&canvas);
// ...
window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?;
on_resize.forget();
}
}
There we update the canvas buffer once the WASM module is loaded and then whenever the window is resized. We do it by manually specifying width and height of canvas as values of clientWidth and clientHeight. Maybe there are better ways to update the buffer but I believe this solution is better than those suggested by #SamB, #CoderNaveed, #Anthony Gedeon, #Bluerain, #Ben Jackson, #Manolo, #XaviGuardia, #Russel Harkins, and #fermar because
The element is styled by CSS, not HTML.
Unlike elem.style.width & elem.style.height trick used by #Manolo or its JQuery equivalent used by #XaviGuardia, it will work for canvas whose size is specified by usage as flex or grid item.
Unlike the solution by #Russel Harkings, this also handles resizing. Though I like his answer because it is really clean and easy.
WASM is the future! Haha :D
P.S. there's a ton of .unwrap() because Rust explicitly handles possible failures.
P.P.S.
{
let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| {
let canvas = canvas.clone();
// ...
update_buffer(&canvas);
// ...
window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?;
on_resize.forget();
}
can be done much cleaner with better libraries. E.g.
add_resize_handler(&window, move |e: ResizeEvent| {
let canvas = canvas.clone();
// ...
update_buffer(&canvas);
})
If you want a dynamic behaviour based on, e.g. CSS media queries, don't use canvas width and height attributes. Use CSS rules and then, before getting the canvas rendering context, assign to width and height attributes the CSS width and height styles:
var elem = document.getElementById("mycanvas");
elem.width = elem.style.width;
elem.height = elem.style.height;
var ctx1 = elem.getContext("2d");
...
I am facing a problem with the Kendo Grid width. I want the grid to stretch to fit the content of the grid. This grid which I am working on is created dynamically, so at times it may have just 2 columns and at times it may have max 5 columns. I don't want the grid to expand and take the whole page for showing just two columns.
To get this working I added the following css
.k-grid table{
display: inline;
}
The problem is that when this style is applied, it completely messes up the column header and column alignment. Does anyone know how to fix this?
Actually this is really simple. But I wasted lot of time cause I did not get the correct source. You just need to implement following things.
Make the grid sortable: false
and use this CSS
#gridId table {
width: auto;
}
But with this you loose the scrolling feature. But you can wrap your kendo grid in another container and implement your own scrolling.
var grid = $("#kendoGridName");
grid.width(400);
Rather than trying to apply some css you could use some jQuery to perform this task. I do something similar in terms of height. So maybe something like this would work for you (I have modified this to do height and width).
function resizeGrid(size) {
if (size === null || size === undefined) {
size = 0.6;
}
var windowHeight = $(window).height();
var windowWidth = $(window).width();
windowHeight = windowHeight * size;
windowWidth = windowWidth * size;
$(".k-grid-content").height(windowHeight)
$(".k-grid).width(windowWidth);
}
so all this function does is scale the grid based on the current window size so for example if you want the grid to take up all the available space ie max height and width you would call resizeGrid(1) if you wanted it smaller say to take 50% of the screen size then you would use reszieGrid(0.5) if no value is used then the function just goes with a default of 60% of the available width/height.
so you could call this after your initialization of the grid and then scale the grid to an appropriate size.
by targeting the kendo css classes it makes this function easier to reuse.
if you need more info let me know.
Here is the plunker created http://plnkr.co/edit/5DhDmI1Odhrys4jYDwIB?p=preview
I have associated textbox with ng-grid filter.
$scope.filterOptions = {
filterText:''
}
$scope.$watch('filterText',function(){
$scope.filterOptions.filterText=$scope.filterText;
});
If you enter "moroni" in the text box, only one row in grid will be displayed. But at the right, white space is visible. Is there a way to fix it.
First row in the plunker example is having very big string, When text is very long, only part of it is displayed. Is it possible to break the string and display it in multiple lines.
You can fix the text not wrapping issue by setting the rowHeight in gridoptions to value that fits your longest string:
rowHeight:50
And add this definition to your css:
.ngCellText {
white-space: unset;
}
The width whitespace issue is clearly a bug in ng-grid. This grid is not really a table but a lot of positioned and measured divs that look like a table. Seems the developers forgot to add some extra width to the row when no scrollbar is visible. You can only overcome this if you patch the code (not recommended) or setting the gridheight to a value in which all rows can be displayed without scrollbars.
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 500px;
height: 300px
}
Look at this Plunker.
Anyhow, since these are mere unpractical hacks, I suggest you have a look at table based directive like trNgGrid which has all the features of ng-grid but is way more flexible when it comes to dynamic row heights.
Using the Singularity Grid System:
I have a nested grid. Nothing fancy, just 2 column. Code is like this:
main-content { #include grid-span(8,1); }
sidebar { #include grid-span(4,9); }
It renders fine, but I keep getting undesired margins. The main content has a small margin-left and the sidebar has a small margin-right. I want these to have zero margins on the edge, similar to declaring main-content as "alpha" and sidebar as "omega."
Here is the CSS (at full desktop width):
main-content { width: 65%;float: left;margin-right: -100%;margin-left: 0.83333%;clear: none;}
sidebar-first {width: 31.66667%;float: right;margin-left: 0;margin-right: 0.83333%;clear:none;}
I didn't think this was default Singularity behavior, to add those small margins on the outer edges of my grid. Or is it? Can I get around it somehow? (besides just manually adding margin-left:0 and margin-right:0). Of course if there's margin on the outer edges, the total width of each DIV should increase as well (e.g. - for the main-content, instead of 65%, it'd be 65.83333)
Can you guys please let me know what is the best way to disable the horiontal scroll bar?
I have div with width: 100% and height :280px. When we have long continuous text (without any spaces), we are getting a horizontal scrollbar displayed.
Btw I am using jscrollPane.
Any suggestions would be appreciated.
What I have found in jScrollPane - settings object documentation:
contentWidth - int (default undefined)
The width of the content of the scroll pane. The default value of
undefined will allow jScrollPane to calculate the width of it's
content. However, in some cases you will want to disable this (e.g. to
prevent horizontal scrolling or where the calculation of the size of
the content doesn't return reliable results)
So to get rid of horizontal bars, just set content width lower than the container width.
Example:
$('#element').jScrollPane({
contentWidth: '0px'
});
The answer from Sławek Wala (contentWidth: '0px') is a really magic wand :)
In IE8 unnecessary horisontal scrollbar appears often upon elastic containers. But that's only part of the trouble: when horisontal scrollbar appears the content overflows through both vertical gutter and scrollbar.
So, if one disables horisontal scrollbar just making it invisible (as the other answers suggest) then the second part of the trouble remains.
contentWidth: '0px' fixes the both symptoms.
However, knowncitizen was right, '0px' does something weird with the jScrollPane because contentWidth is an integer property (btw contentWidth: 'foo' gives us the same pretty result ).
To avoid unpredictable effects one can use any positive but small enough number like this: contentWidth: 1
This is quite outdated question. But in case someone has same issue as you and I:
as I haven't found any property or API call to achieve this, I used simple solution - disabled via CSS:
.jspHorizontalBar { display: none !important; }
Not very elegant way, but saved time of investigating or 'hacking' jScrollPane code.
Pass horizontalDragMaxWidth: 0 to the options.
None of the solutions worked for me here so here's what I did using nested divs:
JS
$('#scrollpane').jScrollPane();
HTML
<div id="scrollpane" style="max-height: 400px; width: 700px">
<div style="overflow:hidden; width: 650px">
Your long content will be clipped after 650px
</div>
</div>
I was able to accomplish this using CSS.
Since the parent should have the class horizontal-only, when we only want a horizontal bar, I added the class jspVerticalBar as a child so that when it appears ONLY under the horizontal-only class, it will not display it.
It will still work if you have set the vertical and horizontal on the same page.
div.horizontal-only .jspVerticalBar { display:none; }
After trying and failing with the other answers, we had to hack jScrollPane to make this work. In jquery.jscrollpane.js, line 171:
pane.css('overflow', 'auto');
// Hack: Combat size weirdness with long unbreakable lines.
pane.css('position', 'static');
// End hack
if (s.contentWidth) {
contentWidth = s.contentWidth;
} else {
contentWidth = pane[0].scrollWidth;
}
contentHeight = pane[0].scrollHeight;
// Hack: Continued.
pane.css('position', 'absolute');
// End hack
pane.css('overflow', '');
Not sure how safe it is but that works for us.
For me, the best solution was in to add left: 0 !important; for classes .customSelect and .jspPane in the CSS:
.customSelect .jspPane {
overflow-x: hidden;
left: 0 !important;
}