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.
Related
I want to have a page which has two main components. On the upper half a textarea on the lower half some input fields. The split should be 50:50. The problem I'm facing:
I cannot tell the textarea to fill the complete height when displayed. I know I can use some cdk..MinRows or ...MaxRows but therefore I need to know the whole height before. Additionally the underline looks also quite strange, e.g.
How to fix it? Does it work with Material or should I use plain HTML textarea? My project
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.
I'm working on a Gtk3 theme using css. I want to style a dialog so I used gtkinspector to check what widgets are inside there. Works well, the inspector recognizes the dialog. But it is apparently unable to identify a border sitting around the dialog. (See image below).
The border around the entire widget doesnt get hilighted by the inspector. .. so what does this consist of?
This is reflected in the css: if I put something like dialog * {green} in the css, everything colors green, except for the border. If I put .background {green} then the border also colors green....
I tried to find 'padding' 'margin' and 'border' entries that could be causing the border, but cant seem to find any....Any ideas?
Without code or a glade file one can't say for sure which properties are being used to add that border.
The border itself isn't a widget but a GtkContainer property. So you must look to the parent, GtkDialog, for the correct properties being used. Most probably its the empty border around the container child (see GtkContainer "border-width") but could be alignment or padding.
If your goal is to change the color of the background color then you should change it via GtkDialog.
So this is what I got:
http://mysite.com
Now when you press on the big fat blue button at the right with "Make An Appointment" a lightbox appears. Although this lightbox goes under the slideshow and the same with the menu, like the z-index is bigger than the lightbox. Although i have set the z-index to 999999 for the lightbox, and still it appears under them.
What should I do here?
The root of your problem is the placement of your modal-bg and modal-box.
They're both inside an element with the class "page-content-shadow" -- this class has both a position of relative and a z-index of 5. This means that even though you're setting the modal to have a z-index of 99999, that's only with the context of its parent element's z-index (which is 5 in this case).
To fix this all you have to do is change the z-index for the page-content-shadow class to 100. That will put it on top of both your nav and your slideshow (in Chrome at least).
I'm about to face a similar problem, but I've been ignoring it as best I can.
My plan, although it may not be perfect, is to run a script that will find the highest z-indexes on the page and decrement them by 1 so that my object can actually be on top.
Since you're using jQuery you could use a plugin like TopZIndex or you could simply inspect that plugin and borrow the code that makes $.topZIndex() work.
Once you have the objects with the highest z index you can mod their CSS to lower the value.
Using that plugin, the code would look like this:
var bastardObjects = $.topZIndex();
bastardObjects.css("z-index",999998);
EDIT: I'm sorry if I misunderstood, I thought you were saying that you had multiple objects with the maximum z-index and therefore they weren't playing together nicely.
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