I have been trying to position a button to right right of another button. above is an example showing you what I mean.
I built it using Bootstrap. They have a navbar feature which will do the layout for me. Great feature, but I do not know why it keeps making a new row. I have tried right: 0 and positioning but none of that would work. It will stay in that same spot every time. I currently do not know what is causing this error. Thank you for your time!
My HTML looks like this:
<div id="navbar" class="navbar" style="position: relative; width: 93%;left: 3%;">
<div class="navbar-inner">
<div class="brand" style="padding-left: 0%;">
<a href="www.investorsfortunes.com">
<!-- <img class="img-polaroid" src="Images/logo.jpg"> -->
Investorsfortunes.com
</a>
</div>
<ul class="nav" style="text-align: center">
<li class="divider-vertical">Investors</li>
<li class="divider-vertical">Deals</li>
<li class="divider-vertical">Attornies</li>
<li class="divider-vertical">Appraisers</li>
</ul>
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<button type="submit" class="btn floatRight">Sign in</button>
</form>
<!-- SIGN-UP AREA -->
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn btn-primary floatRight" data-
toggle="modal">Sign-Up</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">x</button>
<h3 id="myModalLabel">Sign-Up</h3>
</div>
<div class="modal-body">
<form class="well span8">
<div class="row">
<div class="span3">
<label>First Name</label>
<input type="text" class="span3" placeholder="Your First Name">
<label>Last Name</label>
<input type="text" class="span3" placeholder="Your Last Name">
<label>Email Address:</label>
<input type="text" class="span3" placeholder="Your email address">
<label>Password</label>
<input type="password" id="inputPassword" placeholder="Password">
<label>Retype Password</label>
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"">Close</button>
<button class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
Form is a block element is HTML.
either set the Sign Up inside the form or set the style of the form to be inline-block
<form class="form-inline" style="display:inline-block;">
You are using twitter bootstrap, so maybe you can use
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
Just put your code inside the form. Like that...
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<button type="submit" class="btn floatRight">Sign in</button>
<!-- SIGN-UP AREA -->
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn btn-primary floatRight" data-
toggle="modal">Sign-Up</a>
</form>
Related
I have written a web page which contains a table like this:
RFP Table
When the user clicks on an RFP#, a modal popup will appear that will look like this:
Modal Popup
When the user has completed and submitted the form, a download link will appear wherein they may download a pdf of the RFP.
My problem is that the other modals do not function properly. The first modal works fine: after completing and submitting the form, the download button appears, and email gets sent. I'm suspecting that it may be the way I implemented the modals: I just made one modal at first, copy and paste to make several more then change the id and data-target. By the way, I'm doing this on site hosted on A2Hosting.
Here's my code:
<table class="table table-bordered" style="text-align:center; background-color:aliceblue">
<thead>
<tr style="text-align:center">
<th scope="col">RFP #</th>
<th scope="col">Description of RFP</th>
<th scope="col">End Date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-weight:700">RFP19-CHCC-GSS-015</td>
<td>Pest Control Services</td>
<td>07/24/2019</td>
</tr>
<tr>
<td style="font-weight:700">RFP19-CHCC-CGC-CCP-017</td>
<td>Crisis Counseling Program</td>
<td>07/23/2019</td>
</tr>
</tbody>
</table>
<!-- Modals Start-->
<div id="modal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div>
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="text-align:center; margin-top:20px">
Contact Us
</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<p> Send your message in the form below and we will get back to you as early as possible. </p>
<div class="form-group">
<label for="name"> Name:</label>
<input type="text" class="form-control" id="name" name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Email:</label>
<input type="email" class="form-control" id="email" name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="phone"> Phone Number:</label>
<input type="tel" class="form-control" id="phone" name="phone" required maxlength="50">
</div>
<div class="form-group">
<label for="message"> Message:</label>
<textarea class="form-control" type="textarea" name="message" id="message" placeholder="Your Message Here" maxlength="6000" rows="7"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h3>Sent your message successfully!</h3>
<a href="docs/RFP/test.pdf" download="RFP19.pdf">
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</a>
</div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Sorry there was an error sending your form. </div>
</div>
</div>
</div>
</div>
<div id="modal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div>
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="text-align:center; margin-top:20px">
Contact Us
</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<p> Send your message in the form below and we will get back to you as early as possible. </p>
<div class="form-group">
<label for="name"> Name:</label>
<input type="text" class="form-control" id="name" name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Email:</label>
<input type="email" class="form-control" id="email" name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="phone"> Phone Number:</label>
<input type="tel" class="form-control" id="phone" name="phone" required maxlength="50">
</div>
<div class="form-group">
<label for="message"> Message:</label>
<textarea class="form-control" type="textarea" name="message" id="message" placeholder="Your Message Here" maxlength="6000" rows="7"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h3>Sent your message successfully!</h3>
<a href="docs/RFP/test.pdf" download="RFP19.pdf">
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</a>
</div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Sorry there was an error sending your form. </div>
</div>
</div>
</div>
</div>
Got it working. I did not realize that I had to change the id's of some of the modal's components.
I use bootstrap with angular, and I disabled bootstrap's validation, angular still doesn't work. It seems that I already set everything.
My code likes below, every input's validation didn't.
<form novalidate name="new_people" ng-if="is_editting_newpeople" class="form-horizontal" role="form" ng-submit="save_new_people()">
<div class="input-group">
<div class="input-group-addon">True Name</div>
<input class="form-control" name="realname" type="text" ng-model="editting_people.realname" autofocus required>
</div>
<div class="input-group">
<div class="input-group-addon">Nickname</div>
<input type="text" name="nickname" class="form-control" id="nickname" ng-model="editting_people.nickname" required>
</div>
<div class="input-group">
<div class="input-group-addon">Mobilenumber</div>
<input type="text" class="form-control" id="mobile" name="mobilenumber" ng-model="editting_people.mobilenumber" required ng-minlength=11>
</div>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">{{ editting_people.idclass.name }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="id_class in IDCLASSES">
<a ng-click="set_id_class(id_class)">{{ id_class.name }}</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control" ng-model="editting_people.idnumber" required name="idnumber">
</div>
<!-- /input-group -->
<br>
<input class="btn btn-primary" type="submit" value="Submit" />
<input class="btn btn-default" value="取消" type="button" ng-click="cancel_new_people()" />
</form>
What do you mean by input doesn't work?
Post your code of related controller please, because it is not clear what validation are you doing. If you have novalidate you should organize validation in your angular controller or HTML, e.g.:
<div ng-show="editting_people.realname.length<4">
Any error message here.
</div>
i am newbie.
I am Creating a button on my homepage,once clicked it shows a modal showing the signin form and i am making a separate html page for my Modal.
Here is my Main Code where the Button is placed in my homepage.
<button id="btn1"><a href="signin.html" class="btn btn-success"data-toggle="modal"data-target="#mymodal"type="button">
<span class="glyphicon glyphicon-edit">
</span> Sign In</a>
</button>
In signin.html
<div class="modal"id="mymodal" >
<h3 class="modal-header">
<h1>
We Are Glad you are Here!
</h1>
</div>
<div class="modal-body">
<div class="container">
<form class="form-signin">
<h6 class="form-signin-heading">
Please sign In</p>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-sm btn-primary" type="submit" data-toggle="modal">Sign in</button>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"aria-hidden="true">Close</button>
</div> </div>
Issue
Modal ain't popping up on same page but it's going on next page.How should i fix it?so that my Signup form remains on the front page.
Working Example
I think the target element with the id mymodal should be in the same page with button, try to place <div class="modal"id="mymodal" ></div> after the button :
<button id="btn1">
<a href="signin.html" class="btn btn-success" data-toggle="modal"
data-target="#mymodal"type="button">
<span class="glyphicon glyphicon-edit"></span> Sign In
</a>
</button>
<div class="modal"id="mymodal" ></div> //place the target div after button
Hope this helps.
It seems that my submit button is not activating the ng-click angular directive and I cannot figure out why. It seems that every other person that had this problem didn't include their submit button inside of their form, and I'm 99% sure I did that.
<div class="modal fade" id="subModal" ng-controller="SubscriberController" ng-controller-as="subCtrl">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">× </span><span class="sr-only">Close</span></button>
<h2 class="modal-title">Subscribe</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="well">
<form ng-submit="console.log('submit')">
<div class="form-group">
<label for="subscriber-name" class="control-label"><strong>Name:</strong></label>
<input type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
</div>
<div class="form-group">
<label for="subscriber-email" class="control-label"><strong>Email:</strong></label>
<input type="email" class="form-control" ng-model="subCtrl.subData.email" placeholder="johndoe#example.com" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block"><i class='fa fa-envelope'></i> Subscribe</button>
</div>
<div re-captcha ng-model="subCtrl.subData.captcha"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to put something like
<input ng-model="myForm.email" type="email" class="form-control" id="subCtrl.subData.email" placeholder="johndoe#example.com" required>
and
<input ng-model="myForm.name" type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
into your inputs, and give your form a name attribute
<form name="myForm" ng-submit="submit()">
plnkr: http://plnkr.co/edit/KRmZkPS6t4ANmAHwTevQ
Looking at this doc: http://getbootstrap.com/components/#input-groups-buttons specifically the section called "Button Addons" to learn how to code a combination search box and button as illustrated there. I used the code in the example:
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Now, I want to make the text box and the button 'small' (-sm) or even extra small (-xs) but referring to the source css, and trying various permutations I can't get it to work.
Here is the closest I've gotten:
<div class="col-xs-3">
<form role="form" class="form-inline" action="/search_index/search/index.html">
<div class="input-group input-group-sm">
<input type="text" name="q" id="tipue_search_input" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-sm"
id="tipue_search_button" onclick="this.form.submit();">
find
</button>
</div>
</div>
</form>
</div>
Is this a hole in Bootstrap or a fix I can use?
In bs3 you can only use these 2 classes for input groups:
input-sm and input-lg
They work for me. This is how you use it:
<div class="input-group input-sm">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->