I currently have an issue where elements with templates that get iterated with an [[#each]].
The issue being that CSS styles are not affecting them. I am using Stylus to write the CSS. The issue doesn´t limit itself to my own custom CSS styles, but also affects BootStrap styles. The only thing working is inline CSS, but clearly this is not the best approach.
THe code for the application can be found here:https://github.com/smeloa/fcc-voting-app
I have included an example within the code where:
<template name="Poll">
<div class="poll-card" style="border: solid">
<h3>{{question}}</h3>
<p>
{{#each options}}
{{option}} - {{votes}}
{{/each}}
</p>
</div>
</template>
Only renders the border style, even though there is a css style saying:
/* My Poll Styles */
.poll-card
margin-top 20px
color red
Thanks for your help.
The problem is that the first lines in your original styles.styl started with a TAB character. Stylus messes up the generated css file. You can view the problem when inspecting the css file in the browser.
You probably entered {} around the final css class to prevent Stylus compiler errors for the same reason.
Remove the tabs and replace them with spaces.
you have bad formated stylus code: https://github.com/smeloa/fcc-voting-app/blob/master/client/styles/styles.styl#L245 This could be a problem.
I solved this issue by creting individual stylesheets for each template. Likely will take every single part of the website and break it the same way.
So for example for the NewPoll.html which creates the form to add a new poll I created a NewPoll.styl. This did the trick.
Related
I have a similar problem as mentioned here.
The component MyComponent.razor has the scoped CSS MyComponent.razor.css.
Anyways, the style of the CSS file SOMETIMES is ignored. If I change the CSS it might work on the first start, or it might happen that I have to build the project 10 times before it works. If I move the Component (including the scoped CSS) from one folder to another and move it back, it is more likely to work as well.
It is also not a caching issue. When I hard refresh the browser and clear the cache, the CSS is still not loaded. In the dev tools, I am also not able to find the specific changes in the bundled CSS. E.g., if in the CSS I simply change the background-color of a class from blue to red, the background-color is still blue in the bundled CSS.
Within my _Host.cshtml the bundled style is added.
<head>
...
<link href="<applicationName>.Client.styles.css" rel="stylesheet" />
</head>
Project.Client.csproj does not contain a
<RazorLangVersion>3.0</RazorLangVersion>
The issue was relatively hard to find, but I found the solution. The problems I faced were caused by the components themselves. Basically, my Pages/Components look something like this:
<MyComponentA></MyComponentA>
<div>
<MyComponentB></MyComponentB>
<MyComponentC class="customCssClass">
<MyComponentD></MyComponentD>
</MyComponentC>
</div>
To make styling work, I need to pass down the style with the ::deep CSS-Keyword. Otherwise, the style is not passed down to the component. This means, my CSS looks something like this:
::deep .customCssClass {
}
Keep in mind, that ::deep needs to be added to every CSS class, otherwise, it doesn't work (at least it didn't for me).
Another issue is that I found that under certain circumstances it still didn't work for some components. I honestly have no idea which part of my code breaks it, but the fix was to wrap the entire Page/Component into a div. My code from above would look something like this then:
<div>
<MyComponentA></MyComponentA>
<div>
<MyComponentB></MyComponentB>
<MyComponentC class="customCssClass">
<MyComponentD></MyComponentD>
</MyComponentC>
</div>
</div>
TLDR: Add ::deep to every CSS element and wrap the page/component into a div.
I have a Rails 3.2 app. I use a partial _invoice_pdf.html.erb to display an invoice. The same partial is used to create an invoice pdf. I'm using wicked pdf and it does not include the CSS when creating the pdf. That's ok - it looks fine.
But, I would like to turn off the CSS when I display the partial on the screen.
Is there a command to not include the css on a particular view (partial)?
Thanks for the help!
You can do this with just HTML and CSS, but with the caveat that the CSS technique is not supported on IE and some mobile browsers. You could get full browser support by changing the CSS to override every individual property being applied to your invoice.
CSS
#your_invoice {
all: initial;
* {
all: unset;
}
}
HTML
<div id="your_invoice">
<%= render "_invoice_pdf.html.erb"%>
</div>
Generally css isn't included in partials, but in the layout or view file that includes the partial. in which case simply either don't include the css in the particular view if appropriate or conditionally exclude it in the layout. Something along the lines of:
<%= stylesheet_link_tag 'application' unless #flag_set_in_controller %>
You could utilize a custom layout and CSS file for this aspect of your application. However, that seems less than ideal or workable based on your comment to Camden's answer (the partial does not need the CSS but the 'outer' elements do).
Otherwise, I think you are looking at conditionally removing the CSS with JavaScript placed in an appropriate block in your partial.
You can remove an external CSS file altogether with a snippet of JS like this:
$('link').remove(); // would remove all <link> elements
$('link').not('.myCSSToKeep').remove(); // would remove all <link> elements except for one with class='myCSSToKeep'
Should that not be possible for your application, I believe you're down to manually changing styles via their class with jQuery or similar.
$('.myClass').css('color', #fff); // and so on
If the styles for the PDF could be collected/used from their own CSS file, the first approach should work fairly well ... assuming I'm understanding the requirements correctly :)!
I have an existing website with lots of old pages and forms laid out with tables which I am trying to gradually transition to CSS. I want to use the Twitter Bootstrap stylesheets - particularly the styles for forms - but only on sections of pages where I have explicitly requested them. For example, I might surround the whole form in a div like so:
<div class="bootstrap">
<!-- everything in here should have the Bootstrap CSS applied -->
<form>
<p><label for="text_input">Label</label><input type="text" id="text_input" /></p>
</form>
</div>
I want all other forms to remain the same as they are now, because I won't be able to change them all at the same time. Is there a simple way to do this? I could go through every single style in the Bootstrap CSS and add a parent selector (e.g. 'p' would become 'div.bootstrap p'), but that would take a long time and it would be easy to miss styles.
Edit: If such a thing isn't possible, is there a free tool which can extract all the styles from a file, add a prefix and then save them back again?
For Bootstrap 3, it's easier if you use less:
Download the Bootstrap source code and make a style.less file like this:
.bootstrap {
#import "/path-to-bootstrap-less.less";
#import "/path-to-bootstrap-responsive-less.less";
}
Finally, you have to compile the less file; there are many alternatives
https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS
https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js
Or use npm to install less then compile the style.less file to style.css:
npm install -g less
lessc style.less style.css
The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is:
Concatenate the two Bootstrap files (bootstrap.css and bootstrap-responsive.css) into bootstrap-all.css.
Create a new SASS file, bootstrap-all.scss, with the content div.bootstrap {.
Append bootstrap-all.css to bootstrap-all.scss.
Close the div.bootstrap selector by appending } to bootstrap-all.scss.
Run SASS on bootstrap-all.scss to produce a final CSS file.
Run YUI Compressor on the final file to produce a minimised version.
Add minimised version to head element and wrap everything I want the styles to apply to in <div class="bootstrap"></div>.
I came up with a CSS solution if you can't use LESS/SASS because of work/other reasons.
I used this site, http://www.css-prefix.com/, and copy/pasted bootstrap.min.css into there. I set prefix ='.bootstrap' and spacer =' '. It will prefix everything with .bootstrap except not perfectly.
If you do a grep for '.bootstrap #media', you will find that the first class to the right of the opening bracket doesn't have .bootstrap as the parent. Add .bootstrap to all these occurrences, about 68 for me.
Then replace all '.bootstrap #media' with '#media'.
Final step is to replace all '.bootstrap #' with '#' (should be about 5 occurrences).
Example:
.bootstrap #media (min-width:768px){.lead{font-size:21px}}
needs to be replaced to
#media (min-width:768px){.bootstrap .lead{font-size:21px}}
Kind of a brute force method, so definitely try the LESS/SASS method above first.
<div>
No Bootstrap
</div>
<div class="bootstrap">
Yes Bootstrap
</div>
I have an easy solution.
Copy bootstrap css content to this (http://css2sass.herokuapp.com/) online css to scss/sass converter.
Add your tag information (e.g. div.bootstrap{ ) to the start of scss content and close the tag at the end.
Copy the whole scss content to this scss to css converter (https://www.sassmeister.com/) and convert it :)
I wasn't satisfied with any of these answers. Using Less to scope the rules created all sorts of defects. Clearfix, for example was all messed up. And rules like button.close became button.bootstrap close instead of what I really wanted: .bootstrap button.close.
I took a different approach. I'm using PostCSS to process the out-of-the-box CSS that is delivered with Bootstrap. I'm using the Scopify plugin to scope every rule with .bootstrap.
This mostly gets there. Of course, there are the html and body rules that become .bootstrap html and .bootstrap body which become non-sensical. No worries... I can just write a PostCSS transform to clean them up:
var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) {
return function(css, result) {
css.walkRules(function(rule) {
rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap');
rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap');
});
}
});
Now, I can isolate all Bootstrap styling by adding a class="bootstrap" at the top level.
That's tough. You can't Apply different css stylesheet for different parts of the same web page.
I suspect the only way to do this is to make a separate file for your content to take the bootstrap styles, and i-frame it into the page like this:
<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>
then in content-to-take-bootstrap-styles.html
reference the bootstrap style-sheet in the header. But then you have all the complications of iframes -- e.g.: the iframe element won't grow to accommodate the length of your content.
You can use ready to use isolated css for Bootstrap 4.1 (compiled with LESS) -
https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
It have isolated css for themes -
bootstrapcustom.min.css - default bootstrap 4.1 isolated style
https://bootswatch.com/cerulean/ darkly.min.css - isolated css
https://bootswatch.com/darkly/ flatly.min.css - isolated css
https://bootswatch.com/flatly/ litera.min.css - isolated css
https://bootswatch.com/litera/ lux.min.css - isolated css
https://bootswatch.com/lux/ minty.min.css - isolated css
...
To use Bootstrap CSS, simply wrap your HTML in a div with the class bootstrapiso, like so:
<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
And use any css style from folder css4.1 like so:
<head>
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
...
</head>
// https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
Done!
I am building a chrome extension that attaches a widget sort of thing to gmail message. It appears below every email (something like a gmail contextual gadget) when the user is on gmail.com site.
I looked at few css frameworks like twitter bootstrap to use in my app. When I used it in mywidget, it messed with the existing gmail styles because of css class name clash. Is there any other framework that I can use where there would be no name clash? I came across jquery-ui framework. All the classnames here start with .ui-* thereby causing no name clash. Are there any other css frameworks like this with unique class names?
Update 2: Here is a gist of v3.1.1 provided by #GFoley83
Update: The pastebin joined below is the Twitter Bootstrap version 2.0.4
You should definitively use the up-to-date version and compile it yourself.
Here is what I did with the bootstrap less files :
.tw-bs {
#import "less/bootstrap.less";
}
And this is the result : http://pastebin.com/vXgRNDSZ
Demo (jsfiddle)
If you don't like tw-bs you can easily do a find/replace, there shouldn't be any conflict.
I used #Sherbrow solution but had to add the responsive file too.
.my-bootstrap-container {
#import "less/bootstrap.less";
#import "less/responsive.less";
}
and then run
node_modules/less/bin/lessc demo.less -x > demo.css
If somebody needs the complete step by step tutorial how to compile bootstrap for your own namespaced container I made a blog post about it http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to-your-joomla-2-5-extension
The last part is for Joomla but the beginning can be used globally. It has also a link to the latest compiled bootstrap version 2.3.2. Just make a search and replace for .dp-container.
2016 Update: A future way to mitigate this issue (rather than having to recompile bootstrap) is to take advantage of web components, specifically shadow DOM. This allows your app to be self contained (almost like an iFrame) without the web browser having to open a separate page / losing the ability to communicate between pages.
say your component is contained in <div id='plugin'>...</div>
You can move what's inside that div to a tag in your head, eg.
<template id="template"><!--Your Code Here--></template>
Your template can include all the bootstrap link tags and js you want. Then in your javascript/bookmarklet, you can write
var pluginRoot = document.querySelector('plugin').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
pluginRoot.appendChild(clone);
You can read a lot more about Web Components (along with Shadow DOM) here: http://webcomponents.org/articles/introduction-to-shadow-dom/
I started off using jquery ui - http://jqueryui.com/ because it has its own css classes which don't clash with gmail. YUI is another such framework that I found. But Sherbrow showed how I can use bootstrap css with our own unique css style names.
The currently accepted answer did not render forms correctly (using SASS and bootstrap 4 beta). The following works for me:
.bootstrap {
#import 'bootstrap-4.0.0-beta/scss/bootstrap.scss';
box-sizing: border-box;
}
The box-sizing is important, because, when compiling your SASS stylesheet, the following will be generated.
.bootstrap html {
box-sizing: border-box;
...
}
I.e. the box-sizing property will be placed on an html element inside an element with class="bootstrap" - which of course will not exist. There may be other styles on html and body that you may want to manually add to your styles.
And now you can place content styled using bootstrap inside a bootstrap class:
<div class="bootstrap">
<div class="container">
...
</div>
</div>
I am first time poster. A question. How do a make a css declaration that only works within one DIV, but, not overwriting the global css? I want to jQuery loading a page into a DIV, however, the page's CSS changed my own site's CSS. I don't want that. Also I can't just take out CSS because I want them looked as intended from the source.
Basically we are going to load an external HTML with its CSS style applied locally ONLY without it changing the style elsewhere. The external HTML is not using inline CSS since we don't have control over it. They are applied to class values or even all element type. We don't want their CSS declaration modifying our own existing CSS outside of the DIV container.
Is this even possible?
Thank You?
If I understand your question correct you would place an id in the div <div id="mystyle"> content </div>. In your CSS you would write #mystyle p { color:red; }. which have no effect on global paragraphs outside the "mystyle" div.
I guess you are asking how to apply an external stylesheet to just one div. There is no way to do this using just CSS. You might be able to emulate this using JavaScript, but it's going to take quite a bit of work. Here's an outline of how you might go about doing this:
Grab the stylesheet filename from the loaded HTML and then get the contents of the CSS file via AJAX.
Somehow parse the CSS and prefix your div ID to each CSS rule, so that it applies only within your div.
Inject the modified stylesheet as inline text into the loaded HTML.
Steps 1 and 3 are relatively simple, step 2 requires a CSS parser written in JavaScript. (There seems to be one available here although there is no documentation.)