Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To adjust the gap size, use grid-column-gap, grid-row-gap or grid-gap property in CSS.grid-column-gap propertySet gap between Grid columns with CSS. You can try to run the following code to implement the grid-column-gap property.ExampleLive Demo .container { display: grid; background-color: green; grid-template-columns: auto auto; padding: 20px; grid-column-gap: 20px; } .ele { ... Read More
To make it work, download the bxslider plugin from the official website. Get an images folder from the downloaded bxslider zip and you need to paste it into js folder of your project.All the folders will now look like − The above should solve your problem.
To solve this problem, follow the below-given steps −For android versions less than 4.4, loading data into a webview with a file scheme as a directory like this won’t work.browser.loadDataWithBaseUrl("file:///android_asset/", html, "text/html", "UTF-8", null);Add a filename and it works on older Android versions −browser.loadDataWithBaseUrl("file:///android_asset/new.html", htmlContent, "text/html", "UTF-8", null);You can use the following too, in case your URL is http://www.demo.com −browser.loadDataWithBaseURL("http://www.demo.com", htmlContent, "text/html", "utf-8", null);
The following are the flex-item propertiesorderflex-growflex-shrinkflex-basisflexalign-selfLet us see an example of flex-basis propertySet the length of a flex item with the flex-basis CSS property. You can try to run the following code to implement the flex-basis propertyExampleLive Demo .mycontainer { display: flex; background-color: orange; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9
SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.ExampleLet us see an example of SVG − #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } SVG HTML5 SVG Circle To center it, add the CSS like the following −# svgelem { margin-left:auto; margin-right:auto; display:block; }
Internet Explorer 11 does not support the element. Add support using Modernizr of the following JS −document.createElement('main');Adding the above element, will not give you the element for the browser, therefore, you need to use the following CSS finally −main { display:block; }
Translate the image dimensions to 32, 120 −context.translate(32, 120);Now rotate the canvas −context.rotate(90 * Math.PI/180);Now draw the image −context.drawImage(img, -32, -120, 64, 120);
Retrieve the mouse coordinates in the click event. Now, retrieve the element by hiding your overlay, and use the following. After that, redisplay the overlay −document.elementFromPoint(x, y)You can also use the following CSS −div { pointer-events:none; }
Define a flex container and set the flex items in it.You can try to run the following code to learn how to implement Flexbox elements. Q1, Q2, Q3 here are the flex-items. The entire area is Flexbox elementExampleLive Demo .mycontainer { display: flex; background-color: orange; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5 Q6
To disable zooming capabilities in responsive design, you need to create a META viewport tag.With that, set the user-scalable property to 'no' like −user-scalable=noAdd the following in your HTML code to disable zooming capabilities in responsive design −