Hey guys so I have a bootstrap site and I've built a fairly basic header file that looks like this:
<head>
<style>
nav a{
color: white
}
nav {background-color: #1c71b9; }
.navbar-toggle{border: 3px solid white;}
.icon-bar{background-color: white;}
.navbar-brand:hover{background-color: white;
color: #1c71b9;
}
body{margin-top: 50px;}
h1, h2, h3, h4, h5, h6, p{
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.row + .row{margin-top: 20px;}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="vue.js"></script>
</head>
<header>
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Site</a>
</div><!--end .navbar-header-->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Subscriptions</li>
<li>Templates</li>
<li>Stock</li>
<li>Login</li>
<li>Signup</li>
</ul>
</div><!--end #navbar-->
</div><!--end container-->
</nav>
<div class="container">
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!--modal header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h2 class="modal-title">Login</h2>
</div>
<!--modal body-->
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="username">Username/Email</label>
<input type="text" class="form-control" placeholder="Username/Email" id="username" name="username">
Forgot Username
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
Forgot Password
</div>
</form>
</div>
<!--modal footer-->
<div class="modal-footer">
<button class="btn btn-primary btn-block">Login</button>
</div>
</div>
</div>
</div>
</div>
</header>
I included this header file into my index.php document and am trying to make a video that spans 100% of the browser in width and have a max-height of 800px but its not working no matter what I do the video has white space on the sides without spanning all of the width. Any help here would be great! I basically want the video to always be centered and responsive. Similar to the img-responsive class does. Heres a copy of the index file
<?php require_once('header.php');?>
<style>
.videoContainer {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 800px;
overflow: hidden;
margin-top: 50px;
}
.videoContainer video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
max-height: 800px;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div align="center" class="videoContainer">
<video src="Balloon.mp4" autoplay="true" loop="true"></video>
</div>
</body><?php require_once('header.php');?>
<style>
.videoContainer {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 800px;
overflow: hidden;
margin-top: 50px;
}
.videoContainer video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
max-height: 800px;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div align="center" class="videoContainer">
<video src="Balloon.mp4" autoplay="true" loop="true"></video>
</div>
</body>
if you are using bootstrap wrap video inside a container-fluid. This spans the entire width of the viewport (view documentation). You can try something like this:
<div class="container-fluid">
<video src="Balloon.mp4" autoplay="true" loop="true"></video>
</div>
then in your css:
div video {
height: 800 px;
}
If you want you video to cover full width of you div do not set height for the video, videos will always keep its aspect ratio, so if you set height the width will also reduce according to that. so the best way would be set height for the div wrapping the video the let the video to expand 100%
Related
so im doing a front end challenge and basically i gotta do this and half way through images to move the images but i cant seem to make the cut/overlap
```
:root {
--clr-bggrad-violet: hsl(273, 75%, 66%);
--clr-bggrad-blue: hsl(240, 73%, 65%);
--clr-text-dark: hsl(238, 29%, 16%);
--clr-text-red: hsl(14, 88%, 65%);
--clr-divider: hsl(240, 5%, 91%);
--ff-kumbh: 'Kumbh Sans', sans-serif;
}
/* "*" helps the code to be vieweble on all broswers */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
font-family: var(--ff-kumbh);
font-weight: 400;
font-size: 0.8rem;
color: var(--clr-text-dark);
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
background: linear-gradient(var(--clr-bggrad-violet), var(--clr-bggrad-blue));
}
main {
position: relative;
background: url(images/bg-pattern-mobile.svg) no-repeat top center;
background-color: white;
display: flex;
flex-flow: column nowrap;
align-items: center;
border-radius: 1rem;
padding: 1rem;
width: 100%;
margin-bottom: 1rem;
box-shadow: 0 10px 40px -15px var(--clr-text-dark);
}
.title {
padding: 1rem;
margin: 1rem;
font-weight: 700;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
height: auto;
display: block;
}
.hero-images {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
align-items: center;
margin-bottom: 7rem;
}
.hero {
position: absolute;
top: -7rem;
width: min(80%, 255px);
}
.box {
display: none;
}
#media (min-width: 900px) {
main {
width: 870px;
display: grid;
grid-template-columns: 50% 50%;
background-image: unset;
background-color: white;
padding: 0;
}
.hero-images {
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
background-image: url(images/illustration-woman-online-desktop.svg),
url(images/bg-pattern-desktop.svg);
background-repeat: no-repeat;
background-size: 90%, 120%;
background-position: -4.8rem 5rem, -12rem -2rem;
margin: unset;
}
.box {
width: 150px;
position: absolute;
display: unset;
top: 12rem;
left: -5.5rem;
z-index: 1;
}
.hero {
display: none;
}
}
```
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | FAQ Accordion Card</title>
</head>
<body>
<main>
<picture class="box">
<img src="images/illustration-box-desktop.svg" alt="TheBox" aria-hidden="true" />
</picture>
<section class="hero-images">
<picture class="hero">
<source media="(max-width: 900px)" srcset="images/illustration-woman-online-mobile.svg"
alt="you see this first" />
<img src="images/illustration-woman-online-desktop.svg" alt="ShrinkUseeThis" aria-hidden="true" />
</picture>
</section>
<section>
<h1 class="title">FAQ</h1>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
How many team members can I invite?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
You can invite up to 2 additional users on the Free plan. There is
no limit on team members for the Premium plan.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
What is the maximum file upload size?<img src="images/icon-arrow-down.svg" alt="IconArrow"
aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
No more than 2GB. All files in your account must fit your allotted
storage space.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
How do I reset my password?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Click “Forgot password” from the login page or “Change password”
from your profile page. A reset link will be emailed to you.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Can I cancel my subscription?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Yes! Send us a message and we’ll process your request no questions
asked.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Do you provide additional support?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Chat and email support is available 24/7. Phone lines are open
during normal business hours.
</div>
</div>
</div>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button"
aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2"
aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse"
aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both
elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is
hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is
hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js"
integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk"
crossorigin="anonymous"></script>
</body>
</html>
```
i have tried to use krita and just crop and upload the images as one but it loses resolution(it looks pixelated).i have been thinking using the bodyBG and make that a png but the white box is there in the middle.
edit2: so the images were in .svg couldnt uploaded to imgur so i have to change it to .png i think i might have scramble the snippet cuz the images are everywhere sorry it is my first time doing this XD. also i tried the left: -15%;width: 50%;height: auto; and nothing happen
this is what i see on my computer:
compu
edit3: so i found out about content-visibility CSS and i am trying to see that instead of a cut i will try to make the image half invisible
edit4: so it was "picture" HTML i found a guy that use it on the challenge i cant find him anymore and i still dont understand how is making the cut butt it works sooooo whatever thx anyway
I've created a profile picture structure in Bootstrap.
I want ask how can I add an hover effect which allows the apparition of a plus symbol, like = + , which indicates to the user that they can add a new image or something like it.
Thanks.
#import url( 'https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="form-group text-center" data-type="admins operators secretaries customers">
<div class="profile-image-container">
<div class="profile-header-img">
<img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
<!-- badge -->
<div data-content="">
<span class="label label-primary rank-label" style="font-size: 13px;">
<label id="total-points">0</label>Points </span>
</div>
</div>
EDIT: gave parent div .profile-header-img the img's width and height to set :hover on it and prevent flickering:
.profile-header-img {
width: 120px;
height: 120px;
margin: 0 auto;
}
.glyphicon.glyphicon-plus-sign {
display: none;
color: white;
position: absolute;
z-index: 1;
left: 50%;
top: 44px;
transform: translate(-50%, 0);
font-size: 32px;
}
.profile-header-img:hover .glyphicon.glyphicon-plus-sign {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group text-center" data-type="admins operators secretaries customers">
<div class="profile-image-container">
<div class="profile-header-img">
<img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
<span class="glyphicon glyphicon-plus-sign"></span>
<!-- badge -->
<div data-content="">
<span class="label label-primary rank-label" style="font-size: 13px;">
<label id="total-points">0</label>Points
</span>
</div>
</div>
</div>
</div>
I have a modal with a close button on the bottom. It seems like it is moving up and down depending on how long the comment section right on top. I'm trying to fix the position of it on the bottom no matter how long the comment section is. So I used relative, but I would appreciate it if you guys have better idea to fix this. Thanks.
View:
<div class="form-horizontal">
<div class="modal-title title">
<p>#ViewBag.name<span> Info</span></p>
</div>
<div id="info">
<p>#Html.Label("Name: ") #ViewBag.name</p>
<p>#Html.Label("Age: ") #ViewBag.age</p>
<p>#Html.Label("Comment: ") #ViewBag.comment</p>
</div>
<div id="close">
<div class="col-md-12">
<input type="button" id="closeButton" value="Close" class="btn btn-default" />
</div>
</div>
</div>
CSS:
.btn {
border: 2px solid transparent;
background: white;
color: black;
font-size: 16px;
line-height: 15px;
padding: 10px 0;
display: block;
width: 150px;
margin: 0 auto;
}
.title {
position: relative;
top: 20px;
}
.title p {
text-align: center;
font-size: 30px;
}
.title span {
color: black;
}
#info {
position: relative;
top: 50px;
left: 20px;
}
#info p {
font-size: 15px !important;
width: 310px;
}
#close {
position: relative;
top: 70px;
}
Just gave fixed height to the modal body so that body can be scrolled with out changing the button position
enter code h
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" style="height:200px; overflow-y:scroll;">
<p>#Html.Label("Name: ") #ViewBag.name</p>
<p>#Html.Label("Age: ") #ViewBag.age</p>
<p>#Html.Label("Comment: ") #ViewBag.comment</p>
</div>
<div class="modal-footer">
<input type="button" id="closeButton" value="Close" class="btn btn-default" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ere
Just add position: fixed and sink it to the bottom if thats what you want.
#close {
position: fixed;
bottom: 0px;
left: 50%;
}
so I am trying to make a cool portfolio landing page with Bootstrap.
The template includes a fixed navbar and a sticky footer. The rest of the page is whtespace that I want to fill with basically a giant background so I put a test paragraph element to try and see how to size it. I figured I could just add CSS rules that made body's height 100% but when I do that I get an overflow and my footer isn't at the bottom of the page anymore. Instead I have a small overflow of the background at the bottom.
How can I fix this? I made the background color bright yellow to try and show what I mean. Any help is appreciated!
Here's the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Work in Progress</title>
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Portfolio</a>
</div>
<div id="navbar" class="navbar-collapse collapse"
aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true"
aria-expanded="false">Projects
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Rails Projects</li>
<li>LAMP Projects</li>
</ul>
</ul>
</div>
</div>
</nav>
<div class="main">
<div class="container">
<p>Test text</p>
</div>
</div>
<!--footer-->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Contact info or whatever goes here.</p>
</div>
<div class="col-md-4 col-md-offset-4">
<p>More info or whatever goes here.</p>
</div>
</div>
</div>
</footer>
</body>
</html>
And here's the CSS
html, body{
height: 100%
}
.main{
height: 100%;
background-color: #FFFF00;
margin-top: 50px;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #000;
color: #9d9d9d;
}
You can use this CSS (position: relative on body and .main height as calc function (100% minus height of the footer):
html,
body {
height: 100%;
position: relative;
}
.main {
height: calc(100% - 60px);
background-color: #FFFF00;
padding-top: 50px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #000;
color: #9d9d9d;
}
Demo: https://fiddle.jshell.net/uvaef49h/1/
You want to use the following CSS:
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.main{
height: calc(100% - 110px);
background-color: #FFFF00;
margin-top: 50px;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #000;
color: #9d9d9d;
overflow: hidden;
}
Why did it not work before?
The body had a height of X, main occupied 100% of that. However main was pushed down by the 50px margin. After the .main part, you had your footer which was completely pushed out from the view-port so I had to remove another 60px from .mains height. The footer still had an overflow issue so I hid that.
Lastly, the browser wanted to add some random margin/padding so I Removed that as well.
I'm trying to expand md-textfield on full width of outer-table element. However, it is not expanding correctly when I set width: 100%, the part of it goes belong the right side of a screen, and it's size has some problems. I'm not giving outer-table exact width, since it should change depending on the device. Could somebody please give me a hint on what I'm doing wrong, here's what I've done at the moment.
.outer-table {
width: 100%
}
.table-header {
position: relative;
left: 9px;
bottom: 3px;
width: 100%;
}
.table-header div.mdl-textfield {
position: absolute;
right: 10px;
z-index: 9999;
width: auto;
}
.full-width {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>mdl textarea</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
</head>
<body>
<div class="outer-table">
<div class="table-header">
<div class="mdl-textfield mdl-js-textfield full-width">
<label class="mdl-button mdl-js-button mdl-button--icon" for="expando1">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder full-width">
<input class="mdl-textfield__input full-width" type="text" id="expando1">
<label class="mdl-textfield__label" for="expando1">Expandable text field</label>
</div>
</div>
</div>
</div>
</body>
</html>
Updated after Brian's answer
I want label element to stick on the right side, and on click expand to the left.
Change this css:
.table-header div.mdl-textfield {
position: absolute;
right: 10px;
z-index: 9999;
width: auto;
}
To this css:
.table-header div.mdl-textfield {
position: absolute;
right: 10px;
z-index: 9999;
width: 100%;
}
you just interchange location of the <label> and the <div></div>
<div class="table-header">
<div class="mdl-textfield mdl-js-textfield full-width">
<div class="mdl-textfield__expandable-holder full-width">
<input class="mdl-textfield__input full-width" type="text" id="expando1">
<label class="mdl-textfield__label" for="expando1">Expandable text field</label>
</div>
<label class="mdl-button mdl-js-button mdl-button--icon" for="expando1">
<i class="material-icons">search</i>
</label>
</div>
</div>