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
Related
I'm trying to use onclick code and style.display in js to hide a something and make a dive which it's display is none by default to get block and appear.
The first one won't hide and the other one won't appear!
The script file works fine, I have other things in js which work perfectly.
function showDiv() {
document.getElementById('chatbutton').style.display = "none";
document.getElementById('chatbox').style.display = "block";
}
<a href="" id="chatbutton" >
<div class="mychat text-center" onclick="showDiv()">
<p class="chattext">Chat Support</p>
</div>
</a>
<div id="chatbox" class="mychat_open text-center d-none">
<p class="chattext">Chat Support</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
</div>
.mychat_open{
width: 15vw;
height: 20vh;
background-color: black;
position: fixed;
bottom: 20px;
right: 20px;
color: white;
opacity: 0.8;
min-height: 28px;
}
Your JS works fine, but you have the onclick function inside an empy <a href=""> tag. You can either add a # to it like this <a href="#"> or change it to some other kind of element such as a <button> to keep the page from reloading when it is clicked.
You should toggle the "d-none" class for the element you want to show instead.
document.getElementById('chatbox').classList.remove('d-none')
If the goal is to make the chat box hidden initially, then you can set its display style property to display:none.
<div id="chatbox" class="mychat_open text-center d-none" style="display:none">
<p class="chattext">Chat Support</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
</div>
This will hide the chatbox until the user clicks the button. This works because the js changes the style.display property of the element with id 'chatbox' to block.
I've added a return false to the link to prevent a page reload
added a style rule to actually hide the box initially, so we can show it :)
(added the p to visually show it's the other box showing, not some hiccup.)
function showDiv() {
document.getElementById('chatbutton').style.display = "none";
document.getElementById('chatbox').style.display = "block";
}
<html>
<body>
<a href="" id="chatbutton">
<div class="mychat text-center" onclick="showDiv(); return false;">
<p class="chattext">Chat Support</p>
</div>
</a>
<div id="chatbox" class="mychat_open text-center d-none" style="display: none;">
<p class="chattext">Chat Support Box</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
</div>
</body>
</html>
Dear May be this will help you in your case
cancel the a string and add button like
<button onclick="myFunction()">Chat Support</button>
Add in your div with ID chatbox style display none,
<div id="chatbox" class="mychat_open text-center d-none" style=" display: none">
then add java
function myFunction() {
var x = document.getElementById("chatbox");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
your complete forma like this
<button onclick="myFunction()">Chat Support</button>
<div id="chatbox" class="mychat_open text-center d-none" style=" display: none">
<p class="chattext">Chat Support</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
<script>
function myFunction() {
var x = document.getElementById("chatbox");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
More details may you can find
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
The submit button is refreshing the page, which leads to showing elements, I don't want to be shown.
I tried having a preventDefault() function but then it wouldn't submit the form.
I tried it without but if I do so, the form would submit but the elements are still shown.
$(".signupbtn").click(function(e){
console.log("Sign up clicked");
document.getElementsByClassName("huhu")[0].style.display = "none";
document.getElementsByClassName("afterForm")[0].style.display = "block";
e.preventDefault();
console.log("Succes")
});
<!-- the output from the form -->
<div class="afterForm" >
<h3 id="output"/>
</div>
<!-- the submiting -->
<form class="modal-content" id="myForm" onsubmit="readForm()">
<div class="container">
<h1 >Order</h1>
<p>Please fill in this form to receive your meal. Required fields: *</p>
<hr>
<label for="email"><b>Email*</b></label>
<input type="text" placeholder="zyxzyx#domain.com" name="email" value="" required>
<label for="adr1"><b>Adress* (Housenumber, Street, City)</b></label>
<input type="text" placeholder="555, Zxy blvd, San zxy" name="adr1" value="" required>
<label for="adr2"><b>Adress* (ZIP, State)</b></label>
<input type="text" placeholder="00000, ZY" name="adr2" value="" required>
<p>By pressing "Order" you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn" >Order</button>
</div>
</div>
</form>
<!-- the ordering -->
<div class="huhu">
<h1 class="ord">Select your order:</h1>
<input onclick="firstIcon()" id="fIcon" type="image" src="https://dl.dropboxusercontent.com/s/kw6l23hm37kzqq8/sushi.png" />
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;vertical-align:middle" class="button">
<span>Next Step </span>
</button>
</div>
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
.signupbtn {
float: left;
width: 50%;
}
I except the class "huhu" to vanish and the class "afterForm" to show after the order button is clicked. If don't fill in the form, click Order and then cancel, the elements hide but don't show.
Is there an other solution than preventDefault() or is the solution easier than I thought?
I want to append child to a div.
<div class="d-flex quantityReceived" id="quantityReceived">
<button type="button" class="btn btn-info changeValue" onclick="allOrderType()"><div id="spinner"><i class="fas fa-caret-down"></i></div></button>
<input name="order" class="typeahead orderType form-control" type="text" id="allOrderType" aria-describedby="Incomplete Orders" placeholder="Incomplete Orders">
</div>
Here is my javascript to append to the id quantityReceived
console.log(a)
document.getElementById("quantityReceived").appendChild(a);
The element a is a combination of elements like this which I can see in the google console.
<div id="autocomplete-list" class="auocomplete-items>
<div>
"Main"
<input type="hidden" value="main">
</div>
<div>
"Sub"
<input type="hidden" value="Sub">
</div>
</div>
However, when I inspect the parent div with id quantityReceived, I do not see the child element a being appended. I am not sure why this is happening
The html that you're attempting to append is incorrect.
You need to close the input, so it should look like this:
<div id="autocomplete-list" class="auocomplete-items>
<div>
"Main"
<input type="hidden" value="main"/>
</div>
<div>
"Sub"
<input type="hidden" value="Sub"/>
</div>
</div>
You can then check the result
console.log(document.getElementById("quantityReceived"));
At first glance, and just taking a guess since your example is lacking in detail, but I would guess that a isn't actually a thing to append correctly. So as a proof of concept to maybe trigger a light bulb to you on your issue;
const child = document.createElement('aside');
document.getElementById('test1').appendChild(child);
div {
height: 5rem;
width: 10rem;
border: red 1px dashed;
padding: .5rem;
margin: 1rem auto;
}
div aside {
height: 1rem;
width: 3rem;
border: green 3px dotted;
padding: .5rem;
margin: 0 auto;
}
<div id="test1"></div>
Besides that your HTML-to-be-appended is invalid, I think it should not be a problem (if indeed that HTML is a DOM node and not a string!), see:
let a = document.createElement('div');
a.setAttribute('class', 'autocomplete-items');
a.setAttribute('id', 'autocomplete-list');
a.innerHTML = `
<div>
Main
<input type="hidden" value="main" />
</div>
<div>
Sub
<input type="hidden" value="sub" />
</div>
`;
document.getElementById("quantityReceived").appendChild(a);
<div class="d-flex quantityReceived" id="quantityReceived">
<button type="button" class="btn btn-info changeValue" onclick="allOrderType()">
<div id="spinner">
<i class="fas fa-caret-down"></i>
</div>
</button>
<input name="order" class="typeahead orderType form-control" type="text" id="allOrderType" aria-describedby="Incomplete Orders" placeholder="Incomplete Orders" />
</div>
I am seeing this weird button behavior (the text on the button becomes near invisible) in my bootstrap button when I do a mouse hover on it.
This is my markup (Salesforce VF page with bootstrap)
<apex:page >
<head>
<apex:stylesheet value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/css/bootstrap.min.css')}"/>
<apex:includeScript value="{!$Resource.jq}"/>
<apex:includeScript value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/js/bootstrap.min.js')}"/>
<style>
.red{
color:red;
}
.form-area
{
//background-color: #FAFAFA;
background-color:#77F2F2;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
#submit
{
//color:#BF99E5;
font-family: "Helvetica";
border-radius:10px;
padding:10px;
}
</style>
<script>
j$ = jQuery.noConflict();
j$(document).ready(function(){
//alert("test");
//j$('#submit').hover(function(){alert('thisissdfsdfh');});
j$('#characterLeft').text('140 characters left');
//j$('#btnSubmit').focus(function(){alert('sdfsdf');});
j$('#message').keydown(function () {
var max = 140;
var len = j$(this).val().length;
if (len >= max) {
j$('#characterLeft').text('You have reached the limit');
j$('#characterLeft').addClass('red');
j$('#btnSubmit').addClass('disabled');
}
else {
var ch = max - len;
j$('#characterLeft').text(ch + ' characters left');
j$('#btnSubmit').removeClass('disabled');
j$('#characterLeft').removeClass('red');
}
});
});
</script>
</head>
<apex:form >
<div class="container">
<div class="col-md-10">
<div class="form-area">
<br />
<h3 style="margin-bottom: 25px; text-align: left;">Add New Contact</h3>
<br />
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required="true"/>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe" aria-hidden="true"></i></span>
<input id="email" name="email" class="form-control" placeholder="Email" required="true" type="text"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span>
<input id="tel" name="tel" class="form-control" placeholder="Phone Number" required="" type="text"/>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required="true"/>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
</div>
<center> <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" >Submit Form</button> </center>
</div>
</div>
</div>
</apex:form>
</apex:page>
In the last line in HTML if I remove the attribute "class="btn btn-primary pull-right" from button tag then the behavior is ok.
When I do a mouse hover it looks like below :
When NOT mouse hover it looks fine :
Can someone tell me what is wrong ?
Try this in your css,
#submit:hover, #submit:focus, #submit:active {
color:#BF99E5;
}
Bootstrap has custom CSS on hover, active, focus for appropriate elements. This should override them
It seems that some of your code overrides the stylings of bootstrap. However, if you really want to change the color of text on your button, then you may add hover in your style like:
input#submit:hover{
color: #000; /* Black */
}
That's it! :) Happy coding :) Please comment if you have problem with my solution, its my pleasure to help others :)
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.