Elements within a div will appear smaller when the position property is set to fixed

I have a <div> and I want to position it with position: fixed. However, when I add the CSS rule position: fixed, the <div> shrinks.

https://i.sstatic.net/1Lh7I.jpg

https://i.sstatic.net/ljJ8o.jpg

Can someone please provide me with guidance on this issue?

This is my HTML code:

<div layout="row" style="background-color:#1CA5EA; position:fixed">

    <div offset="25" flex="30" class="input-container">
       <md-input-container flex >
          <label style="color:white">Search</label>
          <input ng-model="search" style="border-bottom:2px solid white;color:white;">
       </md-input-container>
    </div>

    <div flex="10" class="input-container">
       <button class="primary-button md-button md-default-theme">
         <span class="ng-scope" ui-sref="company.addRecruitmentProject">
           + JOB AD
         </span>
       </button>
    </div>

 </div>
htmlcss

Answer №1

To ensure the div is fully responsive, apply width:100%; to it.

<div layout="row" style="background-color:#1CA5EA; position:fixed; width:100%;">

    <div offset="25" flex="30" class="input-container">
       <md-input-container flex >
          <label style="color:white">Search</label>
          <input ng-model="search" style="border-bottom:2px solid white;color:white;">
       </md-input-container>
    </div>

    <div flex="10" class="input-container">
       <button class="primary-button md-button md-default-theme">
         <span class="ng-scope" ui-sref="company.addRecruitmentProject">
           + JOB AD
         </span>
       </button>
    </div>

 </div>

Check out the demo here

Answer №2

There could be another HTML element causing interference with the shrinking of your div. Additionally, please share your CSS code so that I can help identify and fix the issue for you.

Answer №3

If that happens, make sure to specify the width of your <div> element with a fixed position. For instance:

.box {
   width: 80%; // Feel free to set any desired size
}

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

Coloring a table in vue.js based on performance rankings

I'm facing an issue with sorting my data performance in vue js. Here is the script I have created so far: <template> <div> <div class="row"> <h2> Campaign Performance </h2> <table class=&q ...

javascripthtmlvue.js

Issue with CSS causing dropdown to open underneath modal

I am facing an issue with my bootstrap modal that contains multiple dropdowns. To accommodate the content, I have set overflow: auto to enable a scroll bar on the right side of the modal. The problem arises when I click on a dropdown - it opens under the ...

htmltwitter-bootstrapcssbootstrap-modal

User's information will only be updated once the page is refreshed

I am encountering an issue with displaying two ul elements based on user login status. When I log in, the first ul is shown immediately, but the second ul is only displayed after a page refresh. Initially, the value in "accountService.currentUser" is null ...

htmlangulartypescript

Utilizing a server for seamless communication between a mobile device and a website

Exploring a simple setup idea here: Imagine having a mobile app with a page that contains 4 lines of content (utilizing phonegap for development). The plan is to have a web page where data for those 4 lines can be inputted. Once the information is submitt ...

javascriptphphtmlajax

"I am looking to use JavaScript to transform Latitude and Longitude coordinates into a UK postcode. How can

I'm currently working on a project that involves utilizing HTML5 geolocation. Getting the latitude and longitude of a user through geolocation seems to be fairly straightforward. However, my challenge lies in converting this data into a UK postcode ...

javascripthtmlgeolocation

Error in THREE.js: The function material.onBeforeRender is not defined

Can someone assist me with an error I'm encountering while trying to run my code in Three.js? The error message reads as follows: three.js:19528 Uncaught TypeError: material.onBeforeRender is not a function at renderObject (three.js:19528) at ...

javascripthtmlthree.js

What is the best way to hide certain buttons from specific users in Angular using the If condition?

I am facing an issue with my array of blocked_users, where I need to hide certain buttons if a user is in the blocked_users list. Below is the code snippet from my angualr.component.html: <div *ngIf="!(userId in event.blocked_users)"> ...

htmlangular

React: Struggling to Get Margins Right for Navigation Bar Spacing

I recently tried my hand at following a tutorial for building a React app: React JS Tutorial for Beginners #1 – Build a website using React, Sass, Gulp and Node.js After completing the tutorial, everything seemed to be working smoothly except for one th ...

htmlcssreactjssassreact-router

Transferring information via Segments in Ionic 3

I'm facing a challenge where I need to transfer a single ion-card from the "drafts" segment to the "sent" segment by simply clicking a button. However, I am unsure of how to achieve this task seamlessly. Check out this image for reference. ...

htmltypescriptionic-frameworkionic2ionic3

Using unicode characters to style your Angular application

Hey there! I have an Angular 5 app on StackBlitz that implements table sorting. You can check it out here: https://stackblitz.com/edit/angular-rxdzom. The code for this app is based on the example from . In the app, I've used a stylesheet at ./app/sor ...

cssangular

Alter the arrow to dynamically point towards the location of the click source

I am currently working on creating a popover dialog that should point to the element triggering its appearance. The goal is for the arrow to align with the middle of the button when clicked. While I am familiar with using CSS to create pointing arrows, th ...

javascriptjqueryhtmlcss

The top of the page does not align with the HTML body even when the margin is set to 0

I am facing an issue with my Ruby on Rails app where the body content is not displaying at the top of the page. Here is a screenshot of the problem: I have double-checked all the properties and everything seems to be set correctly. If you want to take a l ...

htmlcsstwitter-bootstrap

Troubleshooting issues with dropdown functionality in HTML when using Bootstrap

I'm encountering an issue with my dropdown menu not functioning properly when using bootstrap. The dropdown only appears on screens smaller than the $md variable. The problem arises when I try to click on the dropdown icon and it does not respond as ...

javascripthtmlbootstrap-4dropdown

What is the best way to include a class with Knockout JS?

After going through the basic Knockout tutorial and examining various examples, I decided to try it out myself on jsFiddle. However, I encountered some issues as my attempts did not quite work. The goal is simple - I just want to add the class open to a d ...

javascripthtmlknockout.js

I've noticed that my alert is not appearing when I click submit. Can someone please help me figure out what I could

I am having trouble getting my alert to display when the form is not validating. It should show an alert message if the form is valid but it's not working as expected. I've spent hours trying to fix this issue with no luck. I appreciate any help ...

javascripthtmlformsfunctionvalidation

Utilizing WebElement.findElements() in Selenium to refine search outcomes

After iterating through a list of WebElements, which I refer to as 'graphs', and finding descendants within each graph, I am encountering an issue where similar descendants from different graphs are being included in the results. Currently, I am ...

cssselenium

Reflection mask feature in Chrome for Android that uses Webkit technology

Chrome Reflection on Desktop Computers By using Chrome on a desktop computer, I am able to create an image reflection with the following CSS code: img { -webkit-box-reflect: below 0 -webkit-gradient( linear, left top, left bottom, from(tran ...

androidcssgoogle-chrome

"Problem encountered when using Window.print() in Chrome on an iPad while displaying in a pop-up window created using

My code works perfectly in all browsers and operating systems, except for iPad Chrome. Can anyone help me troubleshoot this issue? <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...

javascripthtml

The CSS background design is experiencing issues in IE9

Check out this code snippet I have for customizing the background of a webpage: body { font-family: "HelveticaNeue", Helvetica, Arial, sans-serif; font-size: 12px; background: -webkit-radial-gradient(50% 20%, circle farthest-side, transparent ...

cssinternet-explorerbackground

Update the content of a class by hovering over it

Looking to update the content of all elements with the class knopf_leer. While using IDs like document.getElementById("id").innerHTML = "replacement" has worked for me in the past, I am surprised that it is not working with classes. function replaceText ...

javascripthtml