How to avoid rendering space between two `<span>` elements

How to avoid rendering space between two `<span>` elements - html

Concatenate 2 values selected 2 drop down fields, no space
using the 2 strings selected in 2 drop down boxes and combining them into a single string with no spaces in between
I searched for ways to do this with CSS or HTML but cannot figure this out.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="">
<div>
<h3>Ship and Bill To Department</h3>
<select name="departments" ng-model="departmentSelect" [(value)]="departmentSelected">
<option value="">--Select--</option>
<option value='COP-'>OPERATIONS</option>
<option value='TLG-'>LOGISTICS</option>
<option value='TR-'>RECRUITING</option>
</select>
</div>
<div>
<h3>Ship and Bill To State</h3>
<select name="states" ng-model="stateSelect" [(value)]="stateSelected">
<option value="">--Select--</option>
<option value='AZ'>ARIZONA</option>
<option value='CA'>CALIFORNIA</option>
<option value='CO'>COLORADO</option>
</select>
</div>
<h3 id="departmentSelect">You selected: </h3>
<span class="selected" ng-bind="departmentSelect">{{departmentSelected}}</span>
<span class="selected" ng-bind="stateSelect">{{stateSelected}} </span>
</body>
a space is added between the two: COP- AZ
I need it to be COP-AZ

You can do something like this => ng-bind="(departmentSelect) + (stateSelect)"
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="">
<div>
<h3>Ship and Bill To Department</h3>
<select name="departments" ng-model="departmentSelect" [(value)]="departmentSelected">
<option value="">--Select--</option>
<option value='COP-'>OPERATIONS</option>
<option value='TLG-'>LOGISTICS</option>
<option value='TR-'>RECRUITING</option>
</select>
</div>
<div>
<h3>Ship and Bill To State</h3>
<select name="states" ng-model="stateSelect" [(value)]="stateSelected">
<option value="">--Select--</option>
<option value='AZ'>ARIZONA</option>
<option value='CA'>CALIFORNIA</option>
<option value='CO'>COLORADO</option>
</select>
</div>
<h3 id="departmentSelect">You selected: </h3>
<span class="selected" ng-bind="(departmentSelect) + (stateSelect) "></span>
</p>
</body>

Don't put any white space beween the closing tag </span> and the opening tag of the second <span>:
<span class="selected" ng-bind="departmentSelect"
></span><span class="selected" ng-bind="stateSelect"></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="">
<div>
<h3>Ship and Bill To Department</h3>
<select name="departments" ng-model="departmentSelect">
<option value="">--Select--</option>
<option value='COP-'>OPERATIONS</option>
<option value='TLG-'>LOGISTICS</option>
<option value='TR-'>RECRUITING</option>
</select>
</div>
<div>
<h3>Ship and Bill To State</h3>
<select name="states" ng-model="stateSelect">
<option value="">--Select--</option>
<option value='AZ'>ARIZONA</option>
<option value='CA'>CALIFORNIA</option>
<option value='CO'>COLORADO</option>
</select>
</div>
<h3 id="departmentSelect">You selected: </h3>
<span class="selected" ng-bind="departmentSelect"
></span><span class="selected" ng-bind="stateSelect"></span>
</body>

Related

Get closest textarea attribute id after select list change

I am new to jquery, am working on small task. I'm trying to find closest textarea attribute id but get undefined.
<div class="input-label-f">
<div class="select2-wrap">
<select class="variables_select" name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
<div class="input-box">
<textarea id="email_admin_textarea" class="input-field"></textarea>
</div>
$('.variables_select').change(function(){
var input = $(this).closest('textarea').attr('id');
});

you need to add both select and textarea in same div for reference
$('.variables_select').change(function(){
var input = $(this).closest('.input-label-f').find('textarea').attr('id');
console.log(input);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-label-f">
<div class="select2-wrap">
<select class="variables_select" name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="input-box">
<textarea id="email_admin_textarea" class="input-field"></textarea>
</div>
</div>

Dropdown is not showing after a page reloads

I have three dropdowns in my page, two of them are shown perfectly while the other one is not appearing, and when looking at the element in page it gets loaded with the "style="display: none;" value even if I'm forcing it with style="display: inline;".
Here's the code:
<div class="dropdown">
<div id="myBrokenDropdown" class="dropdown-content">
<select class='filter' id="notWorkingOne">
<option value=""> Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<!--select button-->
<div id="select1" class="dropdown-content">
<select class='filter' id="select1Works" data-col="1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<div id="select2" class="dropdown-content">
<select class='filter' id="select2Works" data-col="5">
<option value=""> Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
</div>
Also, in jquery I can hide/Show the two dropdowns with the following code:
$('#select1Works').hide();
$('#select2Works').hide();
$('#notWorkingOne').hide();
$(document).ready(function() {
$("input[type='radio']").on('change', function() {
$("#select1Works").toggle($("[name=radioButton]").index(this) === 0);
$("#select2Works").val("").trigger("change");
$("#select2Works").toggle($("[name=radioButton]").index(this) === 1);
$("#select1Works").val("").trigger("change");
if ($('#select1Works').is(':visible') || $('#select2Works').is(':visible')) {
$('#notWorkingOne').show();
}
})
});
Why is the "myBrokenDropdown" not showing?
Thank you very much

It was an issue with a selector in my actual code, I missed a '#'.

How to place to divs with drop down lists in them next to each other?

<div style="width: 100%; overflow: hidden;">
<div style="margin-left: 100px; width: 600px; float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
<div style=" margin-left: 350px; width: 600px; float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
<div style="margin-left: 620px; width: 600px; float: left;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
I want the three divs with the drop down lists to be next to each other horizontally. I have tried using float, inline and inline block. How can it be done in HTML.

Use inline-block and put properly your all divs.
Here is an example:
.selection {
display: inline-block;
}
h1{
display: inline-block;
font-size: 14px;
}
<div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>

<div style="float:left">
dropdown1
</div>
<div style="float:left">
dropdown2
</div>
<div style="float:left">
dropdown3
</div>
This will definitely work.
Problem in your code is over width. Better is you give width into % instead of px.

First of all, your code is really badly formatted.
Your are using 7 Div but you are missing 2 Div closing tags. Close the Div tags properly.
You are also fixing the width of all 3 divisions, so if the screen size is smaller than the combined width of the 3 div, your div's will no longer be displayed horizontally. Give width relative like width:30%.
Also remove margin from the elements. Use Padding instead to give space between div's.
<html>
<body>
<div style="width: 100%; overflow: hidden;">
<div style=" width: 33%;float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div style="float: left;width: 33%;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div style=" float: left;width: 33%;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
</body>
</html>

Problem is with your code you have 3 unclosed div tags and a lot of left margin plus try to use width and margin both in %
[Check pen] (http://codepen.io/anon/pen/gPzJpr)

for your html
<div class="container">
<div id="firstDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div id="secondDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div id="thirdDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
for your css:
div{
display: inline-block;
position: relative;
margin: 5px;
padding: 15px;
}
#firstDiv{
background-color: #ccc;
}
#secondDiv{
background-color: #eee;
}
#thirdDiv{
background-color: #aaa;
}
Just like what #Maihan Nijat said, use external CSS to make it easier for you to debug.

I made a few changes to your code. The absolute easiest way to solve this problem is to ensure that the width of each element could fit next to each other on the screen. Not only does this require that the text is not too large, but also that the width you explicitly define does not overflow.
The simple solution to your problem is to place display: inline-block; on the elements which you would like side by side.
.left {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="left">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="left">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="left">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</body>
</html>

Two consecutive HTML dropdown menus rendering issue

I have the following code where I am trying to create two drop down menus; one for the day of the week and other one for the category.
<!DOCTYPE html>
<html>
<body>
<p>Category of the article:
<option value="lifestyle">Lifestyle</option>
<option value="entertainment">Entertainment</option>
<option value="business">Business</option>
<option value="social media">Social Media</option>
<option value="tech">Tech</option>
<option value="world">World</option></p> <br>
<p>Day of publishing the article:
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option></p> <br>
</body>
</html>
But the page looks like the below image. Can someone help me identify why is this happening?

Mistakes:
You cannot have any block tags or anything inside <p>.
You missed the <select> tags.
Corrected Code:
<!DOCTYPE html>
<html>
<body>
<p>Category of the article:</p>
<select>
<option value="lifestyle">Lifestyle</option>
<option value="entertainment">Entertainment</option>
<option value="business">Business</option>
<option value="social media">Social Media</option>
<option value="tech">Tech</option>
<option value="world">World</option>
</select>
<p>Day of publishing the article:</p>
<select>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
</body>
</html>

You forgot the <select> tag.
<!DOCTYPE html>
<html>
<head>
<title>Titre</title>
</head>
<body>
<p>Category of the article:
<select>
<option value="lifestyle">Lifestyle</option>
<option value="entertainment">Entertainment</option>
<option value="business">Business</option>
<option value="social media">Social Media</option>
<option value="tech">Tech</option>
<option value="world">World</option>
</select></p> <br>
<p>Day of publishing the article:
<select>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select></p> <br>
</body>
</html>
This code is right in the validator but I'm not sure if you can add <select> in <p>.
See HTML select tag

issue with making a <select> box bringing you to another page

Hey guys so I am trying to create a quick search with the boxes. I thought I could just put in some tags but does not work so I was wondering how I would go about doing this?
Here is my code:
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option value="Microphones">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div><!-- END #advancesearch -->

Why don't you use JavaScript window.location?
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option value="Microphones" onclick="window.location='http://www.google.com'">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
Or create a function
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option></option>
<option value="Microphones" onclick="redirect_me('http://www.google.com');">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
<script>
function redirect_me(re_link) {
window.location = re_link;
}
</script>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How to avoid rendering space between two `<span>` elements - html

Related

Get closest textarea attribute id after select list change

Dropdown is not showing after a page reloads

How to place to divs with drop down lists in them next to each other?

Two consecutive HTML dropdown menus rendering issue

issue with making a <select> box bringing you to another page

Categories

Resources