Press enter to see results or esc to cancel.

Abraham Garcia Abraham Garcia in HTML/CSS Scripts   Saturday, March 21 2020

How to Change Select2 Box Height

Change Select2 JS Box Height with Simple CSS Snippets

This is a short code snippet on how to change the select2 box height plugin. Simple CSS code. .select2-selection__rendered { line-height: 31px !important; } .select2-container .select2-selection--single { height: 35px !important; }

Continue reading
Abraham Garcia Abraham Garcia in HTML/CSS Scripts   Thursday, March 5 2020

Bootstrap 4 How to Align Nav Bar Items to the Right

Simple Bootstrap 4 Align Right Snippet. Float your navigation to the right on bootstrap nav element.

This is a code snippet showing you how to align the nav items on bootstrap 4 to the right.  <div id="app" class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler

Continue reading
Abraham Garcia Abraham Garcia in HTML/CSS Scripts   Thursday, February 27 2020

Nice Radio Button Toggles

A Sweet codepen toggle that can be used in your projects.

This is a nice codepen radio button i found that i used in one of my projects and i think it is nice to share.  HTML <form class="form"> <h2>Is this awesome?</h2> <div class="switch-field"> <input type="radio"

Continue reading
Abraham Garcia Abraham Garcia in HTML/CSS Scripts   Thursday, February 13 2020

How to Disable an href HTML CSS

Disable an href when you do not want it to be clicked.

How to disable href for a link.  <style> .disabled { pointer-events: none; cursor: default; } </style> <a href="somelink.html" class="disabled">Some link</a> You can also use

Continue reading
Abraham Garcia Abraham Garcia in HTML/CSS Scripts   Monday, December 2 2019

How to Setup Full Background Image on Framework7 Cordova

Full Background Image for Framework7 with Cordova.

This is a short snippet of CSS on how to put a full screen background image on your Framework7 Cordova App.  .page { font-family: "centabel"; background: url("../img/fondo.jpg") no-repeat center center fixed !important;

Continue reading
Abraham Garcia Abraham Garcia in HTML/CSS Scripts   Thursday, July 18 2019

How to Center the Google Recaptcha

A short code snippet to center google recaptcha on center of the screen.

A short snippet on how to center Recaptcha. This is a small snippet in order for you to center the recaptcha box in the center of the screen.  <style> /* already defined in bootstrap4 */ .text-xs-center { text-align:

Continue reading
Abraham Garcia Abraham Garcia in HTML/CSS Scripts   Thursday, May 30 2019

How to do Vertical Align Column in Bootstrap

Fastest method to align columns vertically on Boostrap 3. I spent hours finding a good solution for this and finally found it.

This is a Short CSS Snippet that will help you align columns vertically in the middle for whenever needed.  CSS .vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align >

Continue reading
Abraham Garcia Abraham Garcia in HTML/CSS Scripts   Wednesday, December 19 2018

Disable Manual Input in datepicker jQuery

Learn how to disable the manual entry on the jquery datepicker. Simple and Easy.

This short snippet will allow you to disable manual input for the jQuey Datepicker.  <input type="text" name="datepicker" id="datepicker" readonly="readonly" /> Just add a simple readonly and you should be good to go :)

Continue reading
Abraham Garcia Abraham Garcia in HTML/CSS Scripts   Wednesday, September 19 2018

How to Change Address Header Color in Newest Chrome Version

Meta Tag Required to change Address Header Color in Android Chrome

This is the meta tag that you need to insert to change the color header on the address bar in Chrome for Android.  <meta name="theme-color" content="#999999" />

Continue reading
Abraham Garcia Abraham Garcia in HTML/CSS Scripts   Wednesday, April 25 2018

YouTube iFrame Full Width of Page Keep Aspect Ratio

A Short tutorial on how to make your youtube video preserve the height and keep aspect ratio.

A Short tutorial on how to make your youtube video preserve the height and keep aspect ratio.  HTML   <div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="560" height="349"

Continue reading