I'm using this version of bootstrap for a web application:
http://davidstutz.de/bootstrap-multiselect/
In the docs, it says the css required is bootstrap.min.css which I have. The problem, however, is that my application and some of its elements (datetimepicker, etc) require bootstrap.css. I cannot have both loaded at the same time without conflicts. Currently, without loading bootstrap.min.css my multiselect looks like this:
And When I select multiple they go outside the label.
Is there a way I can get around this issue? Can I link the min version specifically to the instance of multiselect?
Related
For a project, I have to use a Modal (pop up) which I prefer to use Bootstrap for.
However the project (which was original built with their own custom code so no bootstrap), when I do add the bootstrap links (into the head the script, and css links etc) into it, it now changes the my own .container classes to Bootstrap their values...
How can I ignore those?
Go here
https://getbootstrap.com/docs/3.4/customize/
Remove everything except modal
then click Compile and Download
It's bootstrap 3.4 but I don't think modal component went through a lot of changes.
I'm developing a React/MaterialUI component that will be embedded in existing websites.
In order to minimise the work needed on the existing page to embed my component, I'm bundling my component into an app.js and the only change requested to the existing page is something like:
<div id="embedded-component"></div>
<script type="text/javascript" src="https://example.com/app.js"></script>
my component finds the div by ID and then mounts on that element.
Things are mostly working but I'm having issues with CSS conflicts between the CSS files on the original page (which I can't modify) and the elements of my application.
For example the original page uses text input elements with a border/padding/color that I don't want my component to "inherit".
I want my component to display the same way regardless of which page is embedded on.
Is there any strategy/tool to use in this case, so CSS classes on existing page do not affect the elements of my embedded component?
Trying to find a solution to this I've come across the Shadow DOM (e.g. https://medium.com/rate-engineering/winning-the-war-of-css-conflicts-through-the-shadow-dom-de6c797b5cba) but I'm not sure how widely supported this is in different browsers.
Is there any solution to this, that is widely supported by all major browsers?
I cannot use iframes and have full control of my js/css files but no control over the existing page other than the "mounting" div.
In my Rails webapp I would like to have a view that only gets its css from a specific css/scss file. I have tried several suggested solutions on here but none to my avail.
However, would I be able to place the example.css.scss file outside of the assets/stylesheets directory and restrict the view file example.html.erb to the example.css.scss styling only for example.html.erb?
From what I understand by reading rails asset pipeline all files in the myapp/app/assets directory inherits its css rules from the application.css file and as well the corresponding css file when the controller is generated creating a view file, css file, etc. etc.
I've created a webapp using Ruby on Rails. The app is almost done and is staged. I had an idea that a landing page would be a nice opener to the webapp.
My goal is to create a landing page for webapp. The landing page consists of a background image with a text centered link, which I would like to link to the home page of the webapp and not receive any styling from the application.css file.
Basically I want this view file to have nothing to do with the application.css file.
Thanks in advance.
While there may be reasons to use a totally different css file that's not part of the asset pipeline (e.g. landing page working while rails is restarting, keeping landing page lightweight, etc.), my guess is that you're more motivated by getting something to work.
I'm assuming you've got styles for most of your app that would conflict with the landing page, so if the styles from app apply also to the landing page, the landing page looks funny, and vice versa. So my guess is that you're looking for a way to have some styles apply to the app, and other styles apply to the landing page.
For this, I would first of all bypass your regular layout - see bypass application.html.erb in Rails app
Then, I would update your regular layout to somehow indicate that it is the app and not the landing page. There are any number of ways to do this, but I might do the following:
application.html.erb:
<body class='app'><!-- etc. -->
landing_page.html.erb:
<body class='landing_page'><!-- etc. -->
Then, in your scss files, update it thus:
application.css.scss:
body.app {
/* All your regular app styles */
}
body.landing_page {
/* All your landing page styles */
}
Of course you can split those into multiple files, etc..
TL;DR
Unless you're running into loading time issues or you have some other reason why you really really don't want app styles loading for the landing page, then just put it all together but scope the styles so that they don't apply when they shouldn't.
You are already working in the Rails domain, so it would probably be easier to continue to stay in that domain.
In my opinion, the best/easiest thing to do would be to create a welcome controller. Create an empty index action in the controller and a view for that action. The view you are creating seems rather simple, so you can just prefix the class/id names (which don't seem like many) with welcome_ and this will differentiate them from your normal class/id names. The link for the homepage text will point to the index action of that particular controller.
Then you can create the root route in your routes.rb file to point to welcome#index.
I have made a bootstrap 3.3.1 wizard using Bootply. The site I want to embed the bootply test wizard to runs Bootsrap 4.0 and it makes the wizard break, is the wizard function non existent in Bootsrap 4.0? As it looks and works completely different in 3.x.x to 4.0 Alpha...
How can I make it look like it does in boostrap 3.3.1..
If you fork the bootply you can change the bootsrap version
http://www.bootply.com/51bhZhTCtS
There is no "wizard" function in either version. Since v4.x is still in "alpha" the class names are still changing, This tool may help:
http://upgrade-bootstrap.bootply.com/
Also the JS script is still working, but needs to be migrated to 4.x along with the HTML markup for the steps. For example, the first input was in a column too small to make the input clickable. Also, nested col-* should always be placed in another row instead of directly in another col-*
http://www.codeply.com/go/Jwct9dUGk4
I know it must be something easy, but I can't figure this out. Summernote works fine if it is in the first page element of a JQM document, but if the summernote is in an external popup or on other pages in a multipage web, they summernote initialized but the icons are spaced oddly--see the fiddle). I have tried comparing the how the css are applied, and it looks like the JQM theme is overwriting the bootstrap css, though I am not sure (adding !important to all the bootstrap and summernote css is not an option--besides it must be a initialization or loading issue). Anyone have an idea?
If you host the JQuery Mobile scripts locally then you could edit/delete the parts that are causing the problem. Or you could use find and replace to add the important tags: Find:; Replace:!important;