So I'm on this page:
http://v4-alpha.getbootstrap.com/getting-started/flexbox/
I am trying to enable bootstrap flex so I can use it in my application. Down at the bottom it tells you to head to a download page and installed the compiled CSS version with flex box enabled. So I uninstalled bootstrap from my application and ran this line in the package manager console:
PM> Install-Package bootstrap -Pre
This installed the _variables.scss file with enableFlex set as true.
It also downloaded bootstraps.css/min files and also the appropriate bootstrap JS files. I also installed tether via NuGet because bootstrap required this.
I copied this code from the bootstrap website:
<div class="container">
<div class="row">
<div class="col-xs">
1 of 2
</div>
<div class="col-xs">
1 of 2
</div>
</div>
<div class="row">
<div class="col-xs">
1 of 3
</div>
<div class="col-xs">
1 of 3
</div>
<div class="col-xs">
1 of 3
</div>
</div>
</div>
Which is meant to use flex box to display some divs. However, when running the application they do not show how their supposed to show. Follow this link and scroll down to see what it's supposed to look like:
http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#auto-layout-columns
I have no console errors, I can't see what I'm doing wrong. I believe it may be an issue with the bootstrap download as the css file downloaded does not have the .col-xs class. Only the col-xs-1 and up classes.
Does anyone know how to enable the flex features in bootstrap 4?
Right well I managed to get the thing working. I do believe that there is an issue with the bootstrap download or at the very least the wording on the website.
The way I managed to get it to work was like so:
Run this in the NuGet Package Manager Console
Install-Package bootstrap.sass -Pre
Install Ruby
Install sass via Ruby CMD
I put a watch on the whole folder of the bootstrap scss files
This then generated me all the css files I needed. I then used the bootstrap-flex.css file on my view and it worked.
Why it says to download the compiled flex css on the page I don't know.
Related
I'm trying to use dataview component from primeng, I've imported the module successfully, installed primeflex and read the documentation but when i try to use the grid layout it doesn't work and only shows the items in a vertical line,
I've tried to solve the problem using chrome inspect tool and tried to update the styles from the component CSS file but it didn't work also,
I've checked whether this CSS file is accessible or not and it has no problem at this point the problem is that when i try to give the .grid class a flex display for example it doesn't affect the view at all
this is the html code
<div class="container" *ngIf="topProducts != null">
<div>
<p-dataView #dv [value]="topProducts" layout="grid" class="p-dataview">
<ng-template let-prod pTemplate="gridItem">
<div class="col-12 md:col-4" style="width: fit-content;">
<app-product [product]="prod"></app-product>
</div>
</ng-template>
</p-dataView>
</div>
</div>
I think the problem related to primeflex ,when I installed it using npm i primflex it was installed successfully but didn't affect the dataview module at all
I'm using primeng 15.2.0
and primeflex 3.3.0
I am trying to learn Material in combinaton with Angular so that I can later apply the Material Design pattern to my applications. After browsing around I found Material2 for Angular and installed it on my machine through NPM. The website describes all the components it has and I first tried to start with the navigation components. After fiddling around a bit I found out that the components were not responsive. After some research I found out that flex layout could make the components work in combination with Material2. One thing I noticed on the Material2 website was that when I narrow the browser down to mobile device sizes, it would change the navbar (which has a few buttons) to this:
I marked the three buttons with a red box (Components, CDK, Guides). This is what I want to recreate, but as far as I know, there are no navbar components for Material2. Altough the navbar has Material2 buttons in it:
I was wondering how they made this, what do I need to have in order to do this? Can it be build in Material2 or should I use something else?
Thanks in advance.
FlexLayout offers a Responsive API, which lets you define different layout properties based on the media query, e.g.:
<div fxLayout='column' class="zero">
<div fxFlex="33" [fxFlex.md]="box1Width" class="one" ></div>
<div fxFlex="33" [fxLayout]="direction" fxLayout.md="row" class="two">
<div fxFlex="22" fxFlex.md="10px" fxHide.lg class="two_one"></div>
<div fxFlex="205px" fxFlex.md="65" class="two_two"></div>
<div fxFlex="30px" fxFlex.md="25" fxShow [fxHide.md]="hideBox" class="two_three"></div>
</div>
<div fxFlex class="three"></div>
</div>
Install FlexLayout through npm in your project.
Steps to install FlexLayout:
npm install #angular/flex-layout –save
or with yarn
yarn add #angular/flex-layout
And if you do not want to use FlexLayout, you can use Bootstrap4 & material design, refer 'https://mdbootstrap.com/docs/angular/navigation/navbar/'
I'm currently working on an Angular 2 project that implements the fullpage.js port found here https://github.com/meiblorn/ngx-fullpage. I'm trying to implement scrolloverflow on one of my sections and I'm unsure of how to do it. I have included the necessary .js files in my angular-cli.json file.
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/fullpage.js/dist/jquery.fullpage.min.js",
"../node_modules/fullpage.js/dist/jquery.fullpage.extensions.min.js",
"../node_modules/fullpage.js/vendors/scrolloverflow.min.js"
],
Here is some html code where i'd like to have the second section be scrollable when there is enough content.
<div mnFullpage>
<div class="section welcome-section fp-section fp-table">
<div class="fp-tableCell">
1
</div>
</div>
<div class="section welcome-section fp-section fp-table">
<div class="fp-tableCell">
2
</div>
</div>
</div>
You can now change to the official Angular component for fullPage.js, which is maintained and always kept up to date with the new fullPage.js features and extensions.
Repo: https://github.com/alvarotrigo/angular-fullpage
Demo page: https://alvarotrigo.com/angular-fullpage/
I am using the Ionic framework inside of a Visual Studio 2015 Cordova project.
I would like to override a bar footer that I have inside of a side menu.
I have tried as below...
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button class="button button-icon ion-navicon" ng-click="vm.toggleLeft()" ng-hide="$exposeAside.active"></button>
<h1 style="text-align: left" class="title">My Contents</h1>
<ion-content class="padding">
<div data-ng-include="'app/main/main.html'"></div>
</ion-content>
<!-- HOW TO OVERRIDE THIS HEIGHT?? -->
<ion-footer-bar style="height: 20px" align-title="left" class="bar-balanced"></ion-footer-bar>
</ion-side-menu-content>
The bar does resize to the 20px via the inline css, however the main contents still think the bar is it's original height.
I have seen it mentioned you can set the $bar-footer-height: 36px; sccs variable.
I don't seem to be able to find out how to do this when I am in a Visual Studio Cordova project. I have seen it mentioned to use the $ ionic setup sass to setup the sccs, but I cm still unfamiliar with the sccs, and once again not sure if I can do this when just including the Ionic files inside the Visual Studio Cordova project, i.e. the only links to Ionic are as as below in my index.html
<link href="lib/css/ionic.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet" />
<script src="lib/js/winstore-jscompat.js"></script>
<script src="lib/js/ionic.bundle.min.js"></script>
I am not sure how to "link in" the sccs if this is what I need to do.
Is there a way to override this setting just in css, or do I need to "link in" the sccs, and if so how can I do this (once again, in a project setup via Visual Studio 2015 as opposed the the Ionic CL)
SCSS if one pre-processing format for CSS, you need to convert it to CSS, and include this final CSS to the index.html
By running ionic setup sass, the build tool gulp with tasks are defined. Just run $ gulp, and it will generate a CSS file lib/ionic/ionic.min.css
So the steps are:
Modify the scss/**/*.scss , anything you want to update.
Run build command $ gulp
Make sure the final CSS file are included in index.html
If you don't know SASS/SCSS, then just don't run ionic setup sass, just edit directly lib/ionic/ionic.css, add your styles at the bottom of the file, or create a new file, and include it under the line included ionic.min.css. It is just a regular web for mobile anyway.
About SASS: http://ionicframework.com/docs/cli/sass.html
About Gulp: http://gulpjs.com/
I'm trying to use Bootstrap 3.0 as a template to create a website. The issue I'm having is that when you refresh the page all of the text disappears. It does not do it every time but 8/10 times it does. Here is the demo I have put on my website for you guys to check it out. http://dwayned.co/JSwebsite/
Please let me know if you have any questions or need to see any code.
Your HTML is quite messed up. Bootstrap structure should be like this...
<div class="container">
<div class="row">
<div class="col-xs-12">
YOUR CONTENT HERE
</div>
</div>
</div>
In the above example I've used one col-xs-12 class but you can use any combination of cols here as long as they add up to 12. See more on the Bootstrap grid system here in their docs: http://getbootstrap.com/css/#grid
I also notice in your code you are using a span12 class but this is from Bootstrap v2 and not the new v3 which uses the col classes I've outlined in my example above.
I found this existing thread that has a couple different answers referring to your issue. https://stackoverflow.com/questions/21984543/google-chrome-bug-website-not-displaying-text