I have the mobile design of three blocks:
_
|A|
|_|
|B|
|_|
|C|
|_|
I want to achive the following responsive md design with bootstrap5 grid system.
___
|B|A|
| |_|
| |C|
|_|_|
I've tried different approaches, 3 rows, rows in rows, ordering etc. but I can't figure out the responsive solution, without redundancy.
Here you go...
#a,
#b-desktop,
#b-mobile,
#c {
border: 1px solid red;
font-size: 50px;
font-weight: 700;
}
.container-fluid>.row {
height: 100vh;
}
#b-desktop {
height: 100%;
}
#b-mobile {
height: 50vh;
}
#a {
height: 50vh;
}
#c {
height: 50vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 d-md-block d-none" id="b-desktop">B</div>
<div class="col-md-6">
<div class="row">
<div class="col-12" id="a">A</div>
<div class="col-12 d-md-none d-block" id="b-mobile">B</div>
<div class="col-12" id="c">C</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
This is my HTML code :
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/jsonCntrl.js"></script>
</head>
<body ng-controller="myCntrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Items List</h1>
</ion-header-bar>
<ion-content>
<ion-list >
<ion-item ng-repeat="item in myData">
{{ item.Name }}
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
This is my Controller Code :
angular.module('starter', []).controller('myCntrl', function($scope,$http) {
$http.get("http://www.w3schools.com/angular/customers.php").then(function(response){
$scope.myData = response.data.records;
});
});
I am not getting a list view instead something like this
List response Link
But when i use the same code to populate data from an array its working fine.
Try this:
angular.module('starter', []).controller('myCntrl', function($scope,$http) {
$http
.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.myData = angular.fromJson(response.data.records);
});
});
Use the same code you have and check the styles of .item class in ionic.css file with the line of 5646 else override that class with below style
border-color: #ddd;
background-color: #fff;
color: #444;
position: relative;
z-index: 2;
display: block;
margin: -1px;
padding: 16px;
border-width: 1px;
border-style: solid;
font-size: 16px;
Here i created for simple form with validation, my requirement is i dont want html5 popup message but i need focus for particular valid field, how to do ?
Thanks for ur help in advanced .............................................
'use strict';
var app = angular.module('telstraApp', []);
app.directive('accessibleForm', function () {
return {
restrict: 'A',
link: function (scope, elem) {
// set up event handler on the form element
elem.on('submit', function () {
// find the first invalid element
var firstInvalid = elem[0].querySelector('.ng-invalid');
// if we find one, set focus
if (firstInvalid) {
firstInvalid.focus();
}
});
}
};
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TelsApp</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!--<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css">
<script data-require="angular.js#~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-sanitize.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini" data-ng-app="telstraApp">
<div class="wrapper">
<div class="row" style=" position: relative; top: 0; height: 55px !important;z-index:9999;">
</div>
<!--<div id="header" ng-include="'layout/header/header.html'" ></div> -->
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar" style=" height: 100%; top: 10px; height:0px; padding-top: 60px;">
</aside>
<div class="content-wrapper" style=" margin-top: -29px; margin-bottom: 10px; height: 350px; overflow-y: auto; ">
<!-- Main content -->
<form>
<input type="text" ng-required="true">
<input type="text" ng-required="false">
<input type="text" ng-required="true">
<input type="submit">
</form>
<!-- /.content -->
</div>
</div>
<!-- /.content-wrapper -->
<!-- /.Footer -->
<!-- /.Footer -->
<script data-require="jquery#1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
<style>
.appBanner{
position:fixed; left:0; top: 0px; width: 1440px; border:2px; background-color:#6185BA;height: 46px;color: #000; font-family: 'Helvetica Neue', Arial, sans-serif;font-size: 12px;
}
</style>
In order to hide html5 validation messages, you have to specify novalidate on your form like this:
<form name='xyz' novalidate>
//your form
</form>
Read more about it here: disable html5 validations
You will have to specify autofocus on the input on which you want focus.
have a look at this fiddle where focus is on email input. focus with novolidate
I would like to add some animations to my angularjs applications, and surfing on dribble I found this example:
Can someone point me to the right direction for achieving this effect ? Are there some libs doing the work or is it entirely artisanal ?
Notice the 2 animations, the one from the front yellow button expanding to the full area, and the back area sliding/fading away
I am giving you an example, you can change the effects to meet your needs!
var app = angular.module('myApp', ['ngAnimate', 'fmp-card']);
app.controller('MainCtrl', function($scope) {
$scope.leftBackText = 'Here you can insert anything you want, may be a page!';
$scope.rightBackText = "http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69";
});
.my-card{
display: inline-block;
}
.back-text{
padding-top: 60px;
padding-left: 10px;
padding-right: 10px;
}
#container{
width: 100%;
}
#card-1{
float: left;
}
#card-2{
float: left;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Flip Card</title>
<link href="style.css" rel="stylesheet" />
<link href="https://rawgit.com/souly1/angular-flip-card/master/css/fmpCardDirective.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.6/angular.min.js" data-semver="1.3.6"></script>
<script data-require="angular-animate#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular-animate.min.js"></script>
<script src="https://rawgit.com/souly1/angular-flip-card/master/fmpCardDirective.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="container">
<fmp-card class="my-card" id="card-1" suffix="left" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Left Card" small-card-width="200px" small-card-height="200px">
<div class="back-text"><img src={{rightBackText}} /></div>
</fmp-card>
<fmp-card class="my-card" id="card-2" suffix="right" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Right Card" small-card-width="200px" small-card-height="200px">
<div class="back-text">{{leftBackText}}</div>
</fmp-card>
</div>
</body>
</html>
could you please tell me how to make button of same size (or same height).Actually I have four buttons and a toggle button in one row I need their height should same as shown in image .I need to decrease height of toggle button .can we make same like that as show in image
here is my code
.margin_button_bar{
margin-left: -0.5em!important;
padding:0.5em!important;
}
.button_tab{
position: relative;
}
.toggle_button{
position: absolute!important; right: 0px!important;
display: inline;
border: none;
background: transparent;
paddig:0.5em!important;
}
can we reduce toggle button height ?
you can change the height of the toggle track (the part the toggle slides along) by chaning the .toggle .track {} class and you can change the handle (the part that moves) in the .toggle .handle {} class: or in your ion toggle you can just apply toggle-small as a class so it looks like <ion-toggle class="toggle-small">
see this play ground and play with the css http://play.ionic.io/app/46f56cb9e30d
code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
</ion-content>
</ion-pane>
</body>
</html>
CSS:
/* Styles here */
.toggle .track {
height: 20px;
}
.toggle .handle {
height: 20px;
}
JS:
angular.module('app', ['ionic']);
I've done a number of responsive builds over recent months and thought that the base style sheet I use might be worth sharing! It's very simple but very effective. I've used a couple of Javascript libraries to fix common bugs but reference to these in in the comments.
HTML Doc
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="" />
<!-- http://modernizr.com -->
<script src="scripts/modernizr.min.js"></script>
<link rel="stylesheet" href="css/base.css" />
</head>
<body>
<header id="header" class="env clearfix"><p>Header Content</p></header>
<div id="body-content" class="env clearfix">
<p>Body Content</p>
<p class="mobile-only">Hello Mobile Users</p>
</div>
<footer id="footer" class="env clearfix"><p>Footer Content</p></footer>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ -->
<script src="scripts/MobileBoilerplate.js"></script>
<script type="text/javascript">
MBP.scaleFix();
</script>
<!-- https://github.com/scottjehl/Respond -->
<script src="scripts/respond.min.js"></script>
Base.css
body{ }
#header{ background-color:red; }
#footer{background-color:green;}
p{padding:25px;}
.env { position:relative; max-width:1000px; padding:0; margin:0 auto; width:100%; }
.mobile-only{display:none;}
#media only screen and (min-width: 1000px)
{
.env { max-width: 1400px; }
p{padding:50px;}
}
#media only screen and (min-width: 701px) and (max-width: 850px)
{
body{font-size:0.9em;}
.env { max-width: 850px; }
p{padding:20px;}
}
#media only screen and (min-width: 701px)
{
.mobile-only{display:none !important;}
}
#media only screen and (max-width: 700px) {
.env { max-width: 700px; min-width:300px;}
body{font-size:0.9em;}
.hide-in-mobile{display:none;}
.mobile-only{display:block;}
p{padding:10px;}
}
#media only screen and (min-width: 450px) and (max-width: 700px)
{
p{padding:15px;}
}
#media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
#logo{ background:url(/images/logo#2x.png) no-repeat; background-size: 84px 140px; }
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom:1;clear: both; }