We're using bootstrap and I've got a page where I'm getting conflicting results with small buttons.
I have a number of buttons that look like this:
<input type="button" class="btn btn-small" value="Save"... />
I have my main form and then some divs that are used for jQuery dialogs. On the main form, the buttons are showing up as small, but in the dialogs, the buttons are showing up regular size, even though in all cases, I'm using <input type="button" and class="btn btn-small". The only difference is the divs that contain them, so I'm guessing it has something to do with the styles applied somewhere above the buttons.
When I look at the "Computed" styles in Firebug, it shows .btn being applied, but .btn-small has a line through it for every property I've inspected that has both listed, implying it's not being used.
The small buttons have a line height of 15px, but the normal size have a line height of 20px. What's really odd is, even though the computed property for line height for the small buttons say 15px, when I expand it to see where it comes from, it shows .btn with a 20px value being applied (see image).
The bottom line is I'm really not sure what's causing it. I'm assuming it's some style in one of the many divs surrounding it. My main question is obviously how do I fix this, but on a more general level, what would cause the .btn-small style to not be used?
HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them however if the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant. [paraphrased from mozilla common css questions]
You have two classes modifying the same attribute, and so the browser rightly only applies one.
I was able to track down the problem. I initially ruled out jQuery-UI interaction since I was unable to reproduce it in jsFiddle by using jQuery-UI. What I hadn't mentioned and turned out to be relevant, is that we are also using Infragistics Ignite toolset. Ignite is based on jQuery-UI. The dialog was getting the .ui-widget class (I was focused on the button's classes) and that was causing ignite to set the font size in the buttons which then broke the Bootstrap sizing.
To fix the issue, I removed the following line from infragistic's .css file:
.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:"Segoe UI",Arial,sans-serif;font-size:1em}
Sorry for not providing all the relevant info. Just didn't think of infragistics as being a possible cause since I wasn't directly using any of their stuff on that page.
Related
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 want to create a textbox to make a loginform. But there is alot of css on it that i don't want to use. Im also using bootstrap so there is a lot of standard css classes and stuff that the textbox inherits. How do i make it not inherit any other classes or can i make it to be reset so that it doesn't have any css classes except the ones i tell i to?!
One of the problems i have is that the textarea looks like it is sunk into the background i rather want it so look flat.
in your CSS
input[type="text"]{border:none; box-shadow:none; width:auto}
you can change any of these properties at will, or apply to all input elements by deleting the [text] part
I am trying to fix a presentation bug in Google Chrome. When I change one class, the page looks correct. However, if I change every attribute of class A to those of class B, the presentation is still wrong. Therefore, one of the child elements has a different style applied when I change the style.
Is there a way to quickly see all the changes in the computed styles on all elements that occur because you change a class on one element?
With an element selected, click on the '+' in the upper right corner of the inspector. This will allow you to write a new rule.
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 need to make a control that has three T's of varying size that are linked. By clicking on each T the article text will resize to either a small, medium, or large font appropriately.
Does anyone know how I can do this? Also, do you know of a site that uses this kind of text resize feature?
Thanks in advance.
UPDATE: Thanks for all of your responses. I went digging through Google a little further and found that this has potential: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript It's using JS to dynamically resize the font and this is exactly what I want to do. I'd much rather do this in CSS if possible still though - anyone?
You can do this with CSS - if all of your fonts are percentages, then you can set one font size for the document and all children will be a percentage of that.
The approach will not be able to be implemented using CSS only. You will need to use CSS in conjunction with JavaScript.
The best approach would be to set your page's default body size using either percentages or ems. You would create two extra classes for the larger and smaller font size for the page's container or <body> tag. These classes could use larger and smaller percentages / ems or you could use the keywords: xx-small, x-small, small, larger, x-large, xx-large. (NOTE: I left out smaller and larger since they seem not to work sometimes).
Then using JavaScript you could attach an onclick event to your three T's which would dynamically add the desired class to the page container (or <body> tag). If they clicked on the middle T then the applied large/small class would be removed returning the page to it's default font-size.
A few things to keep in mind:
A user can set a minimum font size for their browser so if you set your "small" size below that that setting, that user will never see your smallest font setting.
You will need to experiment with how your layout acts if a user has a larger default font-size setting.
Hope this helps and good luck!
You could attach different CSS files depending on which 't' the person has clicked (changing the paragraph text size). I'm sure there's a better way, but that'll get the job done!
Using jQuery you could do something like this:
$(function(){
$('#smallT').click(setTextToSmall);
$('#mediumT').click(setTextToMedium);
$('#largeT').click(setTextToLarge);
});
function setTextToSmall(evt)
{
$('.text-to-resize').addClass('small').removeClass('medium').removeClass('large');
}
// Have similar setTextTo.. functions for Medium and Large here
To clarify, this actually does use CSS to change the sizes. You would have three CSS classes named 'small', 'medium', and 'large':
.small { font-size: 0.5em; }
.medium { font-size: 1em; }
.large { font-size: 1.5em; }
The setTextToSmall() function is called when the user clicks on the small "T". It adds the class 'small' to all elements that already have a class of 'text-to-resize' and removes the 'medium' and large classes. So where you might have this before the click:
<div class="text-to-resize">Some sample text</div>
You would have this after the click:
<div class="text-to-resize small">Some sample text</div>
If you wanted to apply this to every element on the page then you would simply change setTextToSmall() to the following:
function setTextToSmall(evt)
{
$().addClass('small').removeClass('medium').removeClass('large');
}
The benefit of jQuery (or other frameworks for that matter) is that it abstracts out the DOM which is very tricky across different browsers. For example, to do this in straight Javascript you might instinctively want to use document.getElementsByClassName(). However, that method doesn't exist in any version of IE.
You can use
("fontSize",+=3px)
If you don't want to have limit.