We Keep Coding

HTML+CSS:Is there a way to have a container(modal) in "vacuum" from the rest of the page so no other styling applied to it?

I have downloaded a free bootstrap template which has a lot of pages with a lot of styles and scripts.
When I try to add an html container to that page(which is a modal/popup), all the styles from body to headers apply to it which breaks it completely.
So because I don't want to create a class/id for all and some width/heights on the parent and body divs styling are impossible to avoid without breaking the template flow, I am wondering if there is a way to create a html container with some option that if you add it, absolutely no other styling applies to it and I can style it as I wish irrespective of what happens around it?
Could z-index work here?
L.EDIT
I have added the code here on codepen [codepen modal][1]enter link description here
The modal should look like in the codepen but instead it is spread out like it is here in this screenshot.

Your styling for your custom element must be of higher specificity than the other styling that is declared. Take a look at this great article by Emma Bostian :
https://dev.to/emmabostian/css-specificity-1kca#:~:text=CSS%20Specificity%20is%20the%20set,present%20on%20the%20element's%20style.

There's a following property in CSS:
#Element {
all: initial;
}
This should reset all the styling from the parent elements including the container in which the element is placed and the body.
Try this and declare the styles after.

How to disable Evernote web view "max-width" with JavaScript?

Evernote places a max-width limit on web view content, and I have identified its location in Chrome developer tool(F12). Evidence: Unticking the checkbox beside "max-width" will stretch the table to full window width.
My question is, how can I remove that css statement with JavaScript code?
I have tried this:
document.getElementById("container").style.removeProperty("max-width")
but in vain.
The above web page can be reached at http://www.evernote.com/l/ABXYD6q6bM9MyaAfRs78hQnq6VMINfVJODg/

Given that this statement isn't set as inline style, you won't be able to remove it.
However, you could change its value and set it to none by adding an inline style declaration, which will override the current value.
Demo:
var elem = document.getElementById('container');
elem.style.maxWidth = 'none';

Not sure how webview works, but could you try using javascript to add a new class to it that added a max-width of 100%?
document.getElementById("container").classList.add('no-max-width');
then in the styles.css put
.no-max-width {
max-width: 100%; }
If that's not possible, then try
document.getElementById("container").style.maxWidth('100%');
Though I sometimes have trouble with .styles so not sure if that is exactly right, plus I've read it's better to add classes rather than play with css styles in JS, but also not sure how accurate that is.

Setting CSS class to a specific div with specific style attribute

I'm currently redoing a website (http://www.vins-de-fronton.com/) and I have some issues doing what I would like to do.
The guys who made it set the content area in some kind of a container and used 'my custom scrollbar' from malihu (http://manos.malihu.gr/jquery-custom-content-scroller/), I would like to keep them but I think it may cause some issues for what I'm trying to do, let me explain :
I want to add a scrolling parallax effect to my differents div and I was trying to do this with js, but all of the things I've tried need to use the normal scrollbar and its scrolled px, which is replaced by the custom scrollbar.
When you scroll up or down, the actual scrollbar set a specific style to the "#mCSB_1_container" div with 'top' changing depending of where you are in the page.
So I was thinking that maybe I could add a specific css class when the div #mCSB_1_container has top:-480px as style attribute (for exemple)? Using javascript maybe ?
Here is the div:
<div id="mCSB_1_container" class="mCSB_container" style="position: relative; top: -488px; left: 0px;" dir="ltr">
Thanks a lot for reading this, and I hope that I've well explained my issue :)
Cheers

Try this: you can read top value for the div and add CSS class as shown below
$(function(){
var top = $("#mCSB_1_container").css('top');
if(top=='-480px') {
$("#mCSB_1_container").addClass("YourClass");
}
});

Remove Bootstrap Collapse' inline height property set by JS

When using the Bootstrap collapse plugin, I notice in the Elements panel that there is an inline height property of the element animated. I would like to remove this (from the actual core Collapse.js / Transition.js plugin) as I'm using pure CSS3 animations/transitions.
the reason is two fold : a/ I don't need it, b/ it's conflicting with my own animation, the element firstly expands to the height calculated by the script, and then after a 15ms pause folds down to height: 100% (as I wish)
I emphasize: I don't want to override it, I want to remove it completely (please no answers with overriding)

Height is being set by anything that looks like:
this.$element[dimension](0)...
You'll need to hunt those down in both .hide and .show plugin methods.

How to change style of tab panel headers(title) and panel headers in extjs4

I want to knw is there any css class i can override so that all tab panel headers and panel headers style i can change???
if so can some one pls let me know
thanks

For Panel headers:
To change the style of the text specifically use the classes: x-panel-header-text x-panel-header-text-default
To change the background you would need to modify: x-panel-header-default
For tab headers you need to modify:
For the text:x-tab-inner
For the background there is plenty of classes that affect how the background is displayed: x-tab x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab-top x-tab-default-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active
Because of the way CSS calculates how to style elements, if you are not really good with CSS you will probably need to use !important in each attribute you change, else if you know how to use CSS better, use google chrome to inspect elements and figure out the CSS hierarchy of classes that Extjs uses to do it in a more professional way.

For styling the text in the tab headers:
Add a rule to your CSS file selecting "a.ajax__tab_tab" and set the color/other properties from there.
This will affect the text within each tab title in the TabContainer.
Example:
a.ajax__tab_tab {
color: #00898D;
}

You don't use css directly
you should just change the sass variables and then sencha cmd will convert them to above values. SASS variables for each component are in the docs in the menu.