Develop Reference

How do I get this Anchor tag to fill the space before the next div?

I have been trying to create a bootstrap drop down box with some additional buttons inside. I have the main functionality sorted but the aesthetics are not quite right.
The issue I am having is that the Anchor elements are not filling the space up to the buttons on the right. I have tried experimenting with different combinations of block and inline-block which I have read elsewhere should fill the space but when it does it pushes the buttons down to the next line. When I do manage to get the buttons and anchor elements on the same line the selection area for the anchor does not extend the entire way up to the buttons.
I am currently tearing my hair out trying to get it to work but am having no luck so if anyone can offer any assistance it will be greatly appreciated.
Update:
Thanks to #Matus Jurika for suggesting using calc to adjust the sizing of the anchor element.
Updated working fiddle: fiddle

I sugget using calc for width:
.anchorDiv {
display: inline-block;
width: calc(100% - 74px);
}
Working Fiddle:
https://jsfiddle.net/q3fra0bm/36/

This here is snippet for your solution. I am just using bootstrap row class.
.comboRow {
margin-bottom: 3px;
}
.comboItem {
display: block !important;
/*width: 67%;*/
}
.comboButtons {
float:right;
margin-top: 3px;
width: 74px;
display: block;
}
.comboItemContainer {
width: 100%;
display: inline-block;
}
.anchorDiv {
display: inline-block;
}
.close {
/*float: right;*/
/*margin-right: 10px;*/
}
.close .edit {
margin-right: 5px;
}
#presetDropdownButton {
position:absolute;
}
.glyphicon {
font-size: 15px;
}
#presetDropdown {
width: max-content;
}
#newPresetEntry {
width: 50%;
height: 24px;
margin-left: 18px;
padding-left: 6px;
padding-right: 6px;
}
.dropdown-menu > li > div > div > a {
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
display: block;
}
.dropdown-menu > li > div > div > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > li > div > div > a:hover {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown" id="presetDropdownButton">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Presets
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="presetDropdown">
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 1</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 2 with longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 3 with even longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
</ul>
</div>

This should do the trick.
.comboItemContainer {
width: 100%;
position: relative;
}
.anchorDiv {
display: inline-block;
width: 100%;
padding: 0 80px 0 0;
}
.comboButtons {
width: 74px;
display: block;
position: absolute;
top: 0px;
right: 0px;
}
I made the container relative so that I can freely use absolute positioning on its children with a (0,0) origin relative to the container. Then I made the buttons absolute, made it top 0 and right 0. Added 100% width on the anchor and 80px padding-right.
This may look hacky but I'm not really that good in Flex and absolutely zero in Grid
This is almost certainly cross browser though

How to use FontAwesome icon as submit button in HTML form

I'm trying to get this FontAwesome search icon to act as a submit button:
Search form submit IMG
Link to search form (not evergreen):
https://themirrorman.co
I've looked through various other questions, including use of JS and using a button tag, and still couldn't get this to work.
Here is my code:
CSS:
#header-search-submit {
position: absolute;
z-index: 1;
right: 36px;
top: 6px;
font-size: 24px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
input[type="text"] {
border: 1px solid #881d98;
border-radius: 24px;
border-color: white;
}
/* header search desktop */
#media screen and (min-width: 800px) {
#header-search-desktop-div {
position: absolute;
left: 150px;
width: 450px;
margin-top: 0;
margin-bottom: 0;
}
}
HTML:
<div id="header-search-desktop-div">
<form id="header-search-form" class="search" action="https://themirrorman.co/" method="get">
<fieldset>
<span class="text">
<input name="product-search" id="header-search-desktop-span" type="text" value="" placeholder="Product Search…" /><i id="header-search-submit" class="fa fa-search"></i>
</span>
</fieldset>
<input type="hidden" name="post_type" value="product" />
</form>
</div>
The idea of using JS to create the submit function in the 'Space before /head' ? :
<script>$('#header-search-desktop-span').click(function() {
alert('Searching for '+$('#header-search-submit').val());
});
</script>
I'm clearly doing something very wrong, please help =D

You'll need to make the submit button have FontAwesome as the font-family, and use  as the value.
<input style="font-family: FontAwesome" value="" type="submit">
You can use additional CSS to change the styling of the button.

put it inside button tag
<button class="btn">
<i class="fa fa-search" aria-hidden="true"></i>
</button>

Toggling two classes

Why am I not able to use toggleClass('glyphicon-remove glyphicon-ok') in this snippet?
var Phase;
$(".btn-default").on("click", function(){
$(this).find('.glyphicon').toggleClass("glyphicon-remove glyphicon-ok");
});
label.btn {
margin-bottom: 0;
padding: 0;
overflow: hidden;
}
span {
display: block;
padding: 6px 12px;
}
input[type=checkbox] {
display: none;
}
input:checked + span {
display: block;
color: #fff;
background-color: #285e8e;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group">
<label class="btn btn-default"><input name="phase" type="checkbox" value="A"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> A</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="B"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> B</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="C"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> C</span></label>
</div>
</div>

This is because of synthetic* click done on input. In fact, click event is fired twice at label level.
One solution is to filter by event target:
var Phase;
$(".btn-default").on("click", function(e) {
if (!$(e.target).is('input')) return;
$(this).find('.glyphicon').toggleClass("glyphicon-remove glyphicon-ok");
});
label.btn {
margin-bottom: 0;
padding: 0;
overflow: hidden;
}
span {
display: block;
padding: 6px 12px;
}
input[type=checkbox] {
display: none;
}
input:checked+span {
display: block;
color: #fff;
background-color: #285e8e;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group">
<label class="btn btn-default"><input name="phase" type="checkbox" value="A"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> A</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="B"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> B</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="C"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> C</span></label>
</div>
</div>
*note: See spec
When a user agent is to run synthetic click activation steps on an
element, the user agent must run pre-click activation steps on the
element, then fire a click event at the element. The default action of
this click event must be to run post-click activation steps on the
element. If the event is canceled, the user agent must run canceled
activation steps on the element instead.

HTML, JavaScript

I've this html code:
<div class="input-group registration-date-time">
<span class="input-group-addon" id="Span2"><span class="fa fa-calendar" aria-hidden="true"></span></span>
<input class="form-control" name="registration_date" id="Date2" type="date"/>
</div>
I'd like to click on my span (with id Span2)and open the calendar.
Thank,

you maybe noticed that your question is not well prepared. Please have a look at the help center or look at other questions from users.
BUT: To answer your question have a look at this fiddle:
https://jsfiddle.net/wfs30nbp/
<div class="form-group my-calendar">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="fa fa-calendar"></span>
</button>
</span>
<input type="date" class="form-control">
</div>
</div>
and css
.my-calendar {
.input-group-btn {
position: absolute;
}
.form-control {
background: transparent;
padding-left: 50px;
border-top-left-radius: 4px!important;
border-bottom-left-radius: 4px!important;
&::-webkit-calendar-picker-indicator{
opacity: 0;
left: 0;
position: absolute;
top: 0;
padding: 0;
width: 40px;
height: 34px;
cursor: pointer;
}
}
}
NOTICE: type="date" cannot be interpreted by every browser and should be used carefully: http://caniuse.com/#search=type%3D%22date%22

AppendTo and then possible deleting of that element [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have some elements can I'm moving into another div (from x to y). The problem is that the the elements in x are deletable but the new copied element is not.
Here is the first state
Here the state after deleting Filter 1
Here the state after adding the Name person above... but I can't delete it like the others elements!
I already checked the classes css and they seem okay.
Here my code.
JS
function AddFilters()
{
if ( $(".filter-edited").css('display') == 'none' )
{
$("#btn_add").html("Hide Filters");
// element is hidden
$(".filter-edited").fadeIn();
}
else if ( $(".filter-edited").css('display') != 'none' )
{
$("#btn_add").html("Add Filter");
// element is hidden
$(".filter-edited").hide();
}
}
$(document).ready(function() {
$('.removable').on('click', function() {
$(this).parent().remove();
});
});
$(document).ready(function() {
$('.addable').on('click', function() {
$(this).parent().appendTo(".filter-added");
$(this).attr('class', 'glyphicon glyphicon-remove pull-right removable');
});
});
HTML
<script src="../assets/own_js/addfilters.js"></script>
<div class="row add-filters">
<div class="col-md-12">
<div class="row ">
<div class="col-sm-10 filter-added">
<span> Filtered on: </span>
<a class="btn btn-default">
<span class="text">Filter 1</span>
<span class="glyphicon glyphicon-remove pull-right removable" ></span>
</a>
<a class="btn btn-default">
<span class="text">Filter 2</span>
<span class="glyphicon glyphicon-remove pull-right removable"></span>
</a>
<a class="btn btn-default">
<span class="text">Filter 3</span>
<span class="glyphicon glyphicon-remove pull-right removable" ></span>
</a>
</div>
<div class="col-sm-2 pull-right">
<a class="btn btn-default" id="btn_add" onclick="AddFilters()">Add filter</a>
</div>
</div>
<div class="row filter-edited" style="display:none;">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 filters">
<a class="btn btn-default">
<span class="text">Business</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class="text">Campaign</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Event</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Channel</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Name person</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
SASS CSS
.add-filters
{
.filter-added
{
span
{
margin-right: 5px;
}
span.glyphicon.glyphicon-remove
{
margin-left: 8px;
color: red;
&:hover
{
cursor: pointer;
color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}
}
a.btn.btn-default
{
min-width:100px;
padding: 3px 0px 0px 0px;
margin-left: 10px;
//delete the margin between the buttons on small devices
#media (max-width: 768px) {
margin-left: 0px;
}
&:first-of-type
{
margin-left: 0px;
}
&:hover
{
cursor:default;
background-color: #fff;
border-color: #ccc;
}
}
}
.filter-edited
{
margin-top: 20px;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 7px;
/* Firefox 1-3.6 */
-moz-border-radius: 7px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 7px;
border: 1px solid #ddd;
span.glyphicon.glyphicon-plus
{
margin-left: 4px;
color: #15925f;
}
a.btn.btn-default
{
min-width:150px;
padding: 10px 5px 10px 0px;
margin-left: 5px;
//delete the margin between the buttons on small devices
#media (max-width: 768px) {
margin-left: 0px;
margin-top: 2px;
}
&:first-of-type
{
margin-left: 0px;
}
}
.filters {
padding: 15px;
}
}
}

You are listening only for events on currently shown elements. You need to call .on() function on parent element and pass child selector as a second parameter.
$(document).ready(function() {
$('.filter-added').on('click', '.removable', function() {
$(this).parent().remove();
});
});

$('.removable').on('click', function() {
$(this).parent().remove();
});
Should Be:
$(document).on('click', '.removable', function() {
$(this).parent().remove();
});
The reason behind this being, is that you are only applying this event to the current elements on the page. The markup below applies it to all elements of '.removable' that exist on the document. Current and future.
You could also run a .bind() on the object after it is created, and bind an event to it, but that would take more code and be less efficient.