I have an InputElement on my page, and I'm trying to access its width so that I can make other elements the same size.
My InputElement is top level, so I have:
InputElement nameBox = querySelector("#nameBox");
Later on in the main(), I have:
var width = querySelector("#nameBox").style.width;
After this line, width is always "" instead of the expected "149px". However, assigning to that stlye.width updates the width...
Any idea why this is? I understand that Dart's main() doesn't run until the DOM is loaded, so not sure why this isn't working.
By the way, the width is 149px by default--I haven't changed it.
.style.width does not return the computed width but the width assigned to the style attribute of the element (<input style="width:200px"/>). If you want to get the real width you can use Element.clientWidth.
Related
I have a Div whose size can vary (only div resize) based on user action (small & large view) and this div contain ag-grid.
Initially div/grid load in compress size so I have used class according to that like (small font-size, height, padding etc.) to remove scrolls
but I want when user enlarge the div size the class will swap with another class (large font-size, height etc.) but I couldn't find any grid api or method to set cellClass and headerClass dynamically.
One more thing can I update that in gridOptions and load grid according to new option.
Add a listener to gridSizeChanged event. In the listener, check for the window/div size and apply CSS classes accordingly.
var gridOptions = {
...
onGridSizeChanged: onGridSizeChanged
};
function onGridSizeChanged(params) {
let newClass = (css class for new width)
gridOptions.api.getColumnDef(colId).headerClass = newClass;
gridOptions.api.refreshHeader()
}
I am using angular 5 where in a component I have one method
onFullScreen : function (event){ console.log(event[0]) }
Here, when I do console.log(event[0]), this will return this
This returns a HTMLDivElement, now I want to get the height property in my onFullScreen() method. How to get it?
The best way to get the height of an element (and lots of other layout-related properties) is to use getBoundingClientRect (https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect).
So you can do this:
const height = event[0].getBoundingClientRect().height;
You can try this:
var height = document.getElementById('element').style.height;
Since the height is defined in inline styles for this element, this would work.
Warning: this does not work if height is not explicitly defined in css but calculated based on content or outer box.
I wonder know how to get the width of my string in pixels
BitmapFont API < 1.5.6
To mesure the width of a String you use your Font and get the bounds of the String, you are going to draw.
BitmapFont.getBounds(String str).width
BitmapFont API
You can get the height to for the right offset for drawing too. Just replace width with height.
In addition for multiline texts use getMultiLineBounds(someString).width to get the bounds.
BitmapFont API >= 1.5.6
The BitmapFont API changed in 1.5.7 so there is a different way to get the bounds now:
BitmapFont.TextBounds and getBounds are done. Instead, give the string to GlyphLayout and get the bounds using its width and height fields. You can then draw the text by passing the same GlyphLayout to BitmapFont, which means the glyphs don’t have to be laid out twice like they used to.
Source (Web archive)
Example:
GlyphLayout layout = new GlyphLayout(); //dont do this every frame! Store it as member
layout.setText("meow");
float width = layout.width;// contains the width of the current set text
float height = layout.height; // contains the height of the current set text
According to #Nates answer: https://stackoverflow.com/a/20759876/619673 calling method
BitmapFont.getBounds(String str).width
not always returns proper width! Especially when you are reusing font.
If you want draw text for example in the center of part of view port, you can avoid this problem by using another method
BitmapFont.drawWrapped(...)
Example code:
font.drawWrapped(spriteBatch, "text", x_pos, y_pos, your_area_for_text, BitmapFont.HAlignment.CENTER);
If you use skins in UI it is a hassle to find out the correct font to feed into the GlyphLayout.
In this case I use a throw away instance of Label to figure everything out for me then ask the Label for the width.
Skin skin = getMySkin();
Label cellExample = new Label("888.88888", skin);
cellExample.layout();
float cellWidth = cellExample.getWidth();
Table table = new Table(skin);
table.defaults().width(cellWidth);
// fill table width cells ...
This is not the answer if you want to position the text yourself, but it is useful to make a UI layout stable and less dependent on the actual content of the cells.
I know Flex is full of holes, and it needs a lot of hacks to get it to work right, but I think I'm on the right path to getting it right. I will describe the problem and the solution I'm trying to implement, I hope you can point me in the right path.
What I'm trying to do is binding the width of a Spark DataGrid column to the width of a Spark Label, here is the first hole: GridColumn has a binding property "width" but it's not ready after the object creation is complete and it's only published after user interaction. So I came up with the first hack: A function that extract the column width from the DataGrid itself and it's binded to the events that are triggered when the columns are created or their sizes changed, and it works:
[Bindable(event="creationComplete")]
[Bindable(event="columnStretch")]
[Bindable(event="propertyChange")]
public function columnWidth(grid:DataGrid, column:GridColumn):int {
if(isNaN(column.width)){
if(column.grid){
return column.grid.getColumnWidth(grid.columns.getItemIndex(column));
}
}
return column.width;
}
it works to retrive the width at creation but it doesn't work for when I set the width of the column with the cursor, as any bindable property works, so the thing is like this: If I set the width of the label as such: the width is changed after user interaction but not after the grid's creation complete. If I set the width with the width is changed after the grid is complete but it won't react to user interaction...
Any help?
It looks like I ran into the same issue a while ago. And fixed it: the following approach worked fine for me. Assume you have a function that resizes your label based on a column's width:
protected function layoutTextInputs():void {
var numCols:int = dataGrid.columns.length;
var w:Number = 0;
for (var i:int=1; i<numCols; i++) {
var header:Rectangle = dataGrid.columnHeaderGroup.getHeaderBounds(i);
var textInput:IVisualElement = textInputs.getElementAt(i - 1);
textInput.left = header.x;
textInput.width = header.width;
}
}
In this example textInputs is a Group containing a TextInput for each column, that is positioned exactly above that column and is equally wide.
Now you want to call this function every time the user resizes a column, so you do this:
dataGrid.columnHeaderGroup.addEventListener(
GridEvent.SEPARATOR_MOUSE_DRAG, onHeaderResize);
dataGrid.columnHeaderGroup.addEventListener(
GridEvent.SEPARATOR_MOUSE_UP, onHeaderResize);
private function onHeaderResize(event:GridEvent):void {
layoutTextInputs();
}
But unfortunately this does not execute the method on initialization, nor when the screen is redrawn in any way that changes the column's widths in any other way than through user interaction. Luckily this is easily fixed:
override protected function updateDisplayList(
unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
layoutTextInputs();
}
Edit: a note on the 'holes' in Flex.
GridColumn is not a visual component. It is a presentation model that instructs the grid layout how to render its (actual) columns. So you must interpret its width property as such an instruction and not as an actual value of the column's width.
By default a column's width is determined based on its contents and the available space. The width property instructs the grid layout to use a custom amount of pixels instead.
I am using mx:AdvancedDataGrid. i simply assign an ID to a datagrid column. And i binded column width property with inputText as per requirement. it works for me...
for example:
<s:textInput width="{myDatagridColumnID.width - 10}" />
I am working in Flash Builder 4.6.
I'm using CKEditor as a rich text editor for my website. On that site I also have a custom image manager that I use in CKEditor using the "filebrowserImageBrowseUrl" config parameter.
This puts a "Browse Server" button in the image properties that lets me select a file from my image manager. This works just fine.
However, when I insert an image from my image manager and resize it in CKEditor this only adds a style attribute to the img tags. When people browse me website they will see the image as the size I want, but they also have to download a large amount of data, even if the image size is only a thumbnail.
My image manager has automatic resizing when you put a width and height as a query string to the image url.
How can I override the img tag CKEditor creates so that the selected width and height is put as query variables into the src attribute in the img tag in addition to the style attribute (so that CKEditor still knows which size the image has)?
I did find another question posted here: CKEditor: Customized HTML on inserting an image
But the answers for that question doesn't seem to work since the width and height from that example contains the image's original size instead of the custom size. I've also debugged the various variables from those methods without finding the custom size.
So the question remains: How can I override CKEditor's output HTML to put an image's size as query variables as well as in the style attributes where CKEditor puts it by default?
UPDATE
To make all the comments below a bit more comprehensive, here's a condensed version:
CKEDITOR.on('instanceReady', function (ev) {
var editor = ev.editor,
dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
htmlFilter.addRules( {
elements : {
$ : function( element ) {
// Output dimensions of images as width and height attributes on src
if ( element.name == 'img' ) {
var style = element.attributes.style;
if (style) {
// Get the width from the style.
var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
width = match && match[1];
// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
var height = match && match[1];
var imgsrc = element.attributes.src + "?width=" + width + "&height=" + height;
element.attributes.src = imgsrc;
element.attributes['data-cke-saved-src'] = imgsrc;
}
}
}
}
});
});
This code is run whenever the CKEditor generates the actual HTML, which happens when you either view the source by clicking the "Source" button, or by performing an HTTP POST of that page.
A small warning, though. The code above will keep appending the width and height query strings for each click on the "Source" button, or for each postback, so you might want to add some extra logic to filter out the width and height query strings before appending them to the src attribute.
If you look at the Output HTML sample in your copy of CKEditor you can see how it uses the htmlFilter to change the images to put the dimensions in attributes. Based on that code you can write your own code so that it changes the url of the image.
And be careful: URLs are protected to avoid problems with the browsers, so modifying the "src" attribute might not be enough. Look at the properties of the object that you are modifying.