I have problem with google re-Captcha. It happens rarely, but still, sometimes the image is not displayed correctly. It misses some parts. Here is the image:
http://bit.ly/1olZoih
Here is my Html:
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Error: Invalid code, please try again</div>
<div class="recaptcha_only_if_image">Please enter the code from the image above:</div>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<div><img id = "restart-button" src="/images/restart.png" width = "20px" height = "20px"></div>
</div>
And I apply only this css to it:
#recaptcha_widget{
margin-top: 10px;
width:508px;
}
.recaptcha_only_if_image{
margin-left: 3px;
margin-bottom:7px;
line-height: 20px;
color: #747474;
font-size:13px;
}
#recaptcha_response_field{
width: 233px;
height: 21px;
padding-left: 7px;
border: 1px solid #dadada;
border-radius: 2px;
color: #4d4d4d;
float:left;
}
#recaptcha_response_field:focus{
outline:rgb(184, 167, 130) auto 2px;
}
#restart-button{
margin-top: 2px;
margin-left: 10px;
}
#recaptcha_image{
margin-bottom: 10px;
}
#recaptcha_challenge_image{
border: solid 1px #e2e2e2;
border-radius: 5px;
}
I'm not resizing the picture and it comes 300x57 px.
Thanks in advance :)
Try giving width to the Captcha div.
Width: ;
Related
In the following HTML/CSS snippet, I'm trying to align the output div below the input field in such a way that they have the same width whenever the window is resized.
Right now the elements get misaligned whenever the viewport dimensions are changed.
How do i refactor and improve my CSS to achieve the desired result?.
I am still very fairly new to web design and development in general and would appreciate it if i could get detailed answers and suggestions. Thanks.
CSS/HTML
html {
font-size: 62.5%;
}
body {
background-color: #c0c0c0;
font-size: 1.6rem;
}
.section {
position: relative;
margin-top: 2rem;
text-align: center;
}
header {
margin-bottom: -2rem;
}
.text-field {
display: inline-block;
background-color: #c0c0c2;
border-top: .4rem solid;
border-color: red;
border-radius: .3rem;
color: black;
width: 50%;
height: 4.2rem;
text-align: left;
text-decoration: none;
font-size: 1.5rem;
min-width: 17.5rem;
}
.btn {
display: inline-block;
background-color: blue;
border-color: black;
border-radius: 3px;
border-style: dotted;
color: white;
padding: 14px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.output-div {
position: absolute;
display: block;
font-size: 1.4rem;
background-color: #fff;
border-top: .5rem solid;
border-right: .15rem solid;
border-bottom: .15rem solid;
border-left: .15rem solid;
border-color: clack;
border-radius: .3rem;
margin: .5rem auto auto 6.5rem;
min-width: 17.4rem;
padding: .1em;
width: 50%;
height: auto;
text-align: left;
overflow-wrap: break-word;
word-wrap: break-word;
}
<br>
<!-- ✓ Oguntoye -->
<section class="section">
<header>
<h1>Header</h1>
</header>
<div class="user-interaction-area">
<form id="form">
<input class="text-field" type="text" placeholder="Input">
<button class="btn" type="button">Run</button>
</form>
</div>
<!-- output block-->
<div class="output-div">
<kbd class="input-output">Oy</kbd>
<samp class="run-output">vey!</samp>
</div>
</section>
I put your example code inside a codepen. https://codepen.io/melvinhicklin/pen/qyRwXB?editors=1100
From what I could see, the text areas already do a good job of staying the same width.
To align them, I added the following to the .output-div CSS Class:
position:relative;
left:-71px;
display:inline-block;
I have a case I am not sure how to figure it out.
I am trying to do a design to put a button over a textbox, to make my layout looks nice, but when users start typing information in textbox, it hides behind the button. I know I have 1 of 2 solutions, but I don't know how to do it:
1- either to find another way to do the layout.
2- limit the number of lines for the user to enter, but this way I am going to have a restriction for long data.
Below is my HTML and CSS:
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
}
.nl-btn-main .nl-btn{
border-radius: 5px;
background: blue;
color: white;
left: -50px;
position: relative;
}
.nl-txt-main .nl-txt {
width: 200px;
border-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>
I want the button to be like part of the textbox itself, When you try to run the code, and write a long sentence in the textbox, it will hide under the button. How do I solve it?
Thank you.
Remove left:-50px; from you button
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
margin:0;
}
.nl-btn-main .nl-btn{
background: blue;
color: white;
left: -4px;
position: relative;
border-bottom-right-radius: 5px;
margin:0;
border-top-right-radius: 5px;
}
.nl-txt-main .nl-txt {
width: 200px;
border-bottom-left-radius: 5px;
margin:0;
border-top-left-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>
I think it is possible to unset this element to not block space, but i don't know which CSS code to do that. Below is my code:
.customLabel{
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black
}
.customLabel>div{
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
}
<div class="customLabel">
<div class=''>hello</div>
<div class=''>hi hi hi hi </div>
<div class=''>god</div>
</div>
All I want want is like this image
So if anyone can please help me. Thank you in advance.
Float the divs to the right and add clear:both. You'll need to use a clearfix so that the floats are contained...here I used overflow:hidden on the parent wrapper.
.customLabel {
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black;
overflow: hidden;
}
.customLabel>div {
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
float: right;
clear: both;
}
<div class="customLabel">
<div class=''>hello</div>
<div class=''>hi hi hi hi</div>
<div class=''>god</div>
</div>
You can set display:inline-block and add breaks <br> if you want to go next line:
.customLabel{
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black
}
.customLabel>div{
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
}
.notblock{display:inline-block}
<div class="customLabel">
<div class='notblock'>hello</div><br>
<div class='notblock'>hi hi hi hi </div><br>
<div class='notblock'>god</div><br>
</div>
Here's one way to do it. I am using the CSS Flexbox to accomplish this. It has real good browser support as of now so this shouldn't be a problem.
.customLabel{
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black;
display:flex;
flex-direction:column;
align-items: flex-end;
}
.customLabel>div{
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
}
<div class="customLabel">
<div class=''>hello</div>
<div class=''>hi hi hi hi </div>
<div class=''>god</div>
</div>
Read more about Flexbox here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hi I've created an angularJs partial. It's a form. However the black bottom bit(form wrapper footer) where the 'next' button is won't go to the bottom/stay at the bottom of the page. It leaves an awkward gap. I want it to mirror the top.
As you can see in the image attachment.
I've spent hours fiddling around and I can't get it to go to the bottom. Any help would be greatly appreciated thanks.
If I use :
position:absolute;
bottom: 0;
It works but it makes the bottom div go beyond the scope to the right.
.form-wrapperTitle {
width: 100%;
height: 15%;
padding-top: 13px;
padding-bottom: 13px;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #121212;
border: #2d2d2d solid 1px;
margin-bottom: 30px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
font-family: Arial;
}
.form-wrapper {
width: 80%;
height: 60%;
margin: 50px auto;
overflow: hidden;
background: #1e1e1e;
border-radius: 6px;
box-shadow: 0px 0px 50px rgba(0, 0, 0, .8);
color: #bfbfbf;
}
.form-wrapperFooter {
width: 100%;
height: 15%;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #121212;
border: #2d2d2d solid 1px;
/* margin-bottom: 30px;*/
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
font-family: Arial;
padding-top: 13px;
padding-bottom: 13px;
}
<section class="form-wrapper">
<div class="form-wrapperTitle">Name Your Goal</div>
<br>Here's where it all starts. Saving into your investments with Clear Finance is all about goals.
<br>Everyone saves for something - even if you're not quite sure what it is yet.
<br>
<br>
<form class="form-horizontal" role="form">
<div class=" form-group">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label">Form Goal</label>
<div class="col-sm-8">
<input type="text" class="form-control" ng-model="formGoal" placeholder="What is your goal?">
<br>
<strong>Your Goal is:</strong>
<h5>{{formGoal}}</h5>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="form-wrapperFooter">
<button class="btn btn-primary" ng-click="goToNextState('form.goalamount')">Next</button>
</section>
</div>
This can help you:
.form-wrapperFooter{
position:absolute;
bottom:0px;
}
This will work for you if you have very less content on you page that does not take up the height of the whole page.
You were almost there, But you missed a vital piece of the puuzzle:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
Make your parent relative, and your child Absolute (in terms of positioning).
so your form-wrapper class should include:
position: relative;
padding-bottom:30px;
and your form-wrapperFooter should include:
position:absolute;
bottom:0;
I have also corrected your markup in order for it to be correctly rendered in terms of browser compatibility.
You may want to play with the values, but I think this is the general jist of it:
See below for a working demo:
.form-wrapperTitle {
width: 100%;
height: 15%;
padding-top: 13px;
padding-bottom: 13px;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #121212;
border: #2d2d2d solid 1px;
margin-bottom: 30px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
font-family: Arial;
}
.form-wrapper {
width: 80%;
height: 65%;
margin: 50px auto;
overflow: hidden;
background: #1e1e1e;
border-radius: 6px;
box-shadow: 0px 0px 50px rgba(0, 0, 0, .8);
color: #bfbfbf;
padding-bottom:30px;
position:relative;
}
.form-wrapperFooter {
width: 100%;
height: 5%;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #121212;
border: #2d2d2d solid 1px;
/* margin-bottom: 30px;*/
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
font-family: Arial;
padding-top: 13px;
padding-bottom: 13px;
position:absolute;
bottom:0;
}
<section class="form-wrapper">
<div class="form-wrapperTitle">Name Your Goal</div>
<br>Here's where it all starts. Saving into your investments with Clear Finance is all about goals.
<br>Everyone saves for something - even if you're not quite sure what it is yet.
<br>
<br>
<form class="form-horizontal" role="form">
<div class=" form-group">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label">Form Goal</label>
<div class="col-sm-8">
<input type="text" class="form-control" ng-model="formGoal" placeholder="What is your goal?">
<br>
<strong>Your Goal is:</strong>
<h5>{{formGoal}}</h5>
</div>
</div>
</div>
</div>
</form>
<div class="form-wrapperFooter">
<button class="btn btn-primary" ng-click="goToNextState('form.goalamount')">Next</button>
</div>
</section>
Try below code:
Align bottom of the page - Add position: relative; to wrapper of the .form-wrapperFooter.
.form-wrapperFooter{
position:absolute;
bottom:0px;
}
Align bottom of the browser
.form-wrapperFooter{
position: fixed;
bottom: 0;
}
The
position: absolute;
bottom: 0;
worked...but the Div went beyond to the right.
so I changed the percentage from 100% to 80%
This is odd considering I wanted the div to fill 100% of the inside div. Changing it to 80% seems to have corrected it. No idea how it worked. Thanks for the input.
As you can see on the example picture, there is some type of white space above the "news" header (padding? margin?) I have tried messing around with padding-top, margin-top but nothing I did would get rid of the white space. Thanks!
HTML:
<div id="news_wrapper">
<div id="newsheader">
<p>News</p>
</div>
<div class="news">
<p>"News Post 1"</p>
</div>
<div class="news">
<p>"News Post 2"</p>
</div>
<div class="news">
<p>"News Post 3"</p>
</div>
<div class="news">
<p>"News Post 4"</p>
</div>
</div>
CSS:
#news_wrapper {
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 650px;
height: auto;
margin: 6px;
}
#newsheader {
background-color: Black;
color: white;
width: auto;
margin: 0px;
height: 30px;
text-align: center;
font: 'Helvetica', sans-serif;
text-transform: bold;
}
.news {
display: block;
margin: auto;
text-align: center;
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin: 4px;
}
add this to your css
#newsheader p{
margin:0;
}
I believe the issue is with your margin: auto
I generally use margin: 0 auto for this effect.