I made a project .net core MVC. I am using semantic-ui-react modal and importing its library and link css to work on it, but the problem is the bootstrap css made a conflict with my other CDN semantic-ui-css.
What I meant by that, I open the modal and its is swapping every seconds into the div: ui modal transitive visible to ui scrolling ...
I made some tests to see that is bootstrap is not friend with semantic-ui-css
because I remove the link css and it works but I cannot keep the bootstrap style for my header nav-bar.
Someone knows how to deal with that ? Thanks:)
have you tried to install the css and then import it :
https://react.semantic-ui.com/usage
Related
I am currently working on a simple Modal dialog, that should open on a button press; Figuring I´d use the bootstrap example (https://getbootstrap.com/docs/5.0/components/modal/) as a starter would be the best quick win.
As I am using pug as a view engine, I`ve quickly converted the HTML into Pug and tested it without success.
The Modal Container is not showing / popping up. I don`t get any errors within my console. Bootstrap is functioning perfectly.
The pug code:
include modules/head
// Button trigger modal
button.btn.btn-primary(type='button' data-bs-toggle='modal' data-bs-target='#exampleModal')
| Launch demo modal
// Modal
#exampleModal.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true')
.modal-dialog
.modal-content
.modal-header
h5#exampleModalLabel.modal-title Modal title
button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close')
.modal-body
| This is a test.
.modal-footer
button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes
sdsadHead includes both jquery and bootstrap (v4.4).
Does anyone have any ideas why it wouldn`t work?
Suggestions about fade css settings couldnt help.
Thanks in advance.
As proposed by Sean above the issue was an incorrect load of the Bootstrap.js file.
Fail by developer.
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 have included two bootstrap links in my HTML page. This is causing issues with the accoridan I have included. The accordian once opened wont collapse when clicked again.
I have figured out that this is because of the two bootstrap links and the problem is solved when I remove one. Does anyone know why this is occurring and how to solve this?
The two bootstrap links are a local copy and a CDN copy. I use the CDN primarily and have a local backup incase the CDN is down.
Any help is appreciated.
Unfortunately, Bootstrap doesn't provide a specific variable for the fallback purpose. However, you can still achieve the CDN fallback behavior, you can test for one of the bootstrap plugins. For example, you can check for the modal plugin like below-
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>$.fn.modal || document.write('<script src="/js/bootstrap.min.js"><\x3C/script>')</script>
This will only load the local version of the bootstrap.min.js file if the CDN doesn't work.
Please note that this might fail in future if the modal plugin gets renamed or removed in future.
I am trying to style the datatable just like twitter bootstrap and I came across twitter bootstrap jquery ui theme. After extracting, there were 4 files inside the css folder. These are
jquery.ui.1.9.2.ie.css
jquery.ui.1.10.0.ie.css
jquery-ui-1.9.2.custom.css
jquery-ui-1.10.0.custom.css
I want to know which files should be inlcuded and what is the significance of each file.
I also do find that while implementing jquery-ui-1.10.0.custom.css only file, the dialog boxes header is not properly aligned. Is dialog boxes not properly aligned in the default theme?
Include both the files & your alignment issue will be gone, i think 1.10.0. seems to be the latest version. So include
jquery.ui.1.10.0.ie.css
jquery-ui-1.10.0.custom.css
Also open these both files in an editor to view and understand the alignment and design.
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;