I am facing a problem regarding HTML5 and AngularJS when using ng-show/ng-hide.
Hereby I added the sample code for better understanding.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.value = true;
$scope.click = function(){
$scope.value = $scope.value ? false : true;
};
});
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
<button ng-click="click()" >Click</button>
</div>
</div>
In the class="row",there is 3 separate div equally divided rows. when the button click is triggered, the first row(div) will hide. But i don't know why the remaining 2 rows(divs) are changing in grid positions.
I don't know what is missing in my code. i want to display the rows in fixed grid position even if some other rows are hide or not.Correct me if i was wrong.
Thanks in advance.
Note: please Run code in snippet in full in Full Page for better view.
It happens because what ng-hide do is display: none and what you need is visibility:hidden. So solution for your problem will be to add class with visibility:hidden after click. You can define such class and use ng-class for this purpose or override .ng-hide class, but I suggest first option.
The simplest example:
HTML
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div id="firstCol" class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
<button ng-click="click()" >Click</button>
</div>
CSS
#firstCol.ng-hide{
display: block !important;
visibility: hidden;
}
and DEMO
https://plnkr.co/edit/rZEW2XgowDxGAqL1aBBv?p=preview
You can keep code like
<div class="row">
<div class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
<div class="col-sm-3" ng-show="!value">...</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
I can't trigger your error but I think I get it. Did you try ng-if instead of ng-show ? ng-if deletes from the DOM while ng-show only hides it
EDIT If you want to keep position of your grids, just do
<div class="col-sm-3" style="background-color:lavender;" ng-if="value">.col-sm-3</div>
<div class="col-sm-3 col-sm-offset-3" style="background-color:lavenderblush;" ng-if="!value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;" ng-if="value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
Related
I'm working on a page (Angular) that dynamically displays bootstrap cards that looks as follows:
<div class="row">
<div class="card border-primary p-0 mb-2 col-md-4 col-sm-6 colxs-12" *ngFor="let m of myVals">
<h4 class="card-header text-center">{{m.Title}}</h4>
<div class="card-body">
<h5>{{m.Year}}</h5>
<img [src]="m.Poster" [alt]="m.Title" class="card-img-top">
</div>
</div>
</div>
The issue I'm facing is with the element <h4 class="card-header text-center">{{m.Title}}</h4>
The challenge is that sometimes the title gets displayed on 2 lines, other times on 1 (but never more than 2) and, so, the cards aren't looking uniform.
What I'm wondering is if there's a Bootstrap / CSS way to always make the card-header display as 2 lines high regardless of the text within it. I've tried setting a CSS style of line-height: 2, but it's not affecting it at all. Any correct / better way to accomplish this?
Thanks!
You can add the custom CSS to do it. check working fiddle below -
.card-header-custom {
min-height:80px;
display:flex;
justify-content:center;
align-items:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header big content Header big content </div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML:
<div>
<h4>
<span>One line heading</span>
</h4>
<h4>
<span>Assume this heading has two lines</span>
</h4>
</div>
CSS:
h4 {
height: 2.5em;
}
h4 span {
line-height: 1.25em;
}
in my case i have to use 5 col-md for one row and another col-md needs to go next row without open row.
i tried with nth:child and its not help for me please help me to fix this issue
Please click full page on snippet to better view
.col-md:nth-child(5){
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">this is next row</div>
<div class="col-md">this is next row</div>
<div class="col-md">this is next row</div>
</div>
</div>
</body>
</html>
You can simply do it by set flex-basis to 20%.
.col-md {
flex: 0 0 20%;
}
The issue is that you are using seven containers. You need six. The next thing, you have to attach the correct class for the last container (100%). Which is col-md-12. You won't need any additional CSS. Everything you need is supported by Bootstrap. Please revisit the Bootstrap documentation on how layouting works!
As an additional information col-md occupies as much space in width as is available (evenly distributed between all elements/containers in a row).
The below example demonstrates how you can do that.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: green" class="col-md-12">
this is next row
</div>
</div>
</div>
</body>
</html>
Update: You can also do it like that without col-md-12.
.col-md:nth-child(5){
flex: 0 0 100%;
}
To stretch the col-md at position 5 to 100%.
You need to allow the wrap then control the flex-basis
.col-md:nth-child(n + 6) {
flex-basis:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row flex-wrap">
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
this is next row
</div>
<div class="col-md">
this is next row
</div>
<div class="col-md">
this is next row
</div>
</div>
</div>
I'm working with Angular (v4.3.1) and Bootstrap (v4.0.0-alpha.6). A template contains two subcomponents like so:
<div class="card-deck">
<comp1></comp1>
<comp2></comp2>
</div>
Both subcomponent's templates have as root element's class the .card Bootstrap class.
<div class="card">
...
</div>
This, once compiled results in the following HTML
<div class="card-deck">
<comp1 _nghost-c3="">
<div _ngcontent-c3="" class="card">
...
</div>
</comp1>
<comp2 _nghost-c4="">
<div _ngcontent-c4="" class="card">
...
</div>
</comp2>
</div>
The problem is that the .card-deck styling doesn't get applyed properly if there is an element wrapping the .card elements.
A Bootstrap only example, the problem is strictly related to Bootstrap css and not Angular obviously.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
Anyone knows a way to get both the components structure and the styling working?
The wrappers are causing trouble because a div doesn't have any flex css properties, While the .card classes are using flex:1 0 0;
Option 1 (preferred): Apply the .card class to the angular host element wrapper, instead of the first child element.
I've not used angular, going by these docs you could set a class on the host element. Using #Component.host.
Or define some rules using angulars custom renderer.
I can't advice you on the best approach, I lack the knowledge on angular.
In the end you would want to end up with <comp1 _nghost-c3="" class="card">
Option 2 (not very sane): Pretend that the wrappers are cards,
and style them like a card would be styled.
I would advice against this.
It can cause troubles in the long run. IE newer bootstrap versions could change the css styling, and you might forget to update these custom rules.
.card-deck > div {
display: flex;
flex: 1 0 0;
flex-direction:column;
}
.card-deck > div:not(:last-child){
margin-right:15px;
}
.card-deck > div:not(:first-child)
{
margin-left:15px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
I have the following code using bootstrap 3:
<div class="row">
<div class="col-lg-12">
<div class="row">
<div id="test1" style="text-align:center; border-style:double; font-size:14px" class="col-lg-6">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double" class="col-lg-6" >
<img style="margin:auto" src="cinq1.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
The size of div test1 is based on the amount of text and fontsize of test1. So the bottom border does not automatically align with div test2. I am able to fix this by changing padding values of test1. But that means each change of text to test1 will require change of padding values as well which is not good stable coding. I thought the grid system of Bootstrap 3 would adjust for this so is there something I'm missing?
There is no default way in Bootstrap 3 (There will be in 4) to make to columns of dynamic data equal height... but you could use jQuery. Here I made your two columns "sm" so they show up side by side here in the snippet, and changed the broken image to some short text:
$(function() {
var leftHeight = $('#test1').height();
var rightHeight = $('#test2').height();
if (leftHeight > rightHeight) {
$('#test2').height(leftHeight);
} else {
$('#test1').height(rightHeight);
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div id="test1" style="text-align:center; border-style:double; font-size:14px" class="col-sm-6">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double" class="col-sm-6">
Less text
</div>
</div>
</div>
</div>
Without javascript you can achieve it--
It's a bootstrap experiment--the official experiment
you just need to add .row-eq-height with row class.
and add the following css.
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="row row-eq-height" >
<div id="test1" style="text-align:center; border-style:double; font-size:14px;" class="col-lg-6 ">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double; " class="col-lg-6 " >
<img style="margin:auto" src="cinq1.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</body>
</html>
Note: it uses flex.
If I use a container. For instance
and then I use position relative. Position relative will mess with the container by moving left and right.Wouldn't this cause render issues for devices when i'm specifying the grids and then moving the content around?
What would be the proper way to move the content without messing up the grids I setup with col-md-#/col-sm-#
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Andy's Bike Shop"}}</span></i>
</div>
</div>
</div><!--Header Container-->
</div>
<div class="bikeSelector">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6"><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
Test
</div>
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS
.products {
position :relative;
left: 500px;
}
Your html is wrong in places for what you're trying to achieve.
Try this (not tested but should get you started)
<div class='row'>
<div class='col-md-offset-3 col-md-6'><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
<div class="products">
{{bike.name}}
</div>
</div>
</div><!--bike controller row-->
Here's a bootply which is a great way to test before you add