I have a position absolute div in the body of an html file. I want it to obey the body-margins. Find my code at http://jsfiddle.net/vHApr.
The following is my code:
<html>
<head>
<style type="text/css">
body{
margin: 50px;
background-color: #ddd;
color: #222;
font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
min-width: 1080px;
padding-top: 50px;
}
div.test{
position:absolute;
right:0px;
top:55px;
}
</style>
</head>
<body>
<div class="test">
TEST
</div>
</body>
</html>
Add position:relative for body – then the absolute descendant element will be aligned to the edges of body, and not to the viewport (which happens for absolutely positioned elements with no positioned ancestors).
try this
div.test{
position:absolute;
}
Updated jsFiddle http://jsfiddle.net/vHApr/3/
Related
I would like the view port on Safari mobile to prevent horizontal scrolling and also hide any horizontal overflow content. The reason being is that I have some animations on a website that move content off screen. As a work-around I can perhaps not animate but I would like to get it working on mobile.
When viewed on an iPhone 6 using Safari the code below allows horizontal scrolling and still shows the overflow content.
I see four posts on the subject but the suggestions for use of overflow: hidden are not working.
overflow-x: hidden, is not working in safari
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
Mobile Safari Viewport - Preventing Horizontal Scrolling?
Hiding the scrollbar on an HTML page
Place this code in index.html on a server so the page can be viewed on an iPhone:
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
<style>
html {
overflow-x: hidden;
}
body {
background-color: black;
overflow-x: hidden;
}
#content {
width: 100%;
overflow-x: hidden;
}
.tagline {
color: white;
font-size: 1.8em;
font-style: italic;
position: absolute;
white-space: nowrap;
overflow-x: hidden;
top: 10%;
left: 80%; /* This position is off screen on purpose */
}
</style>
</head>
<body>
<div id="content">
<span class="tagline">Testing span reaching outside edge of window on mobile</span>
</div>
</body>
</html>
If you position:fixed; the #content it would prevent it from scrolling:
#content {
width: 100%;
overflow-x: hidden;
height: 100%;
position: fixed;
}
I have done some absolute positioning with css. But in the following case, why in the firstBox , the top and left values are ignored? (I want top at 100 px and left at 100px). The Second box is pisitioned correctly.
<html>
<head>
<title>Testing</title>
<style type="text/css">
#firstBox {
color: white;
width: 500px;
padding: 1em;
background: red;
position::absolute;
top:100px;
left:100px;
z-index:2;
}
#secondBox {
color: white;
width: 500px;
padding: 1em;
background: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 0;
}
</style>
</head>
<body>
<div id="firstBox"> The First Box! </div>
<div id="secondBox"> The Second Box! </div>
</body>
</html>
It is because you are using 2 colons for position: absolute; for #firstBox
My Fiddle
I am working on an app for a client and am trying to create a button with a completely custom icon. The icon is 30px x 30px and transparent in the middle.
I have almost achieved what I want using this css code:
/* info button override */
.ui-icon-info-page {
background: url(images/G_help_icon_round.png) 50% 50% no-repeat;
background-size: 30px 30px;
background-color: black;
}
But there is a thin black circle that appears inside the icon, and also the icon image appears to be cut off:
I want to remove this circle and prevent the icon ? from being cut off. Also, I would like the question mark to be transparent instead of black, to show the image of the navigation bar beneath. If I try to set the background color to transparent though, the button appears entirely white:
How can I do this?
Update:
I tried applying this code:
/* info button override */
.ui-icon-info-page {
background: url(help.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
margin-top: -15px !important;
box-shadow: none;
-webkit-box-shadow: none;
}
And got this result:
I'm able to move the icon around by adjusting the top and left margins, but it's edges are cut off outside a frame centered on the black circle:
Update 2:
Here is the button I am using (Note that it is invisible here because it is a white button on a white background):
Here is the html code that I use to load the button:
<div data-role="header" data-position="fixed">
<div><img border="0" src="images/G_iphone_navbar_logo.png" style="display:inline;"/> </div>
</div>
This should fix the issue
/* info button override */
.ui-icon-info-page {
background: url(help.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
margin-top: -15px !important;
box-shadow: none;
-webkit-box-shadow: none;
}
Please ensure you are loading your application css file after jquery mobile css.
Edit:Here is a sample code based on the code you posted with the issue fixed
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
#rightBtn .ui-btn-inner {
width: 30px;
height: 30px;
margin: -3px;/*Modify to change icon position wrt the header*/
border: none !important;
}
.ui-icon-custom {
background: url(http://i.stack.imgur.com/AqicD.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
box-shadow: none;
-webkit-box-shadow: none;
margin: 0 !important;
}
</style>
</head>
<body>
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content"></div><!-- /content -->
</div><!-- /page -->
</body>
</html>
A demo here - http://jsfiddle.net/LCsmt/
Let me know if that helps.
I am having a bit of trouble with IHtmlElementCollection used from Delphi XE2. My document looks something like this, and I load it into TWebBrowser.
<!DOCTYPE html>
<html>
<head>
<title>Test av skjema</title>
<script type="text/javascript" src="Header.js" ></script>
<style>
body{ font-family: 'Segoe UI'; font-size: 9pt; }
table{ background-color: silver; width=98%; }
td{ background-color: white; vertical-align: top; padding: 2px; }
.fullWidth{ width: 100%; border: 0px solid white; }
.noFrame{ border: 0px solid white; overflow: hidden; width=100%; }
.Header{ font-weight: bold; }
.Question{ font-size: 9pt }
.HelpText{ font-size: 8pt; color: navy; }
</style>
</head>
<body>
<form>
...
</form
</body>
</html>
When I try to iterate over all elements in the document using the IHtmlDocument2 interface, the "all" property will only contain the elements up to the script, for a total of 5 IHtmlElement objects. After that, there are no more elements to find.
However, when I remove the tag:
<script type="text/javascript" src="Header.js" ></script>
the iterator will once again find all elements of the file, which is a great deal more. Does anyone know why this happens?
I'm trying to write a progress bar or add a loading gif to my Smart Gwt application, which starts in onModuleLoad, and ends when the app is just about to display. Is there some type of event handler that can determine this? I've looked but i haven't found anything.
Noticed no one has answered this while searching for something else.
If you look at the SmartGWT showcase they have a popup that displays while the application is loading. In my application, I coopted the mechanism there and you simply have to add this to your webapp.html:
as part of the <head>
<!--CSS for loading message at application Startup-->
<style type="text/css">
body { overflow:hidden }
#loading {
border: 1px solid #ccc;
position: absolute;
left: 45%;
top: 40%;
padding: 2px;
z-index: 20001;
height: auto;
}
#loading a {
color: #225588;
}
#loading .loadingIndicator {
background: white;
font: bold 13px tahoma, arial, helvetica;
padding: 10px;
margin: 0;
height: auto;
color: #444;
}
#loadingMsg {
font: normal 10px arial, tahoma, sans-serif;
}
</style>
as part of the <body> before the script tag loading your WebApp.nocache.js:
<!--add loading indicator while the app is being loaded-->
<div id="loadingWrapper">
<div id="loading">
<div class="loadingIndicator">
<!--<img src="images/pieces/48/cube_green.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>SmartGWT<br/>-->
<img src="WebApp/sc/skins/EnterpriseBlue/images/loading.gif" width="16" height="16" style="margin-right:8px;float:left;vertical-align:top;"/>WebApp<br/>
<span id="loadingMsg">Loading styles and images...</span></div>
</div>
</div>
<!--load skin-->
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading skin...';</script>
<script type="text/javascript">
document.write("<"+"script src=WebApp/sc/skins/EnterpriseBlue/load_skin.js isc_version=7.1.js><"+"/script>");
</script>
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading Application<br>Please wait...';</script>
<!--include the application JS-->