I am creating a React App, and trying to implement a Time Picker with Materialize.
I did what it's been said to do, I introduced the CDN href in my index.html file.
It kinda breaks all my style in the page, but when I tried to remove it, the Time Picker îs not styled anymore.
It works but it is not styled, so a user could not understand anything.
Related
We have recently switched to a React SPA site. From the old site, we have some documents (invoices, quotes) that we generate as HTML files that we then print as PDFs. These templates are designed by a third party and have their own separate CSS files that have nothing to do with our React SPA's CSS. After the shift to React, I added some of the templates as React-friendly modules and converted their CSS to JSS. It worked but only partially as a lot of styles are overridden by the React SPA's CSS so the results are not consistent. We don't have the resources to redo all templates from scratch and this isn't something that we should be doing anyway - ideally, we want to be able to just load in the CSS that we get from the designer and only play around with the HTML/JSX (happy to use a tool to convert CSS to JSS but no custom editing). Is there a way to somehow ignore/unload all app CSS when loading a specific page, and only use a specific CSS/JSS file (in our case makeStyles), then bring it back to normal when another page is viewed?
I have included a 3rd party pagination module for my angular application. It is working perfectly except that it does have some html that I don't want on my view.
I tried to hide that mark-up by applying display: none !important; CSS property but it did not work so I had to pass
encapsulation: ViewEncapsulation.None
to my component decorator and it started working. Only problem I have with this approach is when I route away from the current component. It messes up with the button styles of my dashboard component. This problem also goes away on dashboard if either I reload the page or navigate to another route.
Is there any decent solution to this?
I have a jsp page which I want to style using Materialize framework, but as soon as I add the href to materialize.min.css in my page (or in the entire project from the beginning), it overrides my existing styles from all the application and I want to be able to call Materialize only when I need it, not to change the whole style because it becomes a mess.
It's also the first time I'm using Materialize, so maybe I'm missing something.
That's how CSS frameworks work, generally. Most of them will normalize and apply a base style to your website, even if you are not using framework specific class names.
I usually work the other way around: I let my framework of choice control all of my UI, and when I want to override something, I use custom CSS styles. To do that, make sure you add a link to your own styles on the tag after the Materialize CSS link.
I am having some issues in CSS/Bootstrap work when it is rendered in a angular2 component.
when I try to render the CSS/html contents in Index.html file (with proper references for CSS,JS) the application/functionality works fine. But when the same html contents along with CSS classes is rendered in the angular2 component, it doesn't work.
Based on the searches on internet I have done all these changes but nothing makes it working. I have added encapsulation: ViewEncapsulation.None for that component, still the CSS functionality doesn't work along with angular 2.
also the order of JS references file are placed in the following order
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I have replicated the issue and checked into Github url
can somebody help me with this issue?
This is because we cant simply add js files in angular 2 by adding the ref link,
try this stack over flow solution
How to use jQuery with Angular2?
For Bootstrap you can use ng-bootstrap
https://www.npmjs.com/package/ng2-bootstrap
I jut recently tried to upgrade jQuery UI, and after I did I was shocked to find that it completely changed the look of my site. I'd like to use the jQuery UI logic, and I'd like to have whatever minimal CSS is needed to (say) make a dialog have the right dimensions, but I don't want any of jQuery UI's fonts/colors/backgrounds/etc.
Is there any way to get a CSS file like that? I tried playing around with the theme roller, but it seems to assume I want styles for some color and some font, when I don't want any at all.
The root directory of a jQuery UI download zip should include jquery-ui.structure.css which contains just the structural CSS without any of the themeing. You may have to add some of your own styles on top of that to get a usable UI.