I have modal which is shown after some seconds of page load.
The content of modal is the facebook page
Visit here to see the modal. (Wait for 3-4 secs)
I want that modal to be auto zoomed, as per screen
My Modal CSS:-
<style type="text/css">
.fb_self{
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
padding: 5px;
}
.fbhide{
display:none;
}
.fbshow{
position: fixed;
color: #000000;
background-color: #ffffff;
/* To align popup window at the center of screen*/
top: 75;
left: 50%;
margin-left: -170px;
}
</style>
My Modal HTML:
<div id="fbmy_div" class="fbhide">
<div class="fbmy_div">
<div class="fb_self">
<div class="fb-page" data-href="https://www.facebook.com/baidtransports/" data-tabs="timeline,messages" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" >
<blockquote cite="https://www.facebook.com/baidtransports/" class="fb-xfbml-parse-ignore">
Baid Transport Company
</blockquote></div>
</br></br><center>
<span class="btn btn-primary btn-xl page-scroll" onclick="fbfunccl()">Close</span></center>.
</div></div></div>
I want that Facebook modal to be auto zoomed and fit the screen.
Related
I am facing issue to bring the overlay panel on top of icon using HTML/CSS. I have two components as Component A and Component B.
Component A: It's header and breadcrumb design. In header section I have the down arrow, which will open overlay panel and allow the user to logout.
Component B: It's a home component, I have some graph view, in that component I have used the search icon to allow the user to search/add/edit graphs. The search icon is placed on top of the right side of breadcrumb div and bottom of overlay panel section using margin-top CSS property.
Now, the problem is for breadcrumb div i have given the z-index: 0;
In component B icon div i have given the z-index: 1001. If I am giving the z-index in less than 1001 the search icons are not visible.
In overlay panel, if i am giving z-index: 3 and component B icon div z-index: 2, it's not displaying the component B icons in the right side of breadcrumb div.
Component A:
Overlay Panel:
HTML:
<div class="layout-topbar-menu-wrapper">
<ul class="topbar-menu fadeInDown">
<a>
<button type="button">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</a>
<ul class="fadeInDown">
<li role="menuitem">
<a>
<span class="textColor"><i class="material-icons textColor">exit_to_app</i>Logout</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
CSS:
.layout-wrapper .layout-main .layout-topbar .layout-topbar-menu-wrapper .topbar-menu>li.active-topmenuitem>ul {
display: block;
background-color: #f5f5f5;
z-index: 3 !important;
}
.layout-wrapper .layout-main .layout-topbar .layout-topbar-menu-wrapper .topbar-menu>li>ul {
position: absolute;
top: 26px;
right: -26.9px;
display: none;
width: 180px;
background-color: #ffffff;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
animation-duration: .5s;
list-style-type: none;
margin: 0;
padding: 8px 0;
/* border-top: 4px solid #607D8B; */
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.fadeInDown {
-webkit-animation: fadeInDown 5s;
animation: fadeInDown 5s;
}
BreadCrumb Div CSS:
HTML:
<div class="ui-grid-col">
<div class="layout-breadcrumb" (click)="app.onSidebarClick($event)">
<ul>
<li>
<span class="hyperLinkWithPointerCursorDocument">
<i class="fa fa-home"></i>
</span>
</li>
</ul>
</div>
</div>
CSS:
body .layout-breadcrumb {
background-color: #F4F4F4 !important;
border-bottom: 2px solid #f2f2f2;
position: fixed;
z-index: 1;
height: 35px;
width: 100% !important;
margin-left: 9.5em;
margin-top: -2.5em;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
Component B:
Search icon Div CSS:
HTML:
<div>
<span *ngIf="!isEditWidget">
<a class="hyperLinkWithPointerCursorDocument">
<i class="graphSearchIcon"></i>
</a>
</span>
</div>
CSS:
body .graphSearchIcon {
top: 1.8em;
margin-right: -2em;
z-index: 2;
position: fixed;
font-size: 25px !important;
float: right;
right: 2em;
border-radius: 25px;
width: 1.5em !important;
height: 1.5em !important;
padding: 4.2px;
padding-left: 5px;
padding-top: 6px;
color: #9d9d9d !important;
}
Can anyone help me to handle this using HTML/CSS.
Hello guys i need to do that for the UI of my game.
I need to go from this :
To this (its an editing with paint.net of the previous picture) :
<html>
<body>
<div id="hud">
<div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> <img src="https://i.imgur.com/7jElAfE.png"/> 0 </div>
<div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> <img src="https://i.imgur.com/7jElAfE.png"/> 100 500 000000 </div>
<div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> LSPD - Cadet de la police trop cool </div>
</div>
</body>
</html>
img {
vertical-align: middle;
}
#hud {
position: absolute;
font-family: 'Pricedown';
font-size: 25px;
color: #fff;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
text-align: center;
top: 35px;
right: 5px;
}
Help appreciated thanks.
use flexbox with margin-left: auto; and don't style your elements on the tags like that, it's considered bad practice and you're honestly just making it harder on yourself in the long run.
HTML:
<html>
<body>
<div id="hud">
<div> <img src="https://i.imgur.com/7jElAfE.png"/> 0
</div>
<div> <img src="https://i.imgur.com/7jElAfE.png"/> 100 500 000000
</div>
<div> LSPD - Cadet de la police trop cool
</div>
</div>
</body>
</html>
CSS:
img {
vertical-align: middle;
}
#hud {
position: absolute;
font-family: 'Pricedown';
font-size: 25px;
color: #fff;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
top: 35px;
right: 5px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#hud > div{
background-color:red;
border: 2px solid #000;
border-radius: 3px;
background-color: rgba(200, 200, 200, 0.40);
margin: 2px 10px;
margin-left: auto;
}
CodePen
You need to wrap every inner div inside another one and make all inner divs as display: inline-block;
Check here
<html>
<body>
<div id="hud">
<div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> <img src="https://i.imgur.com/7jElAfE.png"/> 0 </div></div>
<div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> <img src="https://i.imgur.com/7jElAfE.png"/> 100 500 000000 </div></div>
<div><div style="border: 2px solid #000; border-radius: 3px; background-color: rgba(200, 200, 200, 0.40);"> LSPD - Cadet de la police trop cool </div></div>
</div>
</body>
</html>
CSS:
#hud div div {
display: inline-block;
}
Of course to organize code better, set up CSS classes for inner divs and create proper CSS for them.
I need to do an inline form with calendar in both fields. for some reason i can't get rid of the extra space between the text and the borders of the input... here is a picture of the problem
I've tried to set width to the parent div and the input itself.... but no good..
Here is what I've done so far. Fiddle:
<div class="modify_search">
<div class="search_wrapper">
<div class="search_header">
<form class="form-inline">
<div class="left">
<span>DU</span>
<div class="input-group">
<input type="text" class="form-control search_input" id="inlineFormInputGroup">
<div class="input-group-addon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="right">
<span>DU</span>
<div class="input-group">
<input type="text" class="form-control search_input" id="inlineFormInputGroup">
<div class="input-group-addon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Here is the css :
.search_input {
border: none;
outline: none;
font-size: 24px;
box-shadow: none;
}
.search_input:focus {
box-shadow: none;
}
.modify_search {
overflow: hidden;
position: absolute;
background-color: white;
width: 60vw;
height: 37vh;
left: 50%;
bottom: 5%;
transform: translate(-50%, 0%);
border-radius: 10px;
-webkit-box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75);
}
.left,
.right {
margin-right: 15px;
border-bottom: 1px solid grey;
}
.left {
float: left;
}
.right {
float: right;
}
.search_header {
padding: 15px 15px 0px 15px;
}
.input-group-addon {
background-color: white;
border: none;
}
As you're using bootstrap you have to apply the witdh to the input-group if you have another input-group with diferent width, just add a id to parent div and filter css class with that id
#less-width .input-group{
width: 180px !important;
}
http://jsfiddle.net/duj0s5ev/8/
Or you can add it to a bootstrap column that fills the desired width
http://jsfiddle.net/duj0s5ev/11/
I am trying to make my textbox and button look responsive and stays inline-block even when I use mobilephone.I want the width of the text boxes to expand based on the browser to use more of the screen.
My html look like this:
<div id="wrapper">
<li class="input-button">
<div style="float:left;">
<input type="text" id="KUNDE" placeholder="Search by name or ID." value="" size="60"/>
<div id="loader" style="display:none;"><img src="loader.gif" /></div>
</div>
<div style="float:left;margin-left:10px;">
<button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
</div>
</li>
</div>
and css part look like this:
body{
background: #f5fffa;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
}
#wrapper {
max-width: 940px;
margin:0 auto;
padding:0;
}
.input-button
{
margin:20px auto;
display:inline-block;
}
#KUNDE{
padding: 10px 5px;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
padding:5px;
border: 1px solid #00748f;
height: 42px;
width: 100px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;
}
I have tried to implement CSS3 flexbox and CSS calc() like adding #Kunde { display: flex; } and .input-button input { width: calc(100% - 160px); }
and removing the size="60" from html and using width attribute in CSS like #KUNDE{ width=100%; }. Those methods did not help me out the solve problems or I couldn't use them in the proper way :(
Any suggestion will be highly appreciated.
Try the following. Use cal() and width: 100% in necessary place to achieve this
body {
background: #f5fffa;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0;
}
.input-button {
display: inline-block;
width: 100%;
}
.input-wrapper {
width: calc(100% - 140px)
}
#KUNDE {
padding: 10px 5px;
font: bold 16px'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 5px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
margin: 0 10px;
padding: 5px;
border: 1px solid #00748f;
height: 42px;
width: 100px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;
}
<div id="wrapper">
<li class="input-button">
<div class="input-wrapper" style="float:left;">
<input type="text" id="KUNDE" placeholder="Search by name or ID." value="" />
<div id="loader" style="display:none;">
<img src="loader.gif" />
</div>
</div>
<div style="float:left;margin-left:10px;">
<button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
</div>
</li>
</div>
your html is pretty messy so I removed all unnecessary tags:
<div id="wrapper">
<form name="searchbar">
<input type="text" id="KUNDE" placeholder="Search by name or ID." value=""/>
<button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
<div id="loader" style="display:none;"><img src="loader.gif" /></div>
</form>
</div>
basic idea is to express the widths of the elements in percentage and if you want to fine tune it you can add media queries for different sizes:
body{
background: #f5fffa;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
}
#wrapper {
max-width: 940px;
margin:0 auto;
padding:0;
}
.input-button {
margin:20px auto;
display:inline-block;
}
form {
width: 100%;
}
form input {
width: 79%;
box-sizing: border-box;
}
form button {
float: right;
width: 19%;
box-sizing: border-box;
}
#KUNDE{
padding: 10px 5px;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
padding:5px;
border: 1px solid #00748f;
height: 42px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;
}
css could be little bit cleaner also but I don't want to mess with your styles :)
here it is in action:
http://codepen.io/1GR3/pen/mAqyZr?editors=1100
There's a number of solutions to your problem. I've outlined three options with some example code below. Some adjustments will need to be made to meet your specific needs but should be trivial.
* {
box-sizing: border-box;
}
[id] {
margin: 10px 0;
}
input {
width: 100%;
margin-right: 10px;
}
#example-1 input {
/* minus button width + input margin */
width: calc( 100% - 85px );
}
#example-1 button {
width: 75px;
}
#example-2 {
margin-left: -10px;
margin-right: -10px;
overflow: hidden; /* clearfix */
}
#example-2 div {
float: left;
padding: 0 10px;
}
#example-2 div:nth-child(1) {
width: 60%;
}
#example-2 div:nth-child(2) {
width: 40%;
}
#example-2 button {
width: 100%;
}
#example-3 {
display: flex;
justify-content: space-around;
}
<h2>Floated with Calc() - <small>Fixed Size Button</small></h2>
<div id="example-1">
<input type="text"><button type="text">Fixed Width</button>
</div>
<h2>Constrain Width with Container Elements - <small>Percentage Size Button</small></h2>
<div id="example-2">
<div>
<input type="text">
</div>
<div>
<button type="text">Percentage Width</button>
</div>
</div>
<h2>Flexbox</h2>
<div id="example-3">
<input type="text"><button type="text">Hent</button>
</div>
The first example shows the use of calc(). I'm guessing you were close before but might have applied it to the wrong elements and/or applied incorrect values.
The second example show a grid approach where you place elements inside of other elements that make a grid. Those elements are then set to take up a certain portion of their containing element. This is similar to Bootstrap and other CSS frameworks.
For the second example I also added a demonstration of making the button with a flexible width. Though not required for that solution, if a fixed size is used then you would want to switch to example one or three if both items need to take up the full width of the parent element.
The third example shows flexbox.
I am trying to remove the border that creates the panels Body but having some issues finding it.
Here is the code for my panel:
<div class="panel">
<div class="panel-heading"> <span class="panel-title"><i class="icon-user"></i> Training Team</span><button type="button" name="addProjectMember" class="btn btn-mini pull-right"><i class="icon-plus"></i> Add Project Member</button></div>
<div name="trainingTeamBody" style="display:none;" class="panel-body">
<span name="teamError"><br><div class="alert alert-warning"><center>No Project Members Assigned</center></div></span>
<table name="teamTable" class="table table-hover" style="display: none;">
<thead>
<tr>
<th><small>Member</small></th>
<th><small>Role</small></th>
<th><small>Supervisor</small></th>
<th><small>Date Assigned</small></th>
<th><small>Who Assigned</small></th>
<th><small>Action</small></th>
</tr>
</thead>
<tbody name="teamTableResults"></tbody>
</table>
</div>
</div>
In the image above, All I would like its the gray bar which would be what I'd consider to be the heading. If there are no results to show, I simply want the bar to appear without the outline of the body.
As a test, I removed the body completely from the code but the border was still there.
Is there a part of the panels CSS that is causing this that I can overwrite?
This is for Panels in Bootstrap 2 which I did by using the following CSS:
panel {
padding: 15px;
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-heading {
padding: 10px 15px;
margin: -15px -15px 15px;
font-size: 17.5px;
font-weight: 500;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel-footer {
padding: 10px 15px;
margin: 15px -15px -15px;
background-color: #f5f5f5;
border-top: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel-primary {
border-color: #428bca;
}
.panel-primary .panel-heading {
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}
Here you go - http://jsfiddle.net/AndrewL32/9ema30gx/2/
.panel {
border: 0 !important;
}
Hope that helps :)