Programming for beginners: css

Showing posts with label css. Show all posts

Monday, 24 March 2025

Managing Content Overflow with overflow-x and overflow-y in CSS

The overflow-x and overflow-y properties in CSS are useful for controlling horizontal and vertical overflow of content, respectively, within an element. They define how excess content that doesn’t fit into an element's specified dimensions is handled, which is particularly useful in layouts where content could be dynamic or unpredictable.

Following css properties are used to manage the overflows.

1. overflow-x: Manages the overflow of content horizontally.

2. overflow-y: Manages the overflow of content vertically.

Following are the possible values for overflow.

· visible: The default value. Content overflows the boundary of the element and is fully displayed without any cropping or scrollbars.

· hidden: Content outside the element’s bounds is clipped and not displayed. This is useful for hiding any excess content beyond the boundaries.

· scroll: Always displays a scrollbar (even if it’s not needed) for the specified direction. This is sometimes useful to indicate to users that the area is scrollable.

· auto: Adds a scrollbar only when the content overflows. This is usually the most user-friendly option when you want scrollbars to appear only as needed.

Example 1: overflow-x: hidden; overflow-y: auto;

.container {
    width: 200px;
    height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
}

Here, any content that overflows horizontally will be hidden. If content overflows vertically, a scrollbar will appear to allow scrolling within the element.

Example 2: overflow-x: auto; overflow-y: auto;

.container {
    width: 200px;
    height: 150px;
    overflow-x: auto;
    overflow-y: auto;
}

Both horizontal and vertical scrollbars appear only if needed. This setting is often used to avoid unnecessary scrollbars but still provide access to all content.

When you want the same overflow behavior for both axes, you can use the shorthand overflow property.

.container {
    overflow: auto; /* Applies to both x and y axes */
}

manage-overlfowed-content.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>User Data Table</title>
    <style>
      /* Container to center the table both horizontally and vertically */
      .table-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* Full viewport height */
      }

      .scrollable-table {
        width: 80%; /* Adjust width as needed */
        max-height: 300px; /* Set a fixed height for overflow */
        overflow-y: auto; /* Vertical scroll if content overflows */
        overflow-x: hidden; /* Hide horizontal overflow */
        border: 1px solid #ddd;
      }

      table {
        width: 100%; /* Ensure the table takes full container width */
        border-collapse: collapse;
      }

      th,
      td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
      }

      th {
        background-color: #f2f2f2;
        font-weight: bold;
        position: sticky; /* Keep the header fixed at the top while scrolling */
        top: 0;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="table-container">
      <div class="scrollable-table">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Email</th>
              <th>Gender</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mufinella</td>
              <td>Godleman</td>
              <td>mgodleman0@opera.com</td>
              <td>Female</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Addia</td>
              <td>Jardein</td>
              <td>ajardein1@economist.com</td>
              <td>Genderfluid</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Raleigh</td>
              <td>Twinning</td>
              <td>rtwinning2@artisteer.com</td>
              <td>Male</td>
            </tr>
            <tr>
              <td>4</td>
              <td>Andre</td>
              <td>Oxborrow</td>
              <td>aoxborrow3@epa.gov</td>
              <td>Male</td>
            </tr>
            <tr>
              <td>5</td>
              <td>Flemming</td>
              <td>Izhaky</td>
              <td>fizhaky4@skyrock.com</td>
              <td>Male</td>
            </tr>
            <tr>
              <td>6</td>
              <td>Frederique</td>
              <td>Santacrole</td>
              <td>fsantacrole5@cpanel.net</td>
              <td>Female</td>
            </tr>
            <tr>
              <td>7</td>
              <td>Willis</td>
              <td>Collar</td>
              <td>wcollar6@amazonaws.com</td>
              <td>Male</td>
            </tr>
            <tr>
              <td>8</td>
              <td>Alix</td>
              <td>Bowcher</td>
              <td>abowcher7@cafepress.com</td>
              <td>Male</td>
            </tr>
            <tr>
              <td>9</td>
              <td>Wenda</td>
              <td>Shardlow</td>
              <td>wshardlow8@google.co.uk</td>
              <td>Female</td>
            </tr>
            <tr>
              <td>10</td>
              <td>Rollin</td>
              <td>Cofax</td>
              <td>rcofax9@istockphoto.com</td>
              <td>Male</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

Above snippet is rendered like below.

Just scroll down to observe the behavior.

Note

· The <table> element is not intended to scroll directly because it’s designed to render its content based on available space. Browsers don’t handle scrollbars on <table> elements well since the default layout is for flow-based rendering. Wrapping the table in a div (like .scrollable-table in the example) is the common solution to get reliable scrolling behavior while working with tables.

· It’s recommended to use a container like div with overflow properties to enable smooth scrolling while keeping the table layout intact.

Previous Next Home

How to Simplify Styling With CSS Variables?

CSS variables, also known as custom properties, are a powerful feature in CSS that allows you to define reusable values, making your code cleaner and more maintainable. They can store values like colors, fonts, or even complex values like gradients, which can then be used throughout your stylesheet.

How To Define CSS Variables?

CSS variables are defined using the -- prefix and can be declared globally in the :root selector or scoped to specific elements.

Example

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

In CSS, :root is a pseudo-class that represents the top-level element in the document, typically the <html> element. It allows you to define global CSS variables that can be accessed throughout the entire document. By defining variables in :root, we can ensure that they are available everywhere, making it convenient to manage styles across multiple components or sections.

In this example, Here, --primary-color and --font-size are CSS variables defined globally, so we can use them anywhere in your CSS with var(--primary-color) and var(--font-size).

How to refer the variables?

You can refer the variables using var keyword.

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

color: var(--primary-color);

This sets the text color of the <body> element to the value of the --primary-color CSS variable, which was defined as #3498db in :root. So, any text within the <body> will display in the color #3498db (a shade of blue).

font-size: var(--font-size);

This sets the font size of text in the <body> to the value of the --font-size variable, defined as 16px in :root. This means all text in the <body> will have a base font size of 16px, unless otherwise overridden by other styles.

css-variables.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Variables</title>
    <style>
      :root {
        --primary-color: #3498db;
        --font-size: 16px;
        --font-family: Arial, sans-serif;
        --background-color: #f0f0f0;
      }

      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 90vh;

        background-color: var(--background-color);
        font-family: var(--font-family);
        color: var(--primary-color);
      }
    </style>
  </head>
  <body>
    <h1>Interactive Elements Example</h1>
  </body>
</html>

Above snippet is rendered like below.

Previous Next Home

marginLeft: "auto" in FlexBox

In CSS, setting margin-left: auto is a common technique for positioning elements within a flexbox container. Here's what it does:

What marginLeft: "auto" Does:

· Automatically Adjusts the Left Margin: Setting margin-left: auto tells the browser to use as much space as possible for the left margin. This pushes the element to the right side of its flex container.

· Pushes the Element to the Right: When used in a flex container, margin-left: auto will move the element to the rightmost position by taking up all available space on the left.

When to Use marginLeft: "auto"

· Aligning Elements to the Right in a Flex Container: In a flexbox layout, if you want to push an item to the far right, applying margin-left: auto will achieve that effect.

· Centering or Spacing Elements: In combination with other properties, it can help space elements evenly or center items within a container.

Using Flexbox to Push an Element to the Right

If you have a flex container and want to move the IconButton to the right:

<div style={{ display: "flex" }}>
  <div>Left Item</div>
  <IconButton
    onClick={() => setDrawer(true)}
    sx={{
      marginLeft: "auto" // Pushes this button to the far right
    }}
  >
    <MenuIcon />
  </IconButton>
</div>

In this example:

· The div with display: "flex" sets up a flexbox container.

· marginLeft: "auto" on the IconButton pushes it to the far right by taking up all the remaining space on the left.

Why It Works

In a flexbox layout, margins set to auto will absorb any available space. When you apply margin-left: auto, it effectively pushes the element to the right by using all the remaining space on the left side.

This technique is widely used in layouts to align items or create spacing in a flexible manner.

Previous Next Home

Sunday, 23 March 2025

Understanding cursor: pointer; in CSS to enhance User Interaction

The cursor property in CSS controls the type of cursor that appears when the user hovers over an element. By setting cursor: pointer;, you can change the default cursor (usually an arrow) to a hand icon, which visually indicates to users that the element can be clicked. This is commonly used for buttons, links, and any other interactive elements on a webpage.

cursor-pointer.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cursor Pointer Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 90vh;
        background-color: #f0f0f0;
      }

      /* Button Styles */
      .btn {
        background-color: #6164bc;
        color: white;
        border: none;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 15px;
      }

      .btnWithCursor {
        cursor: pointer; /* Changes cursor to pointer */
      }
    </style>
  </head>
  <body>
    <h1>Interactive Elements Example</h1>
    <button class="btnWithCursor btn">Cursor styled</button>
    <button class="btn">Regular One</button>
  </body>
</html>

Open the above page in browser you will see below screen.

Hover the mouse on ‘Cursor styled’ button, you can see hand icon symbol there.

Previous Next Home

Understanding the Behavior of CSS Width and Max-Width When Parent Element is Smaller

The width and max-width properties in CSS control the sizing behavior of elements.

width Property

The width property sets the width of an element. It defines the exact width the element will take up.

Suppose if you specify width: 300px for an element, it will still take up 300px of space, even if the parent element's width is only 200px. This can cause the child element to overflow its parent, resulting in the content extending outside the parent's boundaries.

How to Handle This Situation?

We can control the size of the child element relative to its parent by using a percentage-based width, such as width: 50%;. This approach ensures that the child element will always be sized proportionally to the parent's width, preventing overflow.

max-width property

The max-width property sets the maximum width that an element can take. max-width is more suitable for responsive designs, ensuring elements don't exceed certain sizes while still adapting to smaller screens.

Example

.container {
    width: 100%;       /* Element tries to fill the entire parent width */
    max-width: 300px;  /* But it won't grow beyond 300 pixels */
}

In this example, element take up the full width of the parent, but do not exceed maximum of 300 pixels.

· If the parent is smaller than 300px, the child will shrink to fit the parent's width.

· If the parent is larger than 300px, the child will take up 300px.

width-vs-max-width.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Width Vs Max-Width Example</title>
    <style>
      body {
        font-family: Arial, sans-serif; /* Clean, modern font */
        background-color: #f5f5f5; /* Light gray background */
        color: #333; /* Dark text color for contrast */
        margin: 0; /* Reset default margins */
        padding: 20px; /* Padding around the content */
      }

      /* Parent 1: 200px width */
      #div1 {
        width: 200px; /* Parent width is 200px */
        height: 200px; /* Fixed height */
        background-color: #4caf50; /* Green background */
        display: flex; /* Flexbox for centering */
        align-items: center; /* Center vertically */
        justify-content: center; /* Center horizontally */
        margin: 20px 0; /* Margin for spacing */
        border-radius: 10px; /* Rounded corners */
      }

      /* Parent 2: 500px width */
      #div2 {
        width: 500px; /* Parent width is 500px */
        height: 200px; /* Fixed height */
        background-color: #2196f3; /* Blue background */
        display: flex; /* Flexbox for centering */
        align-items: center; /* Center vertically */
        justify-content: center; /* Center horizontally */
        margin: 20px 0; /* Margin for spacing */
        border-radius: 10px; /* Rounded corners */
      }

      /* Child element */
      .child {
        width: 100%; /* Full width of parent */
        max-height: 100px; /* Max height is 50% of parent height (200px) */
        max-width: 250px; /* Child will not exceed 250px */
        background-color: #ff5722; /* Orange background for child */
        padding: 10px; /* Padding inside the child */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow effect */
        border-radius: 5px; /* Rounded corners */
        display: flex; /* Flexbox for centering text */
        align-items: center; /* Center vertically */
        justify-content: center; /* Center horizontally */
      }

      .child-more-width-than-parent {
        width: 800px; /* Child width exceeds parent width */
        background-color: #ff5722; /* Orange background for child */
        max-height: 100px; /* Max height is 50% of parent height (200px) */
      }

      .child-overflow {
        min-width: 800px; /* Child min-width exceeds parent width */
        background-color: #ff5722; /* Orange background for child */
        max-height: 100px; /* Max height is 50% of parent height (200px) */
      }
    </style>
  </head>

  <body>
    <h1>Understanding Width and Max-Width</h1>

    <p>
      In this example, the parent container has a width of <code>200px</code>.
      The child element is set to take up <code>100%</code> of the parent's
      width, with a maximum width of <code>250px</code>. Therefore, the child
      will fill the full width of the parent.
    </p>
    <div id="div1">
      <div class="child">Child Element</div>
    </div>

    <p>
      Here, the parent container has a width of <code>500px</code>. The child
      element is again set to take <code>100%</code> of the parent's width but
      will not exceed <code>250px</code>. Thus, the child will take up to
      <code>250px</code> in width.
    </p>
    <div id="div2">
      <div class="child">Child Element</div>
    </div>

    <p>
      In this scenario, the parent has a width of <code>200px</code>, but the
      child element is explicitly set to a width of <code>800px</code>. Since
      this width exceeds that of the parent, it will stick to the parent's
      boundaries unless managed by CSS.
    </p>
    <div id="div1">
      <div class="child-more-width-than-parent">Child Element</div>
    </div>

    <p>
      Lastly, the parent maintains a width of <code>200px</code>, while the
      child has a <code>min-width</code> of <code>800px</code>. This ensures
      that the child cannot shrink below <code>800px</code>, resulting in
      overflow from the parent container.
    </p>
    <div id="div1">
      <div class="child-overflow">Child Element</div>
    </div>
  </body>
</html>

Output

Note

1. A child element will not visually overflow beyond the boundaries of its parent container in the context of CSS layout. Instead, if a child element is set to a width greater than that of its parent, it will still fit within the parent's dimensions due to CSS’s handling of overflow.

2. If a child element has a min-width that exceeds the width of its parent, it can cause overflow, regardless of the parent’s width constraints.

Previous Next Home