HTML & CSS: All about

How to align text full left and right?

h1 {
  display: flex;
  justify-content: space-between;
}

<h1>
  <span>Align me left</span>
  <a href="">align me right</a>
</h1>

How to align item to right?

marginLeft: 'auto'

How to create a box with border?

    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    border: 1px solid red;

How to create a div tag editable and focused?

• This is the prop to make div editable

<div contentEditable="true">...</div>

• Whole codes

import { useEffect, useRef, useState } from 'react'

require('./index.scss')

const Note = () => {
  const [isEditable, setEditable] = useState(false)
  const contentDiv = useRef(null)

  useEffect(() => {
    if (isEditable) {
      const refContentDiv = contentDiv.current
      refContentDiv.focus()
    }
  }, [isEditable])

  function onEditNote() {
    setEditable(true)
  }

  function onSaveNote() {
    setEditable(false)
  }

  return (
    <>
      <div
        ref={contentDiv}
        contentEditable={isEditable}
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od
        tempor incidi dunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation
      </div>
    </>
  )
}

export default Note

How to embed watermark in HTML?

Use the following css class

.watermark {
  background-image: url('URGENT.png');
  <!--background-repeat: no-repeat;
	background-attachment: fixed;-->
  background-size: cover;
  background-size: 10%;
}

Error: The watermark css is not printed in Chrome

Add the following setting into css

@media all
{
* {-webkit-print-color-adjust:exact;}
.watermark {
  background-image: url('URGENT.png');
  <!--background-repeat: no-repeat;
		background-attachment: fixed;-->
  background-size: cover;
  background-size: 10%;
}

Table: All about

How to freeze rows of a table by JavaScript?

Embed “jquery.fixedtableheader.min.js”

[js]


[/js]

Usage

[js]
$(document).ready(function () {
$(‘.tableClassname’).fixedtableheader({ highlightrow: true, headerrowsize: 2 });
});
[/js]

How to horizontally freeze a table?

Customize above “jquery.fixedtableheader.min.js” library

How to use Google fonts offline?

Change “<link href=”https://fonts.googleapis.com/css?family=Lato” rel=”stylesheet”>”
to “<link href=”~/css/google_fonts.css” rel=”stylesheet”>”

• Access “https://fonts.googleapis.com/css?family=Lato”
• Copy this content as a “google_fonts.css” file
• Download font files “Lato-latin.woff2” from url of the css file

  [css]https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2[/css]

• Change url in the css file so that it points to the font files
  From

   

  [css]https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2[/css]

  To (example)

  [css]../fonts/Lato-latin.woff2[/css]