I am trying to add custom buttons to the left and right navButton but a spacer seems to appear if I set a backgroundImage. If only the title text is set the spacing is correct. Here is my example to reproduce the issue, I added a borderColor to show that the image is not the culprit.
var win = Ti.UI.createWindow({
width: '100%',
height: '100%',
backgroundColor: 'white'
});
var leftBtn = Ti.UI.createButton({
backgroundImage:"/images/headerCmdMenu.png",
width: '81px',
height:'74px',
title: 'left',
borderColor: 'red',
borderWidth: 1
});
var rightBtn = Ti.UI.createButton({
width: '81px',
height:'74px',
title: 'right'
});
win.leftNavButton = leftBtn;
win.rightNavButton = rightBtn;
var nc = Ti.UI.iOS.createNavigationWindow({
window : win
});
nc.open();
Here is a screenshot of the view…
http://imagebin.ca/v/13wq8Jrn1hst
Any ideas how to fix this?
Thanks.
Chris
Note: I did ask this on the official forums, but got no answer after 14 days.
http://developer.appcelerator.com/question/160022/leftnavbutton-and-rightnavbutton-spacer-appears-if-using-backgroundimage-#comment-196608
This is quite long to answer but it might still help someone else looking for same issue.
For images in left/right nav buttons, look for the below points first:
If you only set title, then it will work as expected.
If you set only backgroundImage (not set width & height), then the image will be stretched to take the full space.
If you set only backgroundImage with some width & height, then the button will behave as a normal button with expected spacing and area.
If you set both backgroundImage & title, then it will be the case of this post.
Also remember that always use correct size image files when intend to use as left/right nav buttons.
Related
I have this Mat dialog box in Angular and I understand I should pass in the styles for width and height alongside that object but I can't manage to figure out how, it keeps throwing errors. Or is there any other way to set width and height? Thank you
let dialogRef = this.dialog.open(GroupChooseComponent, {data: {variant} });
You can add width or height like this according to latest version of Angular Material.
let dialogRef = this.dialog.open(GroupChooseComponent, {
width: '500px',
height: '500px'
});
solution 1
you can't change the height or width because the library fixes the size based on { lg, sm, md }
that's my code ( in my project ), it works for me, you can follow the similar like that
this.modalRef = this.modalService.open(UploadUserComponent, { size: 'lg' });
Solution 2
You can create individual css file to customize the style width or height like you want.
We currently have a select made in React with ReactSelect that has a fixed 16 options in the table. Currently, when the control is clicked, the menu appears which shows 11 items and has a vertical scroll to scroll down to show the remaining 5 items.
This would be better if all 16 items showed when menu appeared, with no vertical scroll. We have tried to create the following custom style:
menu: (provided) => ({
...provided,
background: '#DDDDDD',
marginTop: '-1px',
zIndex: 10,
height: // what to put here? we've tried "auto", "fit-content", "100%" and none are good...
}),
is there another element in the select (other than menu) that we should be styling, or is there a better way to style the menu such that all options show?
Thanks!
First, I used the most upvoted answer in this post to inspect the ReactSelect menu (which I wasn't able to do previously). I discovered that menuList has a default maxHeight of 300px, which was preventing the menu from growing larger.
This then did the trick for me:
menuList: (provided) => ({
...provided,
maxHeight: null
}),
I want to move the position of a component using elementRef.
My code below seems pretty reasonable - but doesn't work. Why?
ngAfterViewInit() {
let element = this.elementRef.nativeElement
element.style.color = "red" // WORKS!
element.style.top = "100px" // NO EFFECT!
}
here's a link to my example: https://stackblitz.com/edit/angular-qlzkkc?file=app%2Fhello.component.ts
This is css issue. If you add, for example, element.style.position = "absolute", you'll see that top = "100px" works.
top, bottom properties work only for positioned elements. So by adding any position property to it can fix the issue.
eg.
element.style.position = "relative";
var myWindow = Ext.create('Ext.window.Window', {
header: false,
style: 'background-color: transparent; border: false',
bodyStyle: 'background-color: transparent; background-image: url(graphics/ss_message.png); background-size: 100% 100%;',
id: 'ss_banner',
width: 250,
height: component.getBox().height,
border: false,
bodyBorder: false,
frame: false,
cls: 'noPanelBorder',
});
I'm using the window xtype because I can't seem to make a container/panel appear, even if I add renderTo: Ext.getBody(), it doesn't work.
The window appears as such:
I've also tried to use css I'm rather unsure on which properties to use.
Removing window border
If you really want to remove borders of a window, you can use following configuration:
var myWindow = Ext.create('Ext.window.Window', {
// ...
// What shows the 'border' is actually just the background of the window
// shown via padding (+ 1px of actual border)
style: 'padding: 0; border-width: 0;',
// Show automatically
autoShow: true,
// Disable resizing, if you want
resizable: false,
});
Here is a working fiddle of removing window borders
Showing a panel
However, if you don't want to use any of the window functionality and could do with a container or a panel, you should use them. All you should need is the renderTo configuration you mentioned, to render the panel to the body or to any other element. I don't know why this configuration does not work for you, it works perfectly in the fiddle below.
You can try adding a unique class to the panel via cls configuration property and search for it in the rendered HTML code. It is possible it is rendered correctly and just not visible for some reason.
Here is a working fiddle of rendering panel to element
EDIT:
If you need to display only image, there is an image component in ExtJS, Ext.Img. You can work with this component the same way I described for the panel.
This works for me:
var myWindow = Ext.create('Ext.window.Window', {
// What shows the 'border' is actually just the background of the window
// shown via padding (+ 1px of actual border)
style: 'padding: 0; border-width: 0;',
});
I followed the tutorial on creating a popup for an add-on in Firefox, and it worked great.
The issue I'm having now is that the popup it creates doesn't change size to fit the content I add to it. Instead, it adds scroll bars.
So, how do I change the size of a Firefox Add-on SDK popup to show all content?
You do have to deal with that yourself.
If you already know the desired size when creating the panel, you can pass the height and width as properties of the object to the Panel() constructor.
After a panel is created, its size can be changed by setting the height and width properties on it.
height and width values are numbers in pixels.
See https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel for a full documentation of how to use panels.
Though the tutorial and docs never say it, the height and width of a panel always defaults to the same small size.
To change it you can use the height and width parameters for the panel class.
If you want it to change automatically you can use this code:
//index.js
var panel = require("sdk/panel").Panel({
height: 200, //choose your default
width: 200,
contentURL: data.url("popup.html"),
contentScriptFile: data.url("auto_resize_popup.js")
});
panel.port.on("resize", function (size) {
console.log(size);
panel.resize(size.width, size.height);
});
...
//auto_resize_popup.js
var content = document.body;
var size = {};
size.width = content.offsetWidth + 2; //2 extra pixels get rid of scroll bars
size.height = content.offsetHeight + 2;
self.port.emit("resize", size);