When screen scaling is changed to 125%, 150% or a custom value, the following HTA scales accordingly, except for checkboxes and radio buttons. How can I make those elements also scale proportionally with the user's screen scaling setting?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=9">
<script language="VBScript">
x = screen.availWidth * 1/3 'use one third of the available width
y = screen.availHeight * 3/4 'use three quarters of the available height
Window.ResizeTo x, y
Window.MoveTo (screen.availWidth - x)/2, (screen.availHeight - y)/2 'Center
</script>
<style>
body {background-color:LemonChiffon; font-family:Segoe UI; font-size:11pt}
</style>
</head>
<body>
<h1>Heading 1</h1> Body text
<h2>Heading 2</h2> Body text
<h3>Heading 3</h3> Body text<br><br>
<input type=button value="Button"><br>
<input type=checkbox id=cb1>Check box<br>
<input type=radio id=rb1 name=test><input type=radio id=rb2 name=test>Radio buttons<br>
</body>
In HTAs, checkboxes and radio buttons can be scaled using the zoom property. First, you will need code to read the current screen scale setting from the registry, which is in one of two places depending on whether a standard or custom scale is selected, and do a bit of math to get a scale factor. Then apply that scale factor to all check box and radio button elements. The scaled elements are kept aligned with the text by applying the vertical-align:bottom style. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=9">
<script language="VBScript">
Const HKCU = &H80000001
Set oWSH = CreateObject("Wscript.Shell")
Set oReg = GetObject("winmgmts:\\.\root\default:StdRegProv")
x = screen.availWidth * 1/3 'use one third of the available width
y = screen.availHeight * 3/4 'use three quarters of the available height
Window.ResizeTo x, y
Window.MoveTo (screen.availWidth - x)/2, (screen.availHeight - y)/2 'Center
Scale = GetScale()
Sub window_onload
'Scale checkboxes and radio buttons
cb1.style.zoom = Scale
RadioGroup1(0).style.zoom = Scale
RadioGroup1(1).style.zoom = Scale
End Sub
Function GetScale()
GetScale = 1.0
On Error Resume Next
'If user changes scale, they must logout/login for this registry value to change
GetScale = oWSH.RegRead("HKCU\Control Panel\Desktop\WindowMetrics\AppliedDPI") / 96
On Error Goto 0
End Function
</script>
<style>
body {background-color:LemonChiffon; font-family:Segoe UI; font-size:11pt}
.scaled {vertical-align:bottom}
</style>
</head>
<body>
<h1>Heading 1</h1> Body text
<h2>Heading 2</h2> Body text
<h3>Heading 3</h3> Body text<br><br>
<input type=button value="Button"><br>
<input type=checkbox class=scaled id=cb1>Check box<br>
<input type=radio class=scaled name=RadioGroup1>
<input type=radio class=scaled name=RadioGroup1>Radio buttons<br>
</body>
Related
I have a problem with popover visualization using Bootstrap 4.6
In this minimum example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</head>
<body style="background-color: cadetblue; height:1000px">
<header style="height: 100px">
</header>
<section style="overflow-y: auto; height: 500px; background-color: cornsilk;">
<div style="height: 1000px" > </div>
<div id="test">
<button type="button"
data-placement="top"
data-toggle="popover"
title="Blah"
data-content="Bleh Bleh">Blih</button>
</div>
<script>
$("button").popover({})
</script>
<div style="height: 1000px" > </div>
</section>
</body>
</html>
the popover is correctly shown when the button is visible inside the scroll:
Popover shows ok
But if I scroll and the button "passes" the "cadetblue" zones the popover, instead of keeping scrolling and eventually stopping being visible stays on the top / bottom boundary:
Popover stays in the "upper limit" when scrolling the section down
Popover stays in the "lower limit" when scrolling the section up
I've tried fiddling with the container, boundary and fallbackPlacement options as some answers to similar problems suggest, but to no avail. From what I've been investigating in this and other sites the popover visualization in Bootstrap 4.6 is a tricky question, but since this is such a simple problem I'm sure that I'm overlooking something.
At long last I found a solution, using what's commented in this issue.
Apparently, Popper (the library used by Bootstrap to show the Popovers) toggles the attribute "x-out-of-boundaries" on the popover whenever the element that triggers the popover exits its boundaries.
Thus, the solution is to add a css rule similar to
.popover[x-out-of-boundaries]{
display: none;
}
to hide the popover when the element stops being visible.
I have a question regarding innerHTML positioning. I have a form which also has a timer countdown being displayed using innerHTML. The thing is it is currently above my form which ends up causing some issues which I am not going to explain and I would like to place it under the form. I know I can declare how far is is from the bottom, the top, left, right, etc of the page however I do not with to do this as this would require an absolute position whereas I do not want it to be absolute but still sit under my form. Here is the code containing it placed on top currently:
<div id="checking"></div>
<script type="text/javascript">(5,"checking");</script>
</head>
<body bgcolor="yellow">
<div id=main>
<br><br>
<form method="POST" id="quizzes" action="">
<label for="question"><?php echo ($currentQuestion+1).". ". $questionsAndAnwsers[$currentQuestion]["question"];
?></label>
<input type="hidden" name="currentQuestion" value="<?php echo $currentQuestion;?>"><br>
<input type="text" name="guess" value="" placeholder="Answer...">
<input type="submit" name="btnsubmit" value="Next Question">
</form>
</div>
<script type="text/javascript">
seconds = 15;
runningtime = setInterval(function () {
var element = document.getElementById("checking");
element.innerHTML = "<h2 style='text-align:center'> <b>"+seconds+"</b> seconds</h2>";
if(seconds < 1){
clearInterval(runningtime);
document.getElementById('quizzes').submit();
}
seconds--;
}, 1000)
</script>
</body>
When you set the innerHTML of a <div>, it puts the content in that div.
If you don't want it at the top of your document, don't put that <div> at the top of your document.
Move the <div> in the source code.
I am using Found 4.04. I have a text box inside a form and I am trying to place some text right beneath the text box. However, there is a bit more space than I would like and I want to cut it down. I tried tweaking the margin, padding, etc. using Firebug and nothing has worked.
Is there a way to reduce the vertical space between the text boxes and their corresponding placement text? i.e., "Small text goes here" will move up closer to the text box.
Here is the JSFiddle link (you will have to shrink the code panel so you can see the boxes side by side): http://jsfiddle.net/R95JL/
<html>
<head><meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<link href="http://cdn.jsdelivr.net/foundation/4.0.4/css/foundation.min.css" rel="stylesheet">
</head>
<body>
<h4> Test form </h4>
<br> <br>
<div class="container">
<div class="row">
<form enctype="application/x-www-form-urlencoded" action="" method="post">
<div class="large-3 columns"> Text </div>
<div class="large-2 columns"><input type="number" value="" required="" name="f2" id="myid1"></div>
<div class="large-2 large-offset-1 columns end"><input type="number" value="" required="" name="f3" id="myid2"></div>
</form>
</div>
<div class="row">
<div class="large-offset-3 large-2 columns"><small> Small text goes here </small> </div>
<div class="large-2 large-offset-1 columns end"><small> Small text goes here </small> </div>
</div>
</div>
</body>
</html>
Just remove the margin from the input boxes in your CSS.
input { margin:0px !important; }
Your solution is unlikely a simple hack :
#myid2 {
margin-bottom:0px;
}
working demo
Also note that your form is float'ed....so you'll have to use
.clr{
clear:both;
}
and unlike the other answers, using input {margin:0px !important;} is not recommended as this will affect all the input fields and the form layout too... see what i mean!!
your input is having default margin. Use this rule in css:
input {margin:0px !important;}
With this markup:
<label for="example">
<textarea id="example" cols="40" rows="10"></textarea>
</label>
The label does not expand with the textarea and hence the textarea pushes itself under the following fields in the form.
Does anyone know how to get the label to expand to the size of the textarea using CSS?
I've tried:
label { display: table; }
and all kinds of margins and padding on both the label and the textarea, but to no avail.
I think you'll need to close the text area properly, i.e with a closing </textarea> tag - though, I'm unsure of the use of label in this way - perhaps the for attribute is made redundant by enclosing the target element with the label tags. :shrugs:
Removing the </textarea> tag from the below example makes the check-box disappear, the point being that page display is broken if the tag is omitted. :)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label for="cb">
<textarea id="example" cols="40" rows="10"></textarea>
</label>
<input type='checkbox' checked='true' id='cb'/>
</body>
</html>
I need to display 2 buttons using jquery mobile and the code is here: http://jsfiddle.net/kiranj/rQ3mh/3/
However, I need to make sure
1) first button is left aligned, has a fixed width of 40% and
2) second button is right aligned, has a fixed width of 40%
Seems like I am missing some important thing in achieving this simple looking functionality. Appreciate any help
For reference, here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Page</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>
</head>
<body>
<br/><br/><br/>
<div data-role="fieldcontain">
<input type="submit" name="agree" data-inline="true" data-corners="false" data-theme="b" id="pageptosagree" value="Agree" />
<input type="submit" data-inline="true" data-corners="false" name="notAgree" id="pagetosdonotagree" value="I Do Not Agree" />
</div>
</body>
</html>
Here is the css:
div.divinput div{
overflow: hidden;
}
div.divinput div.buttonleft div{
width:40%;
float:left;
}
div.divinput div.buttonright div {
float:right;
width:40%;
}
.clear {
clear: both;
}
Change CSS in jquery CSS code to:
`.ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c {
float: right; //just add this single property. Everything will work.
font-family: Helvetica,Arial,sans-serif;
text-decoration: none;
}`
You can find the Jquery CSS that you are using here
If you add/overwrite some CSS properties that originally are in jquery.mobile-1.1.0.min.css i think you will get the result you want. Try the below code:
CSS
.ui-btn{
width:40%;
}
.ui-btn-up-c,
.ui-btn-hover-c{
float:right;
}
HTML
<div data-role="fieldcontain">
<input type="submit" name="agree" id="pageptosagree" data-inline="true" data-corners="false" data-theme="b" value="Agree" />
<input type="submit" name="notAgree" id="pagetosdonotagree" data-inline="true" data-corners="false" value="I Do Not Agree" />
</div>
Hope it can help you!
I was just testing this: http://jsfiddle.net/rQ3mh/8/
Please note that this is not a proper way to style it. Just to see if it works
The reason it doesn't work is because once the interface is applied there is no class .buttonleft or .buttonright (Inspect the element to see the class names) Therefore the only way to address those divs is by number. Maybe you should check the documentation around jquery mobile and how to apply class to the interface or at leas inherit it from the <input>
Hope that helps a little.