Material Design Lite - Adding a Search Bar to the Navigation Header

While loading this page from here, you may notice that the right side does not match the left. I am seeking guidance on how to fix this issue.

I would like the padding on the right to mirror that of the left side.

        <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">IPET</span></span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
                <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp">
                    <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" />
                </div>

        <button id="demo-menu-lower-right"
                class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
          <i class="material-icons">chat</i>
        </button>
        <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right"
            for="demo-menu-lower-right">
          <li class="mdl-menu__item">Some Action</li>
          <li class="mdl-menu__item">Another Action</li>
          <li disabled class="mdl-menu__item">Disabled Action</li>
          <li class="mdl-menu__item">Yet Another Action</li>
        </ul>
            </div>

        </div>

    </header>
cssmaterial-design-lite

Answer №1

It seems like the solution is to simply adjust the styling for the .mdl-layout__header-row element. Here's how you can do it:

.mdl-layout__header-row {
  padding: 0 80px 0 80px;
}

You can customize the padding as necessary. I made an error in my initial response by setting the left and right padding values the same, so I have corrected that now. You can view the updated Codepen here:

https://codepen.io/thecox/pen/ezdveV

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to ensure that an inner div always stretches to the full width of the browser window regardless of its parent's width configurations and size?

Can an inner div always be made to have the width of the full browser window regardless of its parent's width settings and dimensions? Additionally, can this div be positioned at the left side of the page with a CSS property of left: 0, relative to th ...

htmlcss

Is it possible for a nested div to override the hover effect of its parent?

Is it possible for a nested div to override the hover effects of its parent? Here's an example: .Box { width: 50px; height: 50px; background: red; } .Circle { width: 20px; height: 20px; background: blue; border-radius: 20px; } .Bo ...

htmlcss

Is there a way to give only the left corners of a button a rounded look?

Here is the visual representation of the button: https://i.stack.imgur.com/Bjlkp.png ...

htmlcss

Enhance the dropdown menu by incorporating a caret icon

Click here for the image, I am trying to incorporate the Bootstrap caret class into my select dropdown menu. .select_menu{ font-size: 12px; outline: none; border: thin #ddd solid; -webkit-appearance: none; -moz-appearance: none; appearance: ...

htmlcsstwitter-bootstrap

Help! The CSS height property is not working properly and I'm not sure how to resolve

I'm facing an issue with the height property of a specific div and I can't seem to fix it. SCSS: .security{ border: 3px #1D3176 solid; display: flex; h2{ position: ...

htmlcss

"The CSS animation effect for underlining text does not seem to be

I'm trying to create a CSS animation using the transform property. Specifically, I want to have an underline animation when a link is hovered over. Strangely, the code that works in another HTML file is not working here. Although the links change colo ...

htmlcsstransform

Creating an HTML table on-the-fly leads to the opening of a fresh new webpage

Has anyone encountered this issue before? I have a math table coding function, which runs when a button is clicked. However, when I click the button, the table appears on a new page instead of on the same page. <!doctype html> <html> <h ...

javascripthtmlcssloopsfor-loop

A guide on personalizing HTML for Django forms

I have implemented an HTML template on my website and need to capture information for my Django backend. Specifically, I am trying to extract the email address from this section of code: <input type="text" placeholder="Email" value="" style="height: 30 ...

javascriptjqueryhtmlcssdjango

Prevent line breaks caused by the span tag in Bootstrap 5

I have been attempting to use white-space:nowrap; to prevent the span tag in this text from causing a line break, but so far I have not been successful. The class styles used here are all standard Bootstrap 5 CSS class styles. On wider screens, the time i ...

cssbootstrap-5

What causes the device pixel ratio to vary across different web pages on the same device and operating system?

I am curious about why device pixel ratio varies between different websites and operating systems. For instance, when using the same device, this site displays a different pixel ratio on Windows compared to Ubuntu. On Windows, the pixel ratio is 1.34 whi ...

csswebsassresponsive-designdevicepixelratio

Parse and style particular text within a DIV element

A unique text inside a div: Welcome to the world of coding. This is where creativity meets logic. Lines of code come together beautifully. Creating amazing projects is our goal. Mission: I aim to develop a script that will: Turn all instances of " ...

jquerycsshtml

Troubleshoot: Why is the Chrome Extension content script failing to prepend to the body

Currently, I am developing a content script for a Google Chrome browser extension that inserts a horizontal bar at the top of any webpage visited by the user. The issue arises when visiting google.com as Google's navigation bar covers my bar. Here is ...

jquerycssgoogle-chrome-extension

The z-index property does not seem to apply to pseudo elements

I am facing an issue while trying to add a pseudo element after a div in my react project. Surprisingly, the code works perfectly fine in CodePen but fails to work on my local machine. I have applied z-index only in CodePen, which seems to resolve the issu ...

htmlcssz-index

The div element displays a vertical scrollbar exclusively

Can you explain why the div is only displaying a vertical scrollbar? Although the canvas is larger than the div in both dimensions: div { padding-top: 2px; height: 709px; width: 889px; overflow: auto; } <div> <canvas width="1405" sty ...

htmlcsscanvas

The child elements are stacking vertically despite implementing inline-block

I have a container with 100% width. I am trying to position three divs inside it next to each other, all with the same height as the parent. Unfortunately, despite setting the display property to inline-block, they are not aligning properly and appear sta ...

htmlcsstwitter-bootstrapbootstrap-4

Using CSS to style the last element in a set of dynamic content

I am currently working on targeting the last element in a dynamically generated content set. For instance, here is an example of how the generated content appears: <div class="block"> <div class="block-inner"> <div class="box"> ...

csscss-selectors

Halt the execution of a function upon clicking a div element

I'm currently working on a function that needs to be stopped when a div with the class "ego" is clicked. This function toggles the visibility of the header based on the scroll position and should only run by default. Below is the code snippet: $("#e ...

javascriptjqueryhtmlcss

Conflicting styles between Bootstrap and Formstack are causing radio buttons to appear only partially visible

Encountering a conflict between Bootstrap (4.1.3) and Formstack CSS when trying to embed a form in a website. The radio buttons are not fully visible, with the issue located in the "label" class ("fsOptionLabel"). Adjusting the line height provides a parti ...

cssbootstrap-4formstack

Ensure the central alignment of the focused item within the horizontal scroll

I have successfully implemented a horizontal scroll container using <HTML/> and CSS: body { background-color: #212121; } .scroll_container { height: 100px; width: 400px; display: flex; align-items: center; overflow-y: hidden; width: 1 ...

javascripthtmlcssuiscrollviewuislider

css: positioning images with overlap in a responsive layout

Two divs have been created with background images, both displaying the same image but in different colors - one grey and the other green. These images are waveforms. Initially, only the grey image (div1) is visible while the green image (div2) remains hid ...

javascripthtmlcss