I want to add this grid in my angular 4 project. I have installed these grid using
npm install #material/layout-grid
this command but now I am not able to import in my angular 4 project. My code is something like this
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell">One</div>
<div class="mdc-layout-grid__cell">Two</div>
<div class="mdc-layout-grid__cell">Three</div>
</div>
</div>
But my div are not aligning properly. Please see below image.
I am getting a result like this. What should I do to aligning div horizontally using this Layout Grid? Please help.
Probably you don't have imported css and js files to your angular project. Look on .angular-cli.json file, there should be something like that:
"styles": [
"../node_modules/path-to-your-module-css", // add this line
"styles.css"
],
Or you can also import that directly to your component css:
#import "../node_modules/path-to-your-module-css";
Related
I'm upgrading my company AngularJS project to Angular 8 thanks to ngUpgrade. So I have a hybrid application with both angularjs and angular components. I am also using an angular material template that provides SCSS files for both angular and angularjs.
My problem is that I want to only use the ajs theme on ajs component and the angular theme on angular components (and they can also be nested).
I searched a way to apply only one global css when a specific class is applied and switch to another global css when another class is applied.
I cant really do css lazy loading in this case
Lets assume my app code looks like this :
<div class="theme-1">
<div>Some stuff that should get theme 1 CSS</div>
<div class="theme-2">
<div>Some stuff that need ONLY theme 2 CSS</div>
<div>without theme 1 CSS</div>
<div class="theme-1">
<div>Switching back to theme 1</div>
</div>
</div>
</div>
I want to be able to switch between theme when a class theme-1 or theme-2 occurs.
you should use BEM approach for this and your code should be like this.
.theme-1 {
&__div1{...}
&__div2{...}
...
}
.theme-2 {
&__div2{...}
...
}
.theme-1,
.theme-2 {
/* Common Css */
&__div1{...}
&__div2{...}
...
}
so you can write classes like this now
<div class="theme-1__div1">
<div>Some stuff that should get theme 1 CSS</div>
<div class="theme-2__div1">
<div>Some stuff that need ONLY theme 2 CSS</div>
<div>without theme 1 CSS</div>
<div class="theme-1__div2">
<div>Switching back to theme 1</div>
</div>
</div>
</div>
for BEM you can refer this link - http://getbem.com/naming/.
If you are still not clear, I can provide same code also.
Let me know if you have any doubt.
The solution in my case was to use encapsulation: shadowDow on my angular components. It allowed me to reset theme1 css and use only theme2 css.
I had t do lots of css tweaks (some angular material features doesn't work with shadowDom...) and an cant switch back to theme1, but it has been the best solution so far.
I've recently installed Tailwind for my Vue project. It took some time to get it work but finally, it worked, even with code completion in VS Code.
The problem I am facing right now is that I cannot use the breakpoints anywhere in my project.
<div class="container mx-auto">
<div class="card w-full sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
// Content
</div>
</div>
Watch a gif of it.
What I want to achieve is to have the div be 1/3 when on desktop, full width on mobile. What I am getting is full width everywhere. I can't seem to find anything else like this on the internet either.
I'd like to mention that I am using VueJS, if that's of any help. Any ideas?
Thanks in advance.
Eventually found the solution after a break and finding a Vue project that uses Tailwind. I needed to install postcss-preset-env and add it to postcss.config.js.
npm install postcss-preset-env --save-dev
postcss.config.js
module.exports = {
plugins: [
require('postcss-preset-env')({ stage: 0 }),
require('tailwindcss')('tailwind.js'),
require('autoprefixer')
]
}
I am looking a at large project that used Foundation version 4.x . This project has used the grid extensively: almost all HTML pages have
css classes from version 4x such as
row, large-12 columns, panel, callout
I am trying to figure out a few basic methods to transition ?
question :are row, columns and panel classes still supported ?
how to translate old row and column to new grid classes i.e. if I have a
<div class="row>
<div class="large-12 columns">
what is the equivalent in Foundation 6?
The Flex Grid or Float Grid is supported still, however you need to import Foundation slightly differently.
To use the Float Grid in Foundation v6.4+, you need to:
In CDN link or package managers: import foundation-float.css in place of foundation.css.
In Sass: set both $xy-grid and $global-flexbox to false.
To use the Flex Grid in Foundation v6.4+, you need to:
In CDN link or package managers: import foundation-flex.css in place of foundation.css.
In Sass: set $xy-grid to false.
To update your HTML to use the XY Grid
Based on the example you have given, the most direct 'conversion' would be:
<div class="grid-x">
<div class="cell">
You can learn more about the XY Grid system here
Because Bootstrap 4 uses SASS for components like cards, I'm having trouble overriding it in CSS since I haven't used SASS before.
I see ways to override configuration files in a server node.js environment, but for a basic index.html file linked to Bootstrap and a custom CSS file, how do you go about setting margin bottom to 0?
HTML here:
<div class="card mb-3" id="sheet-footer">
<div class="card-header text-center">`=
<h3 class="card-title">
Content
</h3>
</div>
</div>
Chrome dev tools show the following:
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}
Any attempts to override margin-bottom (even with the terrible HTML style tag) don't beat this rule - what's the proper way to override this?
Thanks in advance.
If you don't want a margin bottom remove the class mb-3
If you only want a margin bottom on specific breakpoints bootstrap 4 allows mb-md-3
see https://getbootstrap.com/docs/4.0/utilities/spacing/
//edited: simplified version now
I am using meteor and want to use a bootstrap grid system in my templates. Unfortunately it just displays the two columns on top of each other as if no bootstrap class was assigned to them at all. I would expect them to be next to each other on the same line
I haven't installed any bootstrap package. (I had but uninstalled it to be sure it is not that) I have only installed other basic standard packages like the facebook login or autoform
Bootstrap itself is working because autoform is styled with it and the alert classes are working in my template for example
There is no other css styling at all in this template yet
The HTML must be well formed as meteor would not render the template otherwise
I tried:
installing the twbs:bootstrap package
installing the mizzao:bootstrap-3 package instead
using more complex bootstrap with container-fluid
which didn't change anything
Bootstrap is installed in the head tag using the code from this link (MaxCDN):
http://getbootstrap.com/getting-started/
this is the entire code for the template
<div class="container">
<div class="row">
<div class="col-md-6">col1</div><div class="col-md-6">col2</div>
</div>
</div>
As I am very new to bootstrap I assume its a very stupid beginners' issue but I just cannot find it
Hey guys I figured it out!
It seems to have to do with the relatively small size of my screen plus that my developer console was opened. When I used col-xs-6 it worked.
Thanks Anyway!
The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.
<div class="row">
<div class="col-xs-9 col-md-7></div>
<div class="col-xs-3 col-md-5"></div>
</div>