I am using ng bootstrap in my project. All I am stuck with doing is opening a modal. I read a similar thread but there, bootstrap css was not included.
I am following this example.
When I click the button to open the modal, modal gets appended in the DOM (visible when inspected using dev tool) but it is not visible on the screen.
I have included bootstrap css in my .angular-cli.json as
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Bootstrap css is also visible in styles.bundle.js when page source is viewed.
Edit 1:
When inspected, for ngb-modal-window opacity was set to 0. When I set it to 1, popup became visible. But position of the popup is not center. It is pulled to the top. Please refer the image:
you can include in css
#import url('../node_modules/bootstrap/dist/css/bootstrap.min.css');
in 'styles.css'
in some cases ngx-bootstrap not works exactly as expected in angular 2/4.
I've faced the same issue when try to use ng-bootstrap with bootstrap 3. install ng-bootstrap-to-bootstrap-3 and follow the instructions saved my day.
Related
I start with a relatively fresh Vue3 + PrimeVue + Tailwind setup.
My problem is that the PrimeVue button does not display correctly when I add Tailwind.
To test this, please have a look at the following Sandbox.
As soon as the tailwind.css is commented out in the main.ts, the PrimeVue button is displayed correctly again.
And also only "primary" buttons are affected.
Can you please help me to display the PrimeVue buttons correctly together with Tailwind?
The Tailwind CSS seems to be setting the button background to transparent.
I moved its CSS to just before the Prime import in your example (main.ts), which fixed the missing background problem.
However, I don't know if this might have other unintended consequences.
Interesting. Preflight is a set of base styles that Tailwind applies, and it is setting the button background color to transparent.
If you’d like to completely disable Preflight — perhaps because you’re integrating Tailwind into an existing project or because you’d like to provide your own base styles — all you need to do is set preflight to false in the corePlugins section of your tailwind.config.js file:
module.exports = {
corePlugins: {
preflight: false,
}
}
Answered in this post
So, I have a problem and am not sure where to start. I am working static site project
built using nuxt, vue, and vuetify. Everything works great and looks good, until I run nuxt generate. After that when I go to view the final static site, I lose my styling on my font-awesome icons. The first image below is what I have when running on my localhost.
In the photo, you can see the size of the magnifying glass and star. This is perfect. However, the next photo is after I run nuxt generate
I am at a loss here as to what would be causing this, and any direction would be greatly appreciated.
EDIT
After looking at the devtools again from a comment, the icons have the same CSS styles, and I do not see a difference. However, further back in the elements I have a div that is getting rendered differently, which could be breaking things.
The CSS circled at the top is my local environment. You can see that .evidenceReview{} has the active background, which is overriding .theme--light.v-card{}.
In the bottom circled CSS is what I get from my deployment. Here you can see that the same classes exist, it's just that the presence is switched and .theme--light.v-card{} is overriding .evidenceReview{}.
As workaround, importing the font-awesome css at the top of my css file worked.
#import '#fortawesome/fontawesome-svg-core/styles.css';
Workaround taken from FontAwesome GitHub issue:
https://github.com/FortAwesome/Font-Awesome/issues/18666#issuecomment-1090686913
I have an app where suddenly all of my buttons in Vaadin do not show their icon/text. When I use the element inspector in Chrome I see that the class .v-button-wrap has been set in the tag of my page (not in the .css theme file) and has its display set to block. if I turn off display:block I can see my text again. I cannot figure out however where this incorrect css style is being generated in my app.
Any ideas?
The problem was I had Vaadin Touchkit registered in my widgetset config file (.gwt.xml file). Once I removed this everything works fine. It appears Touchkit injects a tag into your element.
I am developing a one page website. I need a bootstrap "modal" class popup to show up when I click on a button. However the template I am using is done in Bootstrap Version 1. I need the "modal" popup to be in Bootstrap v3. Is there any way that I can make this specific part of the html body to use Bootstrap v3?
If I try to include the link reference to Bootstrap v3 at the top of the page the template gets messed up and unclean.
Please help....
Best solution, but not cross-browser
This is not supported by all browsers but you can use :
<style scoped>
#import url("bootstrap-3.css");
</style>
Put this in the modal container <div>.
Cross browser solution
Copy over the modal component from bootstrap 3 then remove the bootstrap 1 modal component (in the css).
Other cross browser solution
Rebuild your template on top of bootstrap-3.
is there a way to change the breakpoint where Bootstrap menu becomes responsive and collapse? 979px is far too big for me and I would like the transformation taking place only on smaller sizes.
Yes, you can do it by redefining #navbarCollapseWidth variable in less/variables.less file. And recompiling css after that.
Compiling instructions can be found in Compiling Bootstrap with Less section of official documentation.
#nick-kugaevsky the 'compiling bootstrap with less' - link is broken.
BTW, for bootstrap 3 RC 1, you will want to modify the following property in less/variables.less
// Point at which the navbar stops collapsing
#grid-float-breakpoint: #screen-phone; // here i allready changed it
BTW: this only prohibits the responsive nav to collapse when width > #screen-phone for example. Here is some more info on compiling bootstrap with less: http://bootstrap.lesscss.ru/less.html
You have to download bootstrap, point your app or the node js util to the bootstrap directory containing the less files, modify less/variables and recompile the bootstrap.less file.
Argh, just found out it this is written in the bootstrap documentation:
http://getbootstrap.com/components/#navbar