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>
Related
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%
I would like that the calendar to appear outside the .row div but div must have both scrolls bar.
If div have overflow popierty cut off calendar.
I tried set widgetParent to body, but then position of calendar is wrong. Not near input.
<div class="container">
<div class="row" style="border: 1px solid #000; width: 150px; height: 200px; overflow: scroll;">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' style="width: 40px;" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
example
$(function() {
$('#datetimepicker1').datetimepicker();
// $('#datetimepicker1').datetimepicker({widgetParent: 'body'});
});
.row {
position: relative;
border: 1px solid #000;
width: 150px;
height: 200px;
overflow: show;
}
.row #datetimepicker1 {
position: absolute;
z-index: 10001;
top: 20px;
right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Try not to write inline css , instead you can give class and then write css in that class.
Is this the same that you are looking for?
Hope this helps.
Change your .row's overflow to 'show.'
So:
<div class="row" style="border: 1px solid #000; width: 150px; height: 200px; overflow: show;">
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%;
}
:
give me the suggestion to add upload button in image using html5 and css and 1.7
for below java 1.6 image i need to add upload button in the corner of that (+) image..
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/stylejava.css">
</head>
<body>
<h1>Welcome to Java</h1>
<div class="imagewrap">
<button type="submit" class="button" value="Button">
<img src="../images/symbol1.png" alt="Submit"
style="width: 50px; height: 50px">
</button>
<img src="../images/java166.jpg" alt="Mountain View"
style="width: 200px; height: 200px">
</div>
<div class="imagewrap">
<button type="submit" class="button1" value="Button 1">
<img src="../images/symbol.png" alt="Submit"
style="width: 50px; height: 50px">
</button>
<img src="../images/java177.jpg" alt="Mountain Viewm"
style="width: 200px; height: 200px">
</div>
</body>
</html>
this is my html5 code
You can use label tag to implement what you want.
Here is an example: http://jsfiddle.net/tvtespeq/
HTML:
<input type="file" id="img-upload">
<label id="img-label" for="img-upload"></label>
CSS:
#img-label {
width: 100px;
height: 100px;
display: block;
background: url("http://placehold.it/100x100");
cursor: pointer;
}
#img-upload {
display: none;
}