I have this free Philippines texting site and as you can see I can't align the captcha image with the textbox. It is below the captcha image. How can I align the textbox? Here is my code. I am using foundation css framework.
<body>
<div class="row">
<div class="large-12 columns">
<div class="nav-bar right">
<ul class="button-group">
<li>Free SMS</li>
<li>Contact Me</li>
</ul>
</div>
<img src="img/smsbanner.png">
<hr/>
</div>
</div>
<div class="row">
<div class="large-4 large-centered columns">
<div class="large-12 columns">
<form action="sendsms.php" method="POST" name="txtform" data-abide>
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right">+63</label>
</div>
<div class="small-9 columns">
<input type="text" name="txt_number" placeholder="10 digit number" required pattern="number" maxlength="10"/>
<small class="error">Phone number is required.</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<textarea rows="10" cols="50" placeholder="Message" required maxlength="200" name="txt_body" style="resize:none;"
onKeyDown="limitText(this.form.txt_body,this.form.countdown,200);"
onKeyUp="limitText(this.form.txt_body,this.form.countdown,200);"></textarea>
<small class="error">Your message is required.</small>
<div class="row">
<div class="small-5 columns">
<img id="captcha" src="securimage/securimage_show.php" alt="CAPTCHA Image" />
</div>
<div class="small=7 columns">
<input type="text" name="captcha_code" size="10" maxlength="6" style="width:100px;"/>
[ Different Image ]
</div>
</div>
<div class="row">
<div class="small-4 columns">
<input readonly type="text" name="countdown" size="3" value="200">
</div>
<div class="small-8 columns">
characters left.
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 large-centered columns">
<input type="submit" class="button expand" value="Send" name="send_btn"/>
</div>
</div>
</form>
</div>
</div>
</div>
<footer class="row">
<?php include 'footer.php'; ?>
</footer>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
Looks like a pretty minor problem.
<div class="small=7 columns">
should be
<div class="small-7 columns">
Related
I got this form:
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="mx-2">
<small class="text-muted">Tablas contenidas en el archivo.</small>
</div>
<textarea rows="10"></textarea>
</div>
<div class="col-md-2">
<div class="col-md-4 my-1 mx-auto">
<button>btn</button>
</div>
<div class="col-md-4 my-1 mx-auto">
<button>btn</button>
</div>
<div class="col-md-4 my-1 mx-auto">
<button>btn</button>
</div>
<div class="col-md-4 my-1 mx-auto">
<button>btn</button>
</div>
</div>
<div class="col-md-5">
<div class="mx-2">
<small class="text-muted">Tablas seleccionadas.</small>
</div>
<textarea rows="10"></textarea>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/qh8a5Lro/
I want to order Buttons in the middle of the two textarea's but the text on the textarea's is avoiding this. How I can fix it? And I wanna make it responsive.
Any ideas?
https://i.stack.imgur.com/4gBwM.png
https://i.stack.imgur.com/q3amm.png
Thanks for ur help!
I am getting so much space between the text. I am using form-group. I don't know why. I am new to Bootstrap.
Code:
<div class="wrapper">
<asp:Panel ID="Panel1" runat="server">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div align="left" style="padding-bottom:10px;margin-left:50px;"><b>Exhibitors Passport</b> </div>
</div>
<div class="col-md-6"></div>
<div class="clearfix"></div>
</div>
</div>
<div class="container-fluid">
<section class="container">
<div class="row-fluid">
<div class="form-group col-md-12">
<div class="col-md-6">
<h3 style="color:#fc2630;font-size:14px;padding-bottom:15px;">
Please Submit Exhibitor Passport Details :</h3>
</div>
</div>
</div>
<div class="row-fluid">
<div class="form-group col-md-12">
<div class="col-md-6" style="color:#5a5b5b;font-size:14px;font-weight:bold;">
Delegate Details - 1:
<asp:CheckBox ID="chk1_" runat="server" Checked="True" Visible="False" />
</div>
<div class="col-md-6"></div>
</div>
</div>
</section>
</div>
</asp:Panel>
</div>
I think it's not because of Bootstrap. You have some padding in your style attributes.
http://codepen.io/anon/pen/bMbEbO
I'm using bootstrap v.3 and I'm trying to get the item in the same line using form-horizontal class, however I'm not able to get this work, see the code below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid one-half">
<div class="form-horizontal">
<div class="form-group">
<img id="footer-logo" src="#" alt="">
<div id="copyright">
<p>All Rights Reserved.</p>
</div><!--/#copyright-->
<div id="credit">
<p>Powered by WordPress.</p>
</div><!--/#credit-->
</div>
</div>
</div>
what am I doing wrong? Thanks.
.form-group{
display: inline-flex;
}
Is this what you are looking for?
<form class="form-inline">
<div class="form-group">
<img id="footer-logo" src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business.jpg" alt="">
</div>
<div class="form-group">
<div id="copyright">
<p>All Rights Reserved.</p>
</div><!--/#copyright-->
</div>
<div class="form-group">
<div id="credit">
<p>Powered by WordPress.</p>
</div><!--/#credit-->
</div>
</form>
Ref:Forms Bootstrap
Use style="display:inline-block;"
<div class="grid one-half">
<div class="form-horizontal">
<div class="form-group" >
<img id="footer-logo" src="#" alt="" style="display:inline-block;">
<div id="copyright" style="display:inline-block;">
<p>All Rights Reserved.</p>
</div><!--/#copyright-->
<div id="credit" style="display:inline-block;">
<p>Powered by WordPress.</p>
</div><!--/#credit-->
</div>
</div>
</div>
Hi I am using twitter bootstrap on an web application for the first time and I would like to create on a page up to 6-8 well that occupy 6 columns on a large screen.I have managed to do just that I only have one problem.
If for example the height of the well on the right is higher then the well on the left , alot of space get's left unfilled.Here is what I mean:
In order to solve this problem I thought it was as simple of setting the margin-top and margin-bottom of the well container to 0 but it did not work.This is my html structure:
<section class="col-sm-6">
<div class="well overflow">
<div class="col-xs-8 reset-padding-left">
<h5><strong>About Me</strong></h5>
</div>
<div class="col-xs-4 text-right reset-padding-right">
<a class="btn btn-primary btn-edit"><i class="fa fa-pencil"></i> Edit</a>
</div>
<div class="col-xs-12 content-divider"></div>
<div class="col-xs-12 reset-padding-left">
<div class="col-xs-3 reset-padding-left">
<span>Birthday</span>
</div>
<div class="col-xs-9 reset-padding-right">
<p>15 November 1989</p>
</div>
</div>
<div class="col-xs-12 reset-padding-left">
<div class="col-xs-3 reset-padding-left">
<span>Gender</span>
</div>
<div class="col-xs-9 reset-padding-right">
<p>Male</p>
</div>
</div>
<div class="col-xs-12 reset-padding-left">
<div class="col-xs-3 reset-padding-left">
<span>Birth Place</span>
</div>
<div class="col-xs-9 reset-padding-right">
<p>Bacau, Romania</p>
</div>
</div>
</div>
</section>
<section class="col-sm-6">
<div class="well overflow">
<div class="col-xs-8 reset-padding-left">
<h5><strong>About Me</strong></h5>
</div>
<div class="col-xs-4 text-right reset-padding-right">
<a class="btn btn-primary btn-edit"><i class="fa fa-save"></i> Save</a>
</div>
<div class="col-xs-12 content-divider"></div>
<div class="col-xs-12 reset-padding-left reset-padding-right">
<div class="col-xs-3 reset-padding-left">
<span>Birthday</span>
</div>
<div class="col-xs-9 col-md-3 reset-padding-right add-margin-bottom">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option selected="selected">4</option>
<option>5</option>
</select>
</div>
<div class="col-xs-9 col-md-3 col-xs-offset-3 col-sm-offset-3 col-md-offset-0 col-lg-offset-0 reset-padding-right add-margin-bottom">
<select class="form-control">
<option>Dec</option>
<option selected="selected">Nov</option>
<option>Jan</option>
<option>Feb</option>
<option>Mart</option>
</select>
</div>
<div class="col-xs-9 col-md-3 col-xs-offset-3 col-sm-offset-3 col-md-offset-0 col-lg-offset-0 reset-padding-right add-margin-bottom">
<select class="form-control">
<option>1987</option>
<option>1987</option>
<option>1987</option>
<option selected="selected">1986</option>
<option>1985</option>
</select>
</div>
</div>
<div class="col-xs-12 reset-padding-left reset-padding-right add-margin-bottom">
<div class="col-xs-3 reset-padding-left">
<span>Gender</span>
</div>
<div class="col-xs-9 reset-padding-right">
<select class="form-control">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="col-xs-12 reset-padding-left reset-padding-right add-margin-bottom">
<div class="col-xs-3 reset-padding-left">
<span>Birth City</span>
</div>
<div class="col-xs-9 reset-padding-right">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-xs-12 reset-padding-left reset-padding-right">
<div class="col-xs-3 reset-padding-left">
<span>Birth Country</span>
</div>
<div class="col-xs-9 reset-padding-right">
<input type="text" class="form-control" />
</div>
</div>
</div>
</section>
I only added the structure for the first two wells if I need to add more I'l add the reset.Is there any way to make the third well come imediatly under the first?
if you set to each even column .col-sm-6 float:right instead of float:left it seems to be working
.col-sm-6:nth-child(even) {
float:right;
}
Try to look at "inspect element" to know where the space is coming from. It's probably some padding or margin.
You could add an own class to the element with the padding/margin and give that class an other or a negative margin.
Having some nasty issues with IE6 and reading my div form layout, the html:
<form id="brochureForm" name="brochureForm" action="/how-it-works/request-a-brochure/" method="post">
<div class="row">
<div class="label">
<label for="szName">Name</label>
</div>
<div class="field">
<input type="text" name="szName" id="szName" value="#form.szName#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szCompanyName">Company Name</label>
</div>
<div class="field">
<input type="text" name="szCompanyName" id="szCompanyName" value="#form.szCompanyName#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szAddress">Address</label>
</div>
<div class="field">
<input type="text" name="szAddress" id="szAddress" value="#form.szAddress#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szTown">Town/City</label>
</div>
<div class="field">
<input type="text" name="szTown" id="szTown" value="#form.szTown#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szPostcode">Postcode</label>
</div>
<div class="field">
<input type="text" name="szPostcode" id="szPostcode" value="#form.szPostcode#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szTelephone">Tel</label>
</div>
<div class="field">
<input type="text" name="szTelephone" id="szTelephone" value="#form.szTelephone#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szEmail">E-mail</label>
</div>
<div class="field">
<input type="text" name="szEmail" id="szEmail" value="#form.szEmail#" />
</div>
<div class="clear"></div>
</div>
<div class="submitrow">
<input type="image" name="szSubmit" id="szSubmit" src="/images/form/submit.gif" class="submitRO" />
</div>
</form>
And then the CSS:
.row {width:314px;margin:0 0 8px 0;}
.row .label {width:103px;padding:3px 16px 0 0;float:left;text-align:right;}
.row .field {width:195px;float:left;}
.submitrow {width:314px;text-align:right;padding:3px 0 0 0;}
Working fine in IE8/7, Firefox, etc.
Also, as a rule of thumb when dealing with IE6, try adding display:inline to your floating divs
IE6 sometimes doesnt get margins and paddings right. Try to reduce them a few pixels.