The image of the problem:
The code:
<div class="text-xs-center" id="DIVCATCHA" runat="server">
<asp:HiddenField runat="server" ID="hdnImageSelected" />
<div class="g-recaptcha" data-sitekey="" style="transform:scale(0.81);-webkit-transform:scale(0.81);transform-origin:0 0;-webkit-transform-origin:0 0;" >
</div>
</div>
By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.
By adding in just two inline styles, you can make the reCAPTCHA fit nicely:
<div class="g-recaptcha"
data-theme="light"
data-sitekey="XXXXXXXXXXXXX"
style="transform:scale(0.77);transform-origin:0 0">
</div>
More details can be found here: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
Related
I'm trying to build an amp page for my site.
I am trying to achieve a responsive form with a number of range inputs.
So that when the screen size changes they stack nicely, much as I would when using bootstrap.
The code I have is (as a single example);
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
Now when I add the layout attribute to the div. All elements inside disappear. When I inspect the html it seems to be applying the css;
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
color: transparent!important;
}
Now as far as I can see from reading the docs I am compliant with the amp specification, however I must be doing something wrong here?
Can anyone point me in the right direction as to what I am doing wrong an dhow I Can achieve the layout above?
#Matthew-Flynn
The text was disappearing because of color: transparent!important;. I removed that in the code snippet below. But I'm not sure that answers your positioning question: could you build out this snippet a little more and I'll take a look?
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
}
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
I am trying to create a "chat window", I have most things sorted out but somehow I can't get the "conversation" textarea to occupy the rest of the window vertically.
Here is my full page code (the textarea I want to adjust is the one inside the div id="conversation"):
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<title>
chat prototype
</title>
</head>
<body>
<div id="completeSite" style="display: flex; flex-flow:row wrap" >
<div id="taskBar" class="col-md-12" style="border-style: solid; ">
TASKBAR
</div>
<div id="userList" class="col-md-2" style="border-style: solid;">
USERLIST
</div>
<div id="chatWindow" class="col-md-10" style="border-style:solid;">
<div id="conversation" class="row">
<textarea readonly class="form-control" style="overflow:auto; resize:none; border-style: solid;">CONVERSATION</textarea>
</div>
<div id="MessageInput" class="input-group row">
<textarea class="form-control" id="message" placeholder="Message" style="height: 200px; overflow:auto; resize:none;"></textarea>
<span class="input-group-btn">
<button class="btn" id="submitMessageButton" type="button" style="height: 200px; background-color: #999999">Send</button>
</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
</body>
</html>
Every piece of css that is not bootstrap is individually in the elements using style=.
So far I've tried some things:
Relative height: definition, but that gives undesirable results when the window is minimized (it keeps the size according to the screen size and not to the window size).
Flex approach: placed display:flex; flex-direction:column on the div id=conversation and afterwards on the div id=chatWindow always using flex: 1 on the textarea, but with no results. I saw this solution on some other question from Stack Overflow, so decided to try it out obviously.
Ok, so the answer from "user123" was mostly correct but, in terms of browser compatibility it was giving me problems due to $(window).innerHeight();
Which, according to the w3schools description is "the inner height of a window's content area"
However, this was only working on Edge and IE11. To get it working on Edge, IE11, Firefox and Chrome I had to use $(window).outerHeight();.
Which is described at w3schools as being "the outer height of a window, including toolbars/scrollbars"
Bottom-line: In terms of "sense", it makes none of it but I got it working using the outerHeight() instead of the innerHeight() function.
PS:Posted as an answer to call attention.
Assign your window height to your chat box height. Add your own code id or class name instead of "#myDiv".
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).outerHeight();
$('#myDiv').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
For more see this link:ViewPort
I am trying to have an icon display right after the textbox, left edge of image abutting right edge of textbox. I cant get it to happen. The image is always low and offset to the right. Im certain bootstrap is having something to do with this but Ive tried turning off almost all the css in dev tools but it still wont display right after the texbox.
Here is the code, I even wrapped it in a span hoping to force it in one line. The bootstrap classes start the textbox where I want it, I just simply want the icon directly next to the textbox.
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbCCNum" CssClass="col-md-2 control-label">Credit Card No.</asp:Label>
<div class="col-md-10">
<span class="imageinline">
<asp:TextBox runat="server" ID="tbCCNum" CssClass="form-control" Width="300" MaxLength="20" ClientIDMode="Static" /><asp:Image ID="ccImage" runat="server" ClientIDMode="Static" ImageUrl="~/Images/CC Icons/amex_small.png"/></span>
</div>
</div>
Here is the css
span.imageinline img {
display: inline !important;
margin-left: 2px;
}
In order for the controls to display horizontally in bootstrap, the form-inline class from bootstrap must be used, without any additional css of your own, as shown below
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbCCNum" CssClass="col-md-2 control-label">Credit Card No.</asp:Label>
**<div class="form-inline">**
<div class="col-md-10">
<asp:TextBox runat="server" ID="tbCCNum" CssClass="form-control"
Width="300" MaxLength="20" ClientIDMode="Static" TabIndex="8"/>
<asp:Image ID="ccImage" runat="server" ClientIDMode="Static"
ImageUrl="~/Images/CC Icons/amex_small.png"/>
</div>
</div>
</div>
I'm trying to have these 5 images to line up left to right however they are stacking top to bottom.
This is my HTML code
<div style="backgroundColorButtons">
<img src="images/white01.jpg" alt= "White Background" width="236" height="35" type='button' value='White Background' onClick="javascript:changeBGC('#ffffff');return false"
onmouseover="this.src='images/white02.jpg';"
onmouseout="this.src='images/white01.jpg'"
onmousedown="this.src='images/white04.jpg'"
onmouseup="this.src='images/white01.jpg'" />
</div>
<div style="backgroundColorButtons">
<img src="images/black01.jpg" alt= "Black Background" width="236" height="35" type="button" value='Black Background' onClick="javascript:changeBGC('#000000');return false"
onmouseover="this.src='images/black02.jpg';"
onmouseout="this.src='images/black01.jpg'"
onmousedown="this.src='images/black04.jpg'"
onmouseup="this.src='images/black01.jpg'" />
</div>
<div style="backgroundColorButtons">
<img src="images/red01.jpg" alt= "Red Background" width="236" height="35" type='button' value='Red Background' onClick="javascript:changeBGC('#ff0000');return false"
onmouseover="this.src='images/red02.jpg';"
onmouseout="this.src='images/red01.jpg'"
onmousedown="this.src='images/red04.jpg'"
onmouseup="this.src='images/red01.jpg'" />
</div>
There are two more buttons with similar code
This is the CSS Code that I am using;
.backgroundColorButtons{
float: left;
}
Instead of style use class
<div class="backgroundColorButtons">
I've also noticed that the way you use JS to change states is pretty painful, both for you, somebody who will edit the code one day, and the user it self. On every event (till all images are cached by the browser) you request the server for a new image resulting in an unprofessional time gap / wait - for the new image to be loaded.
Avoid where possible (anywhere is possible) inline JavaScript.
Explore the sprite images technique.
In your div declaration you have invalid syntax:
<div style="backgroundColorButtons">
If you want to assign class backgroundColorButtons to a div, you need to change it to:
<div class="backgroundColorButtons">
<div style=""> is allowed. but is used only for defining inline style, like so:
<div style="float: left;">
You should also consider defining width for your floated elements.
#container
{display:table;width:100%;}
#row{display:table-row;}
.left{display:table-cell;padding:10px;}
the html
<div id="container">
<div id="row">
<div class="left">1st image</div>
<div class="left">2nd image</div>
<div class="left">3rd image</div>
</div>
</div>
try using class instead of style should work
In Example <div class="backgroundColorButtons">
try to use .class in place of style="backgroundColorButtons" and style="backgroundColorButtons" is not valid inline css. you can do one of the below
1. add style="float:left" in place of style="backgroundColorButtons"
or
2. Make class name as
<style>
.backgroundColorButtons{
float:left;
}
</style>
and remove style in div add class="backgroundColorButtons"
<div>
<img src ='image.png' style="display: block" />
</div>
In Chrome, this renders a 1px margin on right side of the image and pushes wrapper div out. How to remove the margin?
Use the margin and padding in the style attribute as shown below:
<div>
<img src ='image.png' style="display: block; margin: 0px; padding: 0px;" />
</div>
In addition to this, you can also remove the border by adding the style "border:0px".
I have not tried it, let me know if it works.
Using CSS to remove only that will still make your website look different in other browsers. It's best to use a CSS reset to get the same formatting in all browsers.
CSS reset like this:
http://meyerweb.com/eric/tools/css/reset/
I saw this behavior in Safari as well. Try this.
<div class="group-holder" style="display: table;">
<img src="myimage1.gif" style="display: table-cell;" />
<img src="myimage1.gif" style="display: table-cell;" />
<img src="myimage1.gif" style="display: table-cell;" />
</div>
This worked for me.