blueprint-icons.css file must be included alongside blueprint.css ->. Main = document. If you only need a few icons, you might want to consider embedding your font in CSS. Additional components live in the blueprintjs/icons, blueprintjs/datetime.
#Css icon resize formatting code
It's a little hard to describe in words, but suffice it to say that, without some major re-working (or perhaps some brilliant code or hidden function) I couldn't get that strategy to work.
However, while this put the resize corner in the correct place, the resizing itself was completely messed up, as the mouse movements and the actually resizing itself were off by 90 degrees. axis should match the rendered font size in px, and a new CSS attribute was. I used transform: rotate(-90deg) to move the resize corner to the upper right, then put in an inner div with transform: rotate(90deg) to make the inside content the right-way-up again. The ones currently referenced in the CSS spec (i.e., widely supported in. The downside about these small favicons is that you will loose some quality of the image. This might not be an issue if you already have other content "behind" your absolutely positioned resizable element.įor your information: I also initially tried using the native resize functionality. The icons can go as low as 16×16 pixels, which is SUPER small. Otherwise 'mousemove' events outside of the resizable div were not registered. I needed to put the resizable div into a container that filled the body. You should probably put them only in JavaScript or only in CSS, not in both as I have done. That means those values exist in two different places which is not good. I've hard-coded the width and height in the JavaScript for the sake of simplicity. Note the 'mousedown' is on the resize icon, while 'mousemove' and 'mouseup' are on the document body (or some other larger element behind the resizable div). You might be able to do something similar using 'drag' and related events. I then used 'mousedown', 'mousemove' and 'mouseup' events to track resizing activity. I essentially created a custom resize icon in the upper right corner. I'm more than happy to elaborate on things I might've missed as well. If you set both to '100', the image will be stretched. Here's the current style being applied to the box: display: block Īnd here's a picture of the div in question with the corner that currently has the resize tool on it boxed. To resize an image proportionally, set either the height or width to '100', but not both.
#Css icon resize formatting how to
Any advice on how to produce this result? Also not opposed to using a different method of resizing. Looked around online but couldn't find a way to move that corner to the upper right instead of the bottom right. The problem is my box has a locked bottom and left position (which I want to maintain), but the resize corner chosen by default is the lower right one, which produces weird results for resizing the top. I'm using the CSS resize property at the moment as it seemed like it was the easiest way to do it. Programming a web application with a resizable div.
0 kommentar(er)
