How can I prevent shift of the input element inside parent div? - javascript

I have div that contains three elements.
Here is the div:
<div id="toolbarArea" class="toolbarArea" data-Owner="geomind" data-Date="11/2016">
<img id="toolbarTitle" width="15px" height="15px" src="../stdicons/threePoints.png">
<iframe id="frTools" style="width:400px;height:25px;overflow: hidden;" name="tbFrame" src="/data/mapview/toolbar.aspx?LOCALE=en" frameBorder="0"></iframe>
<input type="text" id="txtSearch" placeholder="Sample Input"/>
</div>
The input text that inside div is shifted.Here how it looks:
Here is jsfiddle.
How can I prevent shift down of the input element and make it fit parent element?

You can just add vertical-align: top; to the input field:
#txtSearch {
vertical-align: top;
}

Related

How to align textarea height with next input element

I set some input design in my sample app. inside it , I have input and textareas. from perspective view,our requirement is to set height aligned with input element.
I would like to align height of textare with input element close to it.When I simply set them as follows. it distorted.
<div>
<input value="input test">
<textarea>textarea test</textarea>
</div>
My desired result is like follows. the height of textare is aligned with input element. How can I achieve this ?
Thanks
You can start by doing this:
.wrapper {
display: flex;
}
.wrapper > input {
margin: 0;
}
<div class="wrapper">
<input value="input test">
<textarea>textarea test</textarea>
</div>
<div style="display: flex; align-items: start;">
<input value="input test">
<textarea>textarea test</textarea>
</div>
The form-group div container has the display: flex and align-items: stretch properties, which align the heights of the child elements. The textarea element has the height: 100% property
<div style="display: flex;">
<input value="input test">
<textarea>textarea test</textarea>
</div>

Transition a DIV element while reverting transition on a another element - Using Javascript

I have php generating several DIV tags populated with information for a database.
A DIV height of 400px will display all information. However, I render the DIVs to height=50PX on the page with CSS.
example:
<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>
etc
I need some help with javascript method and functions, that will run when I click on the DIV element, the function should change the style.property.height to 400px and simultaneously reduce any other div that was expanded to 400px back to 50px. When the DIV is action i.e. it's at 400px, it should NOT change no matter how many time it's clicked on, but once click out of the DIV or another div it should revert to 50px
You can give all the divs the same class to select them by (with document.querySelectorAll) to change their styles. You can loop through all of the divs with Array.prototype.forEach to change their heights back to 50px. JSFiddle: http://jsfiddle.net/s5dLpjkg/embedded/result
var divs = document.querySelectorAll(".myClass");
var input = document.getElementById("num");
document.getElementById("transitionBtn").addEventListener("click", function(e){
var num = input.value;
var div = divs[num-1];
[].slice.call(divs).forEach(function(el){
if(el.style.height!=="50px"&&el!==div){
el.style.height = "50px";
}
});
div.style.height="200px";
});
.myClass{
background-color: dodgerblue;
border: 1px solid black;
transition: height 2s;
}
<div style="height: 50px" class="myClass">Info #1</div>
<div style="height: 50px" class="myClass">Info #2</div>
<div style="height: 50px" class="myClass">Info #3</div>
<div style="height: 50px" class="myClass">Info #4</div>
<input type="number" id="num" placeholder="Div number" min="1" max="4" style="width: 30%" value="1">
<p/>
<button id="transitionBtn">Run Transition</button>

Explanation for the behaviour of bootstrap input-group with hidden sub elements

If I have a button and an input field contained within a div with a bootstrap class of input-group, they fill the full width of the containing element. If I then hide the button, the input field now shrinks to some default length rather than taking up the full width. It looks a bit like this:
The code for this can be seen here http://jsfiddle.net/1gu6qnhk/1/.
Essentially this problem can be reduced to the following code:
<head>
<style>
.group {
display: table;
}
.input {
width: 100%;
}
.item {
display: table-cell;
width: 1%;
}
</style>
</head>
<body>
<div class="group">
<input class="input" />
<span class="item"></span>
</div>
<div class="group">
<input class="input" />
<span class="item">text</span>
</div>
</body>
Why does the first div take up the full width available whilst the second only takes up a portion of the width, when the only difference is that the span in the second div contains text.
Fiddle here http://jsfiddle.net/Lbyjo79e/1/
you can try this form: http://jsfiddle.net/07r866vp/
<div class="form-group">
<input class="form-control" value="The span after this has text" />
<span class="item">
text
</span>
</div>
<div class="form-group">
<input class="form-control" value="The span after this is empty" />
<span class="item">
</span>
</div>
Setting the width of the parent element to 100% resolves this. (http://jsfiddle.net/Lbyjo79e/2/)
.group {
display: table;
width: 100%;
}
.input {
width: 100%;
}
.item {
display: table-cell;
width: 1%;
}
The issue is in fact the same with just table elements. So if you have:
td {
width:100%;
border: 1px black solid;
}
<table>
<td>two cells</td>
<td></td>
</table>
<table>
<td>one cell</td>
</table>
Then the first table takes up maximum width, but the second table only takes up a fraction. Setting the width of the table to 100% resolve this. Fiddle at http://jsfiddle.net/bkngop0f/.

Grouping elements for focus/onblur events?

I have an autocomplete div which appears when the user keyup's in a search field. I want the div to disappear when they click outside of the div, so I have tried the following:
//SHOW THE DIV WHEN INPUT CLICKED
$('#searchbar').focus(function(){
$('#div').show();
});
//HIDE THE DIV WHEN FOCUS LOST
$('#searchbar').on("blur", function(){
$('#div').hide();
});
Unfortunately, the div which houses the autocomplete choices contain tags that I want the user to click. As soon as the user clicks a link, the div disappears (because focus from the input field is lost).
So is there any way to 'group' the div with the input field so they can both be 'focussed' when the input is active, or div is clicked?
Regards, and thank you in advance!
EDIT: Here is my HTML
<div class="appBar">
<table class="abTable">
<tr>
<td><b><span style="color:white;">gelDB</span></b></td>
<td><input id="sbar" type="text" name="searchBar" class="searchBar" placeholder="Search for entries..." /></td>
<td>
<img class="navButton" alt="" src="images/btn_new.png" style="width: 50px; height: 50px" />
<img class="navButton" alt="" src="images/btn_browse.png" style="width: 50px; height: 50px" />
<img class="navButton" alt="" src="images/btn_proto.png" style="width: 50px; height: 50px" />
<img class="navButton" alt="" src="images/btn_permis.png" style="width: 50px; height: 50px" />
</td>
<td>
<button class="menuButton"></button>
</td>
</tr>
<div class="menuButtonDiv"></div>
</table>
</div>
</head>
<br/>
<body>
<div id="acd" class="autoCompleteDiv">No results. Try searching something else.<hr></div>
Here is a graphical example of what I'm doing:
Figured it out, had to use the following code:
$('#sbar').on("blur", function(){
if ($('#acd').is(':hover')) {}
else{$('#acd').hide();};
});
Basically it states to hide the div unless the mouse is currently over (hovering over) the div.
try this:
<div id="box">
<a href="#">link<a>
<div>
_
$( "body" ).click(function() {
// if the element that was clicked is #box OR any child of #box
if($(event.target).is( "#box, #box > *" )) {
} else {
alert("outside the box");
}
});
demo: http://jsfiddle.net/J9yzj/2/

Make a div fade out on focus of a text area

I have a div that I'd like to have fade out using JavaScript when a certain text area is clicked/focused. Is this possible?
Text area HTML
<label for="message">Message:</label>
<textarea name="message" id="message" wrap="physical"
placeholder="What's on your mind?">
</textarea>
HTML for div I'd like to fade out
<div id="bubble">
<img src="images/hire_me_bubble.png" alt="Hire me" />
</div>
CSS for bubble
#bubble{
width:201px;
height:189px;
position:absolute;
left:416px;
top:300px;
z-index: 99;
overflow:visible;
}
Try this:
$("#message").focus(function() {
$("#bubble").fadeOut();
}).blur(function() {
$("#bubble").fadeIn();
});​
It binds two events to the textarea, one to the focus event, and one to the blur event.
http://jsfiddle.net/FzmW2/
If you don't want it to fade back in, remove the .blur part.
$('#message').bind('focus', function(){
$('#bubble').fadeOut();
});

Categories