Bootstrap - Reducing spacing between form-controls like textbox and label - javascript

I'm developing the a .NET(C#) MVC web-application.
I have the following bootstrap drop-down menu.
I'm trying to achieve the following two things :
1) I'm trying to reduce the spacing between a label and it's respective text-box. I tried using "col-xs-1 col-form-label" instead of "col-xs-2 col-form-label" but then the textbox overlapped the label.
2) I want to reduce the height of the textbox.
How can I achieve these?
here's my cshtml code :
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span></button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Click To Expand"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font:94% 'v', sans-sarif;background-color:#FAFAFA">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtChopRequestNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
#*#Html.TextBox("name",null, new { id = "txtCreatedBy", style = "width:156px;" })*#
</div>
</div>
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtChopper" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtManager" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtLeagalApprover" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
</div>
//and so on
</form>
</div>
</div>
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000" data-toggle="tooltip" title="Clear All Search Parameters">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
</div>
</div>
And here's my CSS code :
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}

I'm trying to reduce the spacing between a label and it's respective text-box.
Give your texboxes a css class (pull-left or whatever you want to call it) and then use css to pull the textboxes to the left.
.pull-left {
margin-left: -20px; /* Try with different values until you are happy */
}
I want to reduce the height of the textbox.
Try using padding and line-height and play with the numbers until you are happy with the height:
input[type="text"]{ padding: 20px 10px; line-height: 28px; }
The above will apply 20px to top and bottom and 10px to left and right. Here are some other ways:
padding: 20px 10px 20px 10px; /*top right bottom left*/
Finally make sure these margins play well when you are changing the size of the screen. If it looks good on big screen, it may not look good on smaller screens so choose something which will look good across all screens.

Related

Showing / Hiding Div With jQuery

I'm using toggle() but it's not working. My script is in the footer:
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").toggle();
});
});
or I've also tried addClass():
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
Basically I'm just trying to toggle between showing and hiding the form divs.
When product-suggestion-form-container is clicked on, form-div-top should show.
When contact-us-form-container is clicked on, form-div-bottom should show.
Then they should hide when those divs are clicked on again.
Shouldn't clicking on product-suggestion-form-container cause form-div-top to become active and therefore to display: flex? Not sure why nothing's happening.
I was just getting the jQuery from here, but ideally I'd like to add a smooth transition and whatever other best practices you might suggest for doing this.
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
.form-div-outer {
margin: 10px 0;
}
.form-div-top,
.form-div-bottom {
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
/*initial display*/
.form-div-inner-top {
display: none;
}
.form-div-inner-bottom {
display: none;
}
.form-div-inner-top:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-div-inner-bottom:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-input {
margin: 10px 0;
padding: 5px;
border: none;
background-color: #ffffff;
width: 100%;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
<div class="form-div-outer">
<div class="contact-us-form-container">
<span class="form-title">Contact Us Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-bottom">
<form class="form-div-inner-bottom">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group input-group-contact-reason">
<div class="contact-reason-container">
<ul class="radiolist">
<li>
<input class="radio" type="radio"><label>Order question</label>
<input class="radio" type="radio"><label>Website feedback</label>
<input class="radio" type="radio"><label>Trouble finding product</label>
</li>
</ul>
</div>
</span>
</form>
</div>
</div>
It seems you have forgot .s in your code to access the data.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
});
});

No color on hover

I can't seem to figure out why the remaining 3 tabs don't have colors when I hover my mouse. The first 3 are working properly but the remaining 3 are not. I only made adjustments on their margins and nothing more. I just like to put code on my Blogger blog because its quite helpful. Below are the codes I'm having problems with. They are working on the console but when I put it on my blog the hover effect is not there.
p {
margin-top: -30px;
}
.ctc-txt.bg_ffffff.br6 {
width: 642px;
height: 200px;
}
.clr-txt {
top: 160px;
}
.text-center.ct-case.mb10 {
display: flex;
align-items: right;
justify-content: center;
margin-top: -20px;
margin-left: 120px;
}
.counter {
margin-left: -14px;
}
#copyStr {
margin-left: 260px;
margin-top: -10px;
}
#text {
top: -30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/Dieffer/test1/master/mycss.css">
<form method="post" id="text" action="">
<p class="">
Type or Paste your text here to change text case
</p>
<div class="relative">
<textarea class="ctc-txt bg_ffffff br6" name="form_content" id="form_content" onclick="cont()"> </textarea>
<img class="clr-txt" onclick="resete()" src="https://smallseotools.com/asets/images/cleartext.svg">
</div>
<div class="col-lg-12 col-sm-12 pn pt5 pb5">
<div class="button_box h-a">
<div class="counter">
<label>Character Count: <span id="cc"> 0 </span></label>
<label>- Word Count: <span id="wc"> 0 </span></label>
</div>
</div>
</div>
<div class="text-center ct-case mb10" id="ctc_button_box">
<input name="toggle" class="button ctc-btn br6" type="button" id="toggle" value="tOGGLE cASE">
<input name="sentence" class="button ctc-btn br6" type="button" id="sentence" value="Sentence case">
<input name="lower" class="button ctc-btn br6" type="button" id="lower" value="lower case">
<input name="" class="button ctc-btn br6" type="button" id="upper" value="UPPER CASE">
<input name="capitalized" class="button ctc-btn br6" type="button" id="capitalized" value="Capitalize Word">
<input name="alternating" class="button ctc-btn br6" type="button" id="alternating" value="aLtErNaTe cAsE">
</div>
</form>
Have you tried to clean your browser-cache?
Since the Code works just fine, maybe that could cause the problem.

JQuery div.show() is resizing my fields

I have a hide div that when I click on a checkbox, that div shows. My problem is that when the div shows the height of input fields are too small.
My div:
<div id="payment" style="display: none;">
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Credit Card</label>
<div class="col-lg-2" id="sq-card-number"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">CVV</label>
<div class="col-lg-1" id="sq-cvv"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Expiration Date</label>
<div class="col-lg-1" id="sq-expiration-date"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Postal Code</label>
<div class="col-lg-1" id="sq-postal-code"></div>
<input type="hidden" id="card-nonce" name="nonce">
</div>
<div class="form-group">
<br />
<br />
<div class="col-xs-12 col-xs-offset-1">
<button id="applyApplication" name="applyApplication" type="button" onClick="submitApplication();" class="btn btn-success center-block" disabled>Submit Application</button>
<br />
<br />
</div>
</div>
</div>
The CSS for the input fields:
<style type="text/css">
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
}
.sq-input--focus {
outline-width: 5px;
outline-color: #70ACE9;
outline-offset: -1px;
outline-style: auto;
}
.sq-input--error {
outline-width: 5px;
outline-color: #FF9393;
outline-offset: 0px;
outline-style: auto;
}
</style>
And I control to display that div or not by JQuery:
$('#agree').change(function() {
if($(this).is(":checked")) {
$("#payment").show();
$("#payment").scrollTop($("#payment").prop("scrollHeight"));
} else{
$("#payment").hide();
}
});
Here is the div that there is my checkbox:
<div class="form-group">
<div class="col-xs-12 col-xs-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" id="agree" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
<br />
<br />
</div>
</div>
Everything is working fine. When my checkbox is checked it display the div, but the input fields are with height very small. BTW, if I open the firebug, the input height adjust automatically. Does anyone know why?
Thanks
Try to fix the height in your css :
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
height: 20px;
}
Here is a Fiddle exemple : https://jsfiddle.net/qboena51/

Make a form responsive into a div

I am trying to make a form responsive and load it into a div, so that the form takes the shape of the div without over floating. I have applied row-fluid to the form element and the div and it still not responsive as shown
var div_container = document.getElementById('active-container');
var users = '';
var formy = '';
for (var i = 0; i < json.length; i++) {
users += '<span style="font-size:27px;"><strong>' + json[i].email + '</strong></span><br/>' + '<form class="row-fluid" style="margin-top:0px;" method="post" action="search"><input class="row-fluid" type="text" value="'+json[i].access+'" name="searchName" id="searchName" readonly/><button class="btn btn-success" type="submit"><i class="icon-circle-arrow-right icon-large"></i>FETCH</button></form>' + '<hr>';
}
EDITTED:
This is the div for the containing form tag
<div style="overflow: auto; overflow-x: auto; height:420px; color:#4b4f54; font-size:13px;" id="active-container">
</div>
Please how do I make the responsive into the div and attach the button to the right of the input type
Why not use something as simple as this. No JS needed.
Updated: inline style added. Also you can adjust by % within the inline styling, which I have found useful.
The markup
<div class="container">
<h2>Form name</h2>
<form>
<div class="form-group">
<input style="display:inline; width:75%" type="email" class="form-control" id="email" placeholder="Enter email">
<button style="width:24%"type="submit" class="btn btn-success pull-right">Fetch</button>
</div>
</form>
</div>
The CSS: adjust max-width as needed or remove altogether.
.container {
margin: 20px;
padding: 10px 10px;
max-width: 500px;
background: #FDFDFD;
box-shadow: 2px 2px #D8D8D8;
}
JsFiddle Demo
Float left Demo
use .form-inline to make form responsive , to make button on right use .pull-right class.
If you want to have input and button just aside each other just use this :-
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-sm-4 control-label">DOB - Age:</label>
<div class="col-md-7 col-xs-4 input-group">
<input type="text" id="" class="form-control" name="" style="margin-left:15px;" value="" tabindex="-1" />
<span class="input-group-btn" style="">
<button class="btn btn-success" type="submit"><i class="fa fa-angle-right" style="margin-left:15px"></i>Button</button>
</span>
</div>
</div>
</div>
Add class .form-inline to the element

Elements in bootstrap filterbar not correctly sized

I'm building a filter on top of my grid. I defined a custom filter class. In this filterclass I also try to incorperate a checkbox that is in the same style as my inputbox. For some reason I cannot get it the same size as the rest of my elements. Below the fiddle of what I'm doing. Can someone point me out what I'm doing wrong?
http://jsfiddle.net/52VtD/6763/
<div class="FilterBar">
<div>
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon ">Set date</span>
<input type="text" class="form-control" />
<span class="input-group-addon">to</span>
<input type="text" class="form-control" />
</div>
</div>
<div>
<div class="input-group">
<span class="input-group-addon ">Group Flocks</span>
<span class="input-group-addon">
<input type="checkbox"/>
</span>
</div>
</div>
<div class="pull-right">
<button type="button" class="btn btn-warning pull-right">Filter</button>
</div>
.FilterBar {
position: relative;
display: table;
}
.FilterBar > div {
display: table-cell;
padding-right: 8px;
vertical-align: top;
}
.Toolbar .btn-group, .Toolbar .btn-group-vertical {
vertical-align: inherit;
}
.form-control has line-height: 1.42857;
.input-group-addon has line-height: 1;
See http://jsfiddle.net/52VtD/6766/ I added
.input-group-addon {
line-height: 1.42857;
}
U can add class "form-control" to Group Flocks and add one more class .some with line-height: 20px;
HTML
<div class="input-group">
<span class="input-group-addon form-control some">Group Flocks</span>
<span class="input-group-addon"> <input type="checkbox"/> </span>
</div>
And CSS:
.some {
line-height: 20px;
}
http://jsfiddle.net/52VtD/6764/ this is not the best solution
u can try to put all your line in div with class="row" and give all tabs some sizes like .col-xs-4

Categories