I've been asking around and googling like crazy, but can't figure this one out.
I have a panel in a flex-AIR app with a borderSkin - an #Embed swf symbol. Everything looks good till the panel has enough children added to merit a scrollbar, at which point the borderSkin disappears, leaving only the default background color. Remove the children and the borderskin comes back. The swf symbol uses scale9 grids.
What am I doing wrong? Any ideas?
Thanks in advance, Jeremy
I did find the answer from a friend.
Apparently, the panel's background color disappears automatically when a custom borderskin is applied. However, when scrollbars are used, that background reappears - white being the default color - and fills the entire panel. Setting the panel's background alpha to 0 solves the problem.
I finaly cheated.
I put my panel in a box and turned to off the scroll policy of my panel.
Hope it could help.
Cdkey22
Related
My Figma element has transparent background but I want to get it solid, simple as that, and I can't find the correct way how to do it.
Which thing in the settings I should check?
To do what you want:
First:
make sure the element fill is 100%, when you are selecting the element layer itself, it's here:
Second:
make sure the frame itself has no grid active, so you can click the minus icon behind the grid section if it's active, like here:
I needed to remove layout grid for the whole page and colors became normal. I think that is so user could see the background grid so he could make the best possible design and then you delete it when you stop developing and your work is finished
Go to the fill section of the items settings and make sure the percentage next to the color is 100% or whatever opacity you want.
This Stackblitz example opens a simple dialog which contains a radio group in the mat-dialog-content div.
You can see that the dialog-content shows an ugly scrollbar:
This does not happen when other components are used: e.g. input, etc.
Using chrome dev-tools, I can see that the mat-radio-buttons have a height of 20px:
but the mat-radio-group only has a height of 17px:
Is this a bug in angular material components (the example uses version 12.0.4), or is there a simple workaround/css that we can use to get rid of the scrollbar?
I've tried explicitly setting the height on the mat-radio-group, but this has no effect.
Notes:
in production we do of course have many dialogs and some of them are large and need the scrollbars
we need an application wide solution/workaround
simply hiding the scrollbars is not okay: it must remain auto so that the dialog can react to size changes (e.g. user rotates device, some items are shown/hidden dynamically, etc.
For now we came up with a workaround that fixes the issue in all our 30+ dialogs.
The nice thing is that we can apply it in one place, in styles.scss:
.mat-dialog-content {
padding-bottom: 10px !important;
}
We just add a padding to the bottom of the dialog content area and then scrollbars: auto works as expected in all our dialogs (small and large). i.e. when you make the browser window larger/smaller, the scrollbar is automatically shown/hidden.
And it also works when there are multiple mat-radio-groups in one dialog.
The additional padding between the content and bottom dialog-actions is acceptable for our ui.
Stackblitz example with workaround
The reason this happens is due to the ripple effect on the radio button - which takes up additional space and causes the scrollbar to show. See https://github.com/angular/components/issues/20344
There are a number of ways to resolve this, such as using padding or margins on the components or on the dialog content itself like you did. The important thing is that there is enough space added to accommodate the ripple.
Ever since I added a iFrame module to my website my main ContentPanes styling has changed.
The changes include a loss of padding to the main ContentPane and only on some pages I have lost the background colour of the main ContentPane(it should be gray buts its transparent instead). I didn't edit these individual pages so I assume its because of the iFrame module?
Why does this happen and how can I readd my padding and background colour to the main Content pane without having to edit each individual page?
Note: I have since removed the iframe module but that hasn't fixed the errors with the ContentPane.
EDIT: Link to padding error (Nowtice how the "12d Model Skilled Migrant Training for 2012" Div has no padding)
EDIT: Link to background error (Notice how the "64bit Computers, Windows7 and 12d Model" has no gray BK)
On the first example, there is no padding in the CSS - you will have to actually apply padding to the template. Looks like you are using inline styles for this? So just give it style="padding:20px;" or whatever you want there.
On the second one, the background style is missing. On the first one, it has style="background-color:#f3f3f3;" - you just need to apply the same thing.
I'm making a flex 3.5a/air2 application and I've made a popup window but I can't seem to get its bottom corners rounded. Setting cornerRadius seems to only affect the top corners.
There doesn't seem to be a roundedBottomCorners property like there is for panels, and adding a controlbar with a cornerRadius also has no effect.
I'm sure this is a very simple problem but would really appreciate any help as I can't find the answer on google or after searching on here!
If you can give up window header (and paint it yourself), try to make transparent window (with transparent background) and construct it from controls you need. I'm sure you can get window of any shape this way.
Ended up making the window transparent and setting showFlexChrome to false. Then using a container I was able to get rounded corners.
It didn't help my other problem which was trying to get a glow effect around the window and still being able to resize it.. for that I had to override the mouseDownHandler from the window class so I could modify the drag locations to the container canvas. What a pain!
I'm using PopupManager to display (not modal) popups in Flex.
How can I make the background of my TitleWindow popup completely transparent?
Now it is semi-transparent.. see picture with semi-transparent background (i.e. I just want the label inside visible):
http://dl.dropbox.com/u/72686/semiTransparent.png
Maybe, instead of making it transparent I could try to reduce the padding, in order to make only the children visible ?
thanks
If you want to make it transparent, add
borderAlpha="0.0"
If you also want to remove the side and bottom borders completely, add
borderThicknessLeft="0" borderThicknessRight="0"
You can't remove the header, even thought there is borderThicknessTop option.
Also, the borderThickness="0" option doesn't work as far as I know.
Set the backgroundAlpha style of the TitleWindow to 0.
Edit, oops, my mistake, since it's a subclass of Panel, you'll also need to set the borderAlpha style to 0 as well. If you're using the default flex skins, the white arrow is the "background" and the blue area is the "border".