Can't change .Css file for VueJs plugin - javascript

I am using vue-js-modal plugin, And inside this plugin, there is a style.css file. In this file, I need to change some setting to customize the changes in the modal style. But when I access this file and change whatever I want and then save my changes and run the application, the modal page look like the previous style and setting! And when I opened the console and checked the elements and select the modal page, the style setting in the browser it's the same previous setting! How can I solve this problem? Do I need to build the file contains the style.css? If yes, how can I build it? If no, how to solve it?

Try using Deep Selector in you vue app to rewrite modal css
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
for me syntax is following
/deep/ p {
margin-top: 0;
}

Why not override the CSS rules you want to change, either in your own CSS file or in the style tag if you're using single-file components?

A quick fix would be to change the version of the css file by adding to the path of the file.
Old: "/mycssfile.css"
New: "/mycssfile.css?1"

Related

How to achieve the functionality of ::ng-deep in a jQuery code

I need to remove the "disabled" property from a button. I have been trying to achieve this via jQuery and I know what exactly to do ($(.button).removAttr("disabled")), the only problem is that this button is deep inside the hierarchy and I am not able to grab it through my code. Inside my scss file, I am able to work with this element by doing something like this:
.parent ::ng-deep .child {
margin-left: 1px;
}
Though when I try $(.parent ::ng-deep .child).removAttr("disabled") in my jQuery code I get a syntax error since I believe ::ng-deep is not allowed in jQuery. Is there a way I can mirror the functionality of ::ng-deep in my jQuery code?
Edit: I am using Alfresco Development Framework(ADF). This is the adf-viewer component to be precise. the html code looks something like this:
I am not able to grab the highlighted div (adf-viewer-container) which is a child of adf-viewer element. I started off from a parent at a much higher level and could trace my way upto adf-viewer. The button I am targeting is deep inside the highlighted div.
In the scss file this works:
.inner-layout .inner-layout__content adf-viewer ::ng-deep .adf-viewer-container {
// do something
}
P.S. Since this button is a part of a third-party component I do not have the ability to manipulate the HTML file. I have been using the developer tools to look at hierarchy. I also read about shadow DOM, but parent.shadowRoot is null. The regular jQuery operator '>' didn't work either.
Any help is highly appreciated

How to reset css in angular

I'm developing an angular project but I ran into a problem, I want to achieve the following. 1. click a button and open a new window. 2. I don't want the css rules applied to the whole application to have any effect on the pop up new window.
Here's what I have tried.
.ts file
goToLink(url: string){
window.open(url,'', 'scrollbars=yes,width=300, height=300');
}
.html file
<a (click)="goToLink('filter');" >Filter</a>
I want a new look/css in the filter without entire page of the website css
Make a filter component and write its own css. Try not to use any class in the HTML that you have defined globally. This is called ShadowDom

apply css on elements which are present in a set of urls

I believe the following is not possible without javascript/jquery but still wanted to confirm as I am not good in css/html/jquery.
I would like to apply certain style to an element but only when a particular url is accessed in my website.
I am using asp.net so a single aspx page template can cater to a host of urls so I cannot write the style in the html of the template.
If I write this style in a css file and include it in the template it will get applied to all urls.
I can selectively load this css file through jquery but I do not want to involve jquery into this as much as possible.
I can also use a asp.net literal control and load the css based on the url from code-behind but then addition of new urls would involve a code change. Also it sounds very messy.
Currently I am applying this through javascript/jquery as below on document.ready
if (window.location.href.toLowerCase().indexOf("/some-url/") > 0)
{
$('#some-element-id').attr('style', 'display:none');
}
But this shows the element for a split of a second before disappearing.
A solution involving jquery/javascript but resolving the above issue will also help.
I hope I was able to explain it properly.
Please let me know if any clarification is required.
It is probably showing at first because it is rendered at least a bit before the page is loaded, so it is shown until the jQuery ready() function is called on page load.
I would think the easiest fix would be to hide the element by default, then show it if it is in the URL:
#some-element-id{
display:none;
}
if (window.location.href.toLowerCase().indexOf("/some-url/") < 0)
{
$('#some-element-id').attr('style', 'display:block');
}
if #some-element-id is on a separate page then
add some-class to your element
define that class in a new .css file
only import that new .css file on the page you want the style
applied to
The URL is not part of the DOM so there’s no element to be selected by the CSS.
As you say the only way you can apply the css in a specific URL is using javascript.
The recommendation I can tell you is use addClass instead to use
.attr('style', 'display:none');
Or if you need to add a lot of css you also can include or replace the a full file like:
$('head').append('<link rel="stylesheet" href="youStilefile.css" type="text/css" />');
I hope it's helps!
the best solution is separate your css styles by codes that generated from server (independent from client).
Also you can test below code instead of $('#some-element-id').attr('style', 'display:block');
$('#some-element-id').hide();
and please insure that your jq lib imported successfully.

Different bootstrap CSS files?

I downloaded a Web template which is based on bootstrap version 3.
Inside the template I found CSS files named bootstrap-cerulean.css, bootstrap-journal.css, bootstrap-classis.css. Although, I can not find a file named bootstrap.css. What do bootstrap-cerulean.css, bootstrap-journal & bootstrap-classis define or do? Are they themes for bootstrap? Do I still need to reference bootstrap.css if I reference one of the themes such as bootstrap-cerulean.css?
All the bootstrap.css styles are most probably modified and integrated with those three mentioned custom css files that you got with the template so no, you don't need to link the default bootstrap.css anymore unless you're planning to override certain elements on the page to the default style (which I would recommend using a new css file with the few changes kept there for overriding the template's style rather than linking the whole bootstrap.css to the template.

How do I export dom values of element to css file equivalent

I have element that are being dynamically updated and I want to generate a css file which contains the rendered styles for that element. Is there anything that does this? Thanks.
There is nothing I know of in jQuery or JavaScript that does this intrinsically. However, if you just want it for yourself and not for dynamically creating stylesheets, then I recommend Firefox and the Firebug plugin. This will show you the CSS live and you can modify and export it, as well.
getComputedStyle gives you the computed style of an element:
window.getComputedStyle($("#my_element").get(0))

Categories