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>
Related
guys.
Just a question about CSS and javascript.
I have this code but I need to make the input areas centered.
For some reason they are not aligned even with the same length.
I know that the text size effects the position of the flex, but I didn't understand how.
Sorry for the silly question, I'm just starting to learn it.
<div class="playersDiv">
<div class="players player1">
<h2>Player Name</h2>
<div class="showInput">
<input type="playerInput1" name="playerInput1" id="playerInput1">
<button class="addPlayerBtn">Add Player</button>
</div>
</div>
<div class="scoreDiv">
<p>Input below the quantity of each tile in the end of the game:</p>
<div class="scoreItem">
<h3>Forest</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Town</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Production</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Factory</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
</div>
</div>
.scoreItem{
display: flex;
justify-content: space-evenly;
margin: 0 auto 0.5rem auto;
height: 2rem;
}
#fnum {
margin: 0 1rem;
}
Firstly, the fnum id should be a unique ID for one element on the page. In this instance you should use classes instead of id:
<input type="number" name="fnum" class="fnum">
Then, in your css you should use . instead of #:
.fnum {
margin: 0 1rem;
}
The name attribute should also be unique, as this is the way you will access the data from your backend. e.g.
<input type="number" name="production-fnum" class="fnum">
<input type="number" name="factory-fnum" class="fnum">
Presuming the CSS you have is written in a separate .css file, or in tags.
The space-evenly attribute is affected by the width of the elements,
You can add a fixed width to the h3 and input elements with:
h3 {
width: 150px;
}
input {
width: 150px;
}
or, you can give each h3 element a class and add the style to that, and style the fnum class we created earlier e.g.
<h3 class="label">Factory</h3>
.label{width: 150px}
.fnum{width: 150px}
Also, I would use a label instead of h3 (https://www.w3schools.com/tags/tag_label.asp)
I can offer such a solution. Set this rule in your css:
.scoreItem h3 {
width: 90px;
}
Where width 90px is the width of the longest tag h3 - Production.
.scoreItem{
display: flex;
justify-content: space-evenly;
margin: 0 auto 0.5rem auto;
height: 2rem;
}
#fnum {
margin: 0 1rem;
}
.scoreItem h3 {
width: 90px;
}
<div class="playersDiv">
<div class="players player1">
<h2>Player Name</h2>
<div class="showInput">
<input type="playerInput1" name="playerInput1" id="playerInput1">
<button class="addPlayerBtn">Add Player</button>
</div>
</div>
<div class="scoreDiv">
<p>Input below the quantity of each tile in the end of the game:</p>
<div class="scoreItem">
<h3>Forest</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Town</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Production</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Factory</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
</div>
</div>
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.
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 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
I've set up a form with Angular integrated into it. In this form, I want the final submit button to only show up when the form is valid. There are a number of fields, but the only fields that are required are the one's for a user'a name, email-address, and a checkbox. The form recognizes when a required field is invalid, however I can't get the submit button to disappear (and subsequently reappear).
Here's code for reference:
index.html:
<form name="captions" ng-controller="CaptionCtrl>
<div class="current-page">
<div class="pages">
<div class="page active" id="page1">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption1" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(2)">NEXT</button> </div>
</div>
<div class="page" id="page2">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption2" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(3)">NEXT</button>
</div>
</div>
<div class="page" id="page3">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption3" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(4)">NEXT</button>
</div>
</div>
<div class="page" id="page4">
<img src="images/blank_image.jpg">
<div class="page-form-submit-page">
<h4>TO ENTER YOUR CAPTION IN THE CONTEST, TELL US YOUR NAME AND CONTACT METHOD.</h4>
<input type="text" ng-model="user.name" size="70" placeholder="Name" required>
<input type="email" ng-model="user.email" size="70" placeholder="E-mail Address" required>
<br>
<input type="checkbox" required>I have read and accept the Terms & Conditions
<br>
<input class="page-form-submit-page-submit" ng-disabled="captions | validateFields" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
</div>
</div>
<div class="page" id="page5">
<img src="images/blank_image.jpg">
<div class="page-form-thankyou">
<span><strong>THANK YOU</strong></span>
</div>
<div class="chapter-two-story-link"><span class="yellow">CLICK TO TELL US YOUR STORY</span></div>
</div>
</div>
</div>
</form>
If you notice towards the bottom, I have a ng-disabled set with "captions | validateFields". I've tried this with a simply truthy statement as well so its not the filter I set up.
Edit: With feedback I've gotten what I initially wanted to do working with ng-show. However, ng-disabled would actually be more appropriate for what I want. I've added relevant css.
style.css
.page-form-submit-page-submit {
display: block;
padding: 5px 15px;
border: none;
border-radius: 2px;
margin: 40px 400px 20px auto;
text-align: center;
background-color: #001F45;
color: #FFD200;
}
.page-form-submit-page-submit:active {
background-color: #0250B0;
}
Can anyone explain how to get the submit button to show only after all fields are valid?
Try ng-enabled="captions.$valid" to disable (visible but not clickable) and ng-show="captions.$valid" to hide the button if the form is invalid.
More about forms in angular: https://docs.angularjs.org/api/ng/directive/form
Not tested, but you can use the $valid property of your form like this:
<input class="page-form-submit-page-submit" ng-disabled="!captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
But if you want the button to disappear completely, use ng-hide="!captions.$valid" instead of the ng-disabled directive
It's fairly easy
hide completly
<input class="page-form-submit-page-submit" ng-if="captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
visually disable
<input class="page-form-submit-page-submit" ng-disabled="captions.$invalid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">