[BOOTSTRAP] Recalculer la hauteur de panel-body en fonction de la taille de l’écran, et prendre en compte le fixed nav header.

css3_logo_and_wordmark.svg

Introduction

Pour que le panel-body du panel bootstrap soit toujours de la taille de l’écran .

Un problème insupportable qui doit être réglé une bonne fois pour toute à l’avance pour toute nouvelle app.

Photo :

exemploe.png

Comment faire :

Calculer à la volée et soustraire la hauteur du nav header + la hauteur du panel-footer + la hauteur du panel-header :
Ajouter ceci à style.css :

.panel-body {
	height: calc(100vh - 220px);
}

 

 

Publicités

[AngularJs] Colorer les champs en erreur

angularjs-300x300

Introduction


Solution rapide :

Lorsque l’on a un formulaire angularjs avec du css bootstrap, on peut colorer les champs en erreur, en laissant html5 opérer.

Comment faire


Une solution vraiment rapide en CSS avec un formulaire initialisé ainsi :

<form name="$root.myForm" id="form_id"  >
	<div class="input-group">
		<span class="input-group-addon stdgp"></i> Prénom</span>
		<input  ng-model="footballeur[0].prenom" type="text " class="form-control"  placeholder="Exemple : Roland"  required></input>
	</div>
</form>

Et un bouton submit ressemblant à ça :

<button  type="submit" form="form_id" ng-disabled="$root.myForm.$invalid  && !$root.myForm.$invalid.date"  ng-click="insertFootballer()" class="btn btn-default "  alt="Remplissez tous les champs"> 

On mets un CSS comme ceci dans style.css :


.ng-invalid{
border:1px solid #f00;
background:yellow;
}

 

Résultat : En temps réel, le champs se colore ou pas si il est manquant (required)

color.jpg

#f00

[CSS] Aligner des onglets .

Introduction :

Les onglets s’affichent mal avec le responsive:


onglets.png

 

Solution


Ajouter

display: inline-block;

dans la classe bootstrap

.nav-tabs

 

https://stackoverflow.com/questions/33690783/bootstrap-tabs-overflow-issue

[Css] Un fixed table header en CSS qui fonctionne

Introduction :

On veut voir le header qui reste lorsqu’on scrolle une table .
Lien : https://stackoverflow.com/questions/23712497/angularjs-ng-table-fixed-headers

FONCTIONNE TROP BIEN !!!

Code :

this CSS-only solution worked for me. Just add the class table-scroll to the table element and the following CSS:

.table-scroll thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.table-scroll tbody {
    max-height: 150px;
    overflow-y: auto;
    display: block;
    width: 100%;
    table-layout: fixed;
}

.table-scroll tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.table-scroll td {
    height: 47px; // needed in order to keep rows from collapsing
}

NOTE : Mettre ensuite class= »col-md-1″ sur chaque colonne pour que ça corresponde !

[Bootstrap 3 ] Un magnifique Template vraiment responsive, avec une sidebar et un barre des tâches .

createiveL’agence Creative TIM

Introduction


Je m’étais égaré ces derniers temps en ne faisant pas assez attention au responsive, ainsi qu’au look de mes apps.

J’ai trouvé un Theme vraiment responsive cette fois ci, avec un look vraiment vraiment sympa par contre c’est pas du bootstrap 4.0.

C’est l’agence CREATIVE TIM qui a des templates vraiment monstrueux en Bootstrap, Matérial et des Widgets !!

J’utiliserais cette base désormais en permanence pour mes futures apps, qui comporte une sidebar qui se contracte parfaitement (togle),et une barre haute.

Lorsque l’on rapetisse l’écran, les panels se contractent parfaitement. j’ai déjà commencé à rajouter et tester des boutons et panels, et je vais rajouter un agenda , et des graphiques qu’on peux changer à la main, et des sliders et des maps, pour bien tester le tout une bonne fois pour toute et que ça passe sur téléphone 5pouces . j’ai testé hier sur un SAMSUNG GALAXY, c’est IMPECCABLE !! Incroyable ! Le template est 100 % parfait sur écran 22 pouces ET sur un téléphone 5 pouces sans rien faire !

Je n’utiliserais plus Material que je ne trouve pas aussi facile que Bootstrap (Voir rdvjuristes ou je galère). Par contre l’agence CREATIVE TIM à un super template Material CSS !

Photo du template


template.jpg

Le lien du template :


http://nicolash.org/db/dashboard.html

[Css Exo 54] Fullpage.js

Introduction


Le canevas de base pour créer de simples sites scrollables.

Ou trouver ?


Taper Fullpage.js dans Google.

Un exemple ?


 

Cliquer ici

Code :


 


<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="bower_components/fullpage.js/dist/jquery.fullpage.css" />
	<script src="bower_components/jquery/dist/jquery.min.js"></script>

	<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
	<!-- <script src="vendors/jquery.easings.min.js"></script>
	 -->
	<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
	<!-- <script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script> -->
	<script type="text/javascript" src="bower_components/fullpage.js/dist/jquery.fullpage.min.js"></script>
	<link rel="stylesheet" type="text/css" href="example3.css?v=3" />
	<script src="jquery.easings.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#fullpage').fullpage({
				sectionsColor: ['#fdeadc', '#f9c8ac', '#fdeadc', 'whitesmoke', '#f9c8ac'],
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
				menu: '#menu',
				css3: true,
				scrollingSpeed: 500
			});

			$('#showExamples').click(function(e){
				e.stopPropagation();
				e.preventDefault();
				$('#examplesList').toggle();
			});

			$('html').click(function(){
				$('#examplesList').hide();
			});
		});
	</script>
</head>


<body>

<ul id="menu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">Première section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Deuxième Section</a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage">Troisième section</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">4ème</a></li>
</ul>


<div id="fullpage">

    <div class="section active" id="section0">
        <h1>fullPage.js</h1>
        <h2>Create Beautiful Fullscreen Scrolling Websites</h2>
       

    </div>
    <div class="section" id="section1">
        <div class="slide active">
            <div class="intro">
                <h1>Create Sliders</h1>
                <p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
              
            </div>

        </div>
        <div class="slide">
            <div class="intro">
                
                <h1>Simple</h1>
                <p>Easy to use. Configurable and customizable.</p>
            </div>
        </div>
        <div class="slide">
            <div class="intro">
                
                <h1>Cool</h1>
                <p>It just looks cool. Impress everybody with a simple and modern web design!</p>
            </div>
        </div>
        <div class="slide">
            <div class="intro">
               
                <h1>Compatible</h1>
                <p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
            </div>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="intro">
            <h1>Easy to use plugin</h1>
            <p>HTML markup example to define 4 sections.</p>
           
        </div>
    </div>
    <div class="section" id="section3">
        <div class="intro">
            <h1>Working On Tablets</h1>
            <p>
                Designed to fit to different screen sizes as well as tablet and mobile devices.
                <br /><br /><br /><br /><br /><br />
            </p>
        </div>
      
    </div>
</div>

<div id="infoMenu">
    <ul>
        <li><a href="https://goo.gl/HuFudq">Wordpress theme</a></li>
        <li><a href="https://github.com/alvarotrigo/fullPage.js/archive/master.zip">Download</a></li>
        <li>
            <a href="#" id="showExamples">Examples</a>
            <div id="examplesList">
                <div class="column">
                    <h3>Navigation</h3>
                    <ul>
                    <li><a href="examples/scrollBar.html">Scroll Bar Enabled</a></li>
                    <li><a href="examples/normalScroll.html">Normal scrolling</a></li>
                    <li><a href="examples/continuous.html">Continuous vertical</a></li>
                    <li><a href="examples/noAnchor.html">Without anchor links (same URL)</a></li>
                    <li><a href="examples/navigationV.html">Vertical navigation dots</a></li>
                    <li><a href="examples/navigationH.html">Horizontal navigation dots</a></li>
                    </ul>
                </div>
                <div class="column">
                    <h3>Design</h3>
                    <ul>
                        <li><a href="examples/responsive.html">Responsive</a></li>
                        <li><a href="examples/backgrounds.html">Full backgrounds</a></li>
                        <li><a href="examples/videoBackground.html">Full background videos</a></li>
                        <li><a href="examples/autoHeight.html">Auto-height sections</a></li>
                        <li><a href="examples/gradientBackgrounds.html">Gradient backgrounds</a></li>
                        <li><a href="examples/scrolling.html">Scrolling inside sections and slides</a></li>
                        <li><a href="examples/fixedHeaders.html">Adding fixed header and footer</a></li>
                        <li><a href="examples/oneSection.html">One single section</a></li>
                    </ul>
                </div>
                <div class="column">
                    <h3>Other</h3>
                    <ul>
                        <li><a href="examples/apple.html">Animations on scrolling</a></li>
                        <li><a href="examples/callbacks.html">Callbacks</a></li>
                        <li><a href="examples/methods.html">Functions and methods</a></li>
                    </ul>
                </div>
            </div>

        </li>
        <li><a href="https://github.com/alvarotrigo/fullPage.js#fullpagejs">Documentation</a></li>
        <li><a href="http://alvarotrigo.com/#contact-page">Contact</a></li>
    </ul>
</div>
</body>






	

[Css] Utiliser un templates Css d’Administration moderne et responsive pour créer une application(Partie 2 AngularJs).

IntroductionWB0P6NR1N


Finalement, suite au premier article, j’ai trouvé le meilleur template pour mon cas, je pense, avec sb admin 2.

C’est un pure template open source fait en ANGULARJS, avec du routing de vues, du lazy loading, des directives, mais très bien fait et structuré.

Pleins d’atouts : Le lazy loading de librairies Angular qui fait qu’on charge une grosse librairie annexe, seulement lors du click sur une vue qui impose cela dans le router. Si je clique sur le menu »Graphiques », alors la librairie Charts.JS est chargée. De ,ce fait, tout le site est plus rapide.

Les css sont hyper bien fait, et décris. Ca passe hyper bien sur mobile( Revérifié aujourd’hui, oui c’est le top sur un 5 pouces !).

Dorénavant, je créerais tous mes exercices la dessus,le look est trop bon.

 Description sommaire


Faut l’installer carrément avec NPM, qui installe ensuite les libs via BOWER, au final le tout pèse 8MO librairies annexes comprises.

Ensuite, on a un index.html classique, des vues, des directives et des controllers. Pour les css, il ne faut jamais créer les siens, mais toujours utiliser au maximum les css du template, il faut donc repérer leurs noms dans class= »laClasseDuCss » dans une vue HTML.

Dans le fichier scripts/app.js, on retrouve le routing avec le lazy loading des libriaires et chaque controleur dédié par vue, c’est simple une fois qu’on a compris.

La partie légèrement plus compliquée est les directives, mais une fois qu’on a compris, on peut y injecter des variables et aussi des fonctions personnalisées, qui peuvent se répéter à l’infini. Les directives sont comme un mini-template HTML que l’on peut répéter à loisir dans le HTML, entre des balises personnalisées.

Le testing :


Pour tester le template déja modifié sur mon serveur, cliquer sur ce lien.

Une autre version plus simple :

Quelqu’un a réalisé une version plus à tester :
https://github.com/rcaferraz/startbootstrap-sb-admin-2/tree/angularmod