I'm having a problem with my site which I'm doing for Freecodecamp. Everything works perfectly on desktop but it's been a nightmare on iOs. I have a few issues, but the main issues are that my last page (contact page) is not showing. iOs is cutting about 75% off from the bottom of the page, AND I can't get what little of the form that I can see to be clickable. (I've only tried this on my iPhone 7+ so far) Can anyone help please? I'll post the markup for that particular page below, but I'll also post the link to the whole site on Codepen which may help.
<div id="parralax4" class="img-responsive">
<div class="container">
<div class="row formtitle">
<div class="col-sm-3">
<h2 class="formtitle1 raleway">Contact Us</h2>
<p class="raleway">Please use the contact form...
</div>
<form id="xform">
<div class="row">
<div class="form-group col-sm-4">
<label for="name"></label>
<input type="name" class="form-control" id="name"
required placeholder="Enter name">
</div>
</div>
<div class="row">
<div class="form-group col-sm-4">
<label for="email"></label>
<input type="email" class="form-control" id="email"
required placeholder="Enter email">
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="Message"></label>
<textarea class="form-control" rows="5" id="message"
required placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<button type="submit" class="btn btn-md btn-success">Submit</button>
</form>
</div>
</div>
My CodePen
Any help greatly appreciated. I've been at this for hours trying to sort this.
Got this sorted. After a process of elimination, I hosted the site directly outside of Codepen, and it showed perfectly in Ios. So it was an issued within Codepen along with iOs.
Related
The contact form on my website doesn't work on phones and it supposed to open a program like gmail or mail app to send a message to me or just send right away.
I don't really know how to search for this problem but already tried to find a solution on multiple forums and google but couldn't find any :(
hope you guys know how to help me out
my own website
(still learning html and css so please try keep it simple if you know a solution)
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center animateup">
<h2>Contact</h2>
</div>
</div>
<div class="gap-50"></div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 animateup">
<form role="form" action="mailto:jacootje14#gmail.com" method="post" enctype="text/plain">
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" placeholder="Name">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<label for="email">Email Address</label>
<input class="form-control" type="email" name="email" id="email" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<label for="message">Message</label>
<textarea placeholder="Message" class="form-control" name="message" id="message" rows="5"></textarea>
</div>
</div>
<br>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-lg btn-success">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
Comment:
Alright so now the mail works on mobile but now i have a new issue with the form because i cant type a message in the form before it opens outlook mobile app. (this issue also occurs on pc)
thanks in Advance!
I am using Bootstrap v4.0.0-alpha.6. The textbox that is supposed to look like the this doesn't appear the same when I tried to place one in my login form. This is how it looks like in chrome. Refer the code below:
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>
</div>
</div>
</div>
Also there is another issue, the above code is supposed to place the label and textbox on same line but the textbox is placed below the label. I can't find any solution for this on the web.
I'm trying to create a simple form using Bootstrap 3 where people can sign up for a small event.
On this form, they should also be able to indicate if they want one or more T-shirts, and which size(s) they want to order.
I'm not new to HTML, CSS and Javascript, but I am quite new to Bootstrap. Also while I'm a programmer by day, I'm mainly writing REST services so my design skills are fairly limited.
Using w3schools and other tutorial sites I have arrived at this:
<div class="form-group form-group-sm">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
<label class="col-xs-1" for="shirt-s">S</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-s">
</div>
<label class="col-xs-1" for="shirt-m">M</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-m">
</div>
<label class="col-xs-1" for="shirt-l">L</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-l">
</div>
<label class="col-xs-1" for="shirt-xl">XL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xl">
</div>
<label class="col-xs-1" for="shirt-xxl">XXL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xxl">
</div>
<div class="col-xs-2"> </div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
See jsfiddle:
https://jsfiddle.net/tonvanbart/83nbny8h/5/
Not the prettiest in the world, but I can live with it. My main question is: why is the 'submit' button not in it's own row but inlined after the input fields? At first I thought I had to get to a total of 12 columns and I only had 10. But adding a 2-column div with a non-breaking space didn't help, and adding a <br> tag had no effect either.
Also, while I can live with this (it's for an informal, small group of people who know each other well) if anybody could give me a pointer on how to get the T-shirt size indicators closer to their respective input fields, that would be great. Thank you in advance.
Feel free to let me know if you need more information.
Here's the fixed code:
https://jsfiddle.net/ccx9x7om/1/
I added the following CSS
.row .form-group label, .row .form-group input {
display: inline-block;
}
.row .form-group input {
width: 50%;
}
button {
margin: 25px;
}
In order to use bootstrap's columns properly, you need to wrap them in a row, and wrap all rows inside either a .container or a .container-fluid. I moved the labels inside their respective .col-xs-2 then wrapped everything in the needed aforementioned divs.
Another way you could do this is by nesting your columns as to split the form in half which will greatly reduce the screen space it's using and bring your inputs closer while remaining responsive across viewports.
This is simply following the container/row/column layout that Bootstrap generally follows. See Nesting Columns.
*Note: The form-group class isn't necessary, it simply adds padding around your inputs.
See working Snippet at FullPage.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<h2>Order a Shirt</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Name</label>
<input type="password" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email address (never shown)">
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-s">S</label>
<input class="form-control" type="text" id="shirt-s">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-m">M</label>
<input class="form-control" type="text" id="shirt-m">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-l">L</label>
<input class="form-control" type="text" id="shirt-l">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xl">XL</label>
<input class="form-control" type="text" id="shirt-xl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xxl">XXL</label>
<input class="form-control" type="text" id="shirt-xxl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label>Order Now</label>
<button type="submit" class="btn btn-success btn-block btn-submit">Submit</button>
</div>
</div>
<div class="col-xs-12">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
</div>
</div>
</div>
</div>
</form>
</div>
I am using a bootstrap theme for a personal website. In the contact section I am trying to replace a form (that comes with the theme) with an image of where I live.
The problem is that the image does not render in the centre of the page (the form does):
Here is the HTML for the form:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form id="contact-form" role="form">
<div class="ajax-hidden">
<div class="form-group wow fadeInUp">
<label class="sr-only" for="c_name">Name</label>
<input type="text" id="c_name" class="form-control" name="c_name" placeholder="Name">
</div>
<div class="form-group wow fadeInUp" data-wow-delay=".1s">
<label class="sr-only" for="c_email">Email</label>
<input type="email" id="c_email" class="form-control" name="c_email" placeholder="E-mail">
</div>
<div class="form-group wow fadeInUp" data-wow-delay=".2s">
<textarea class="form-control" id="c_message" name="c_message" rows="7" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-block wow fadeInUp" data-wow-delay=".3s">Send Message</button>
</div>
<div class="ajax-response"></div>
</form>
</div>
</div><!-- .row -->
Form in Chrome dev tools:
Here is how my code looks:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<img src="assets/images/staticmap2.png">
</div>
</div><!-- .row -->
Image in Chrome dev tools:
I have tried changing the size of the image and different offset sizes to no avail. I'm at a loss how to resolve this - can anyone help?
Adding the class center-block to your image will apply margin:0 auto; and should center the image in it's parent div.
<img class="center-block" src="assets/images/staticmap2.png">
I am having trouble with boostrap 3 causing deactivated/read-only inputs in desktop mode. Once you resize the browser window to a smaller size bootstrap activates the inputs to read-write. I am clueless why, of course they should be activated on all devices. Any help will be appreciated!
I tried having the .form-group arround the .col-sm-x .col-md-x .col-lg-x divs and a few other tweaks, the inputs only enable once they are completely outside of the .col-sm-x .col-md-x .col-lg-x, which destroys the layout. Is there any way of making this layout work in bs3?
Here's a fiddle, problem shows up in Safari, Firefox and Chrome:
http://jsfiddle.net/Au5vM/3/
The form code looks like this, I am not so familiar with bs3 forms and grid, maybe someone might spot the problem:
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2">
<div class="form-group">
<label for="inputAcademicTitle">Degree</label>
<input type="text" class="form-control" id="inputAcademicTitle" placeholder="Titel" value="Resizing causes me to disable">
</div>
</div>
<div class="col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="inputFirstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="Your first name" value="Resizing causes me to disable">
</div>
</div>
<div class="col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="inputLastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="Your last name" value="Resizing causes me to disable">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label for="inputMotto">Comment</label>
<textarea class="form-control" rows="3" id="motto" placeholder="Your comment">textareas are not affected</textarea>
</div>
</div>
</div>
</div>
</form>
They're not disabled. The problem is that you're nesting class="row". You can verify this by opening your browser's web tools, you'll see that the row containing the textarea overlaps the textboxes.
</div>
<div class="row">
should become
</div>
</div>
<div class="row">
And
</div>
</form>
should become
</form>