PLNKR example of problem
The label reads Group By, but the letters are all superimposed for some reason.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Label font</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure.css">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//builder.yaas.io/public/js/vendor/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="UICtrl">
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-g">
<div class="pure-u-md-1">
<label for="graphType">Group By: </label>
<select id="graphType" class="pure-input-1">
<option disabled selected value> -- Select a Graph Type --</option>
<option> Graph type 1 </option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
The problem goes away if I don't use the Pure CSS library. Is there anyway I can have the label font without messing up while keeping the Pure CSS?
You can customize your label css
label {
letter-spacing: 0.1em;
}
Related
I am using "Bootstrap Select Plugin Jquery". How do I replace it with Select Jquery code.
I would like to choose the value of the example 2.
Desired result:
enter image description here
MY Code:
$(document).ready(function() {
$('select').selectpicker();
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
</head>
<body>
<select class="my-select">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Other</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js"></script>
</body>
</html>
$('.my-select').selectpicker('val', '2');
I have the following select box appearing in chrome but not in other browsers
Using bootstrap-select (1.12.2 V) to style the select box.
options.html
<select ng-model="ctrl.qSettings.env"
ng-change="ctrl.envChanged()"
class="selectpicker"
data-width="fit">
<option style="color: #5cb85c;"
ng-repeat="env in ctrl.qSettings.envs">{{env}}
</option>
</select>
html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<-- bootstrap select -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap
select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.12.2/js/bootstrap-select.min.js"></script>
</head>
<body ng-controller="abcCtrl as ctrl">
<div ng-include="'templates/options.html'"></div>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<-- ui select -->
<script src="node_modules/ui-select/dist/select.min.js"></script>
<link rel="stylesheet" href="node_modules/ui-select/dist/select.min.css">
</body>
</html>
Can you please guide me on what would be wrong here,Thanks.
Try ng-options.
<select ng-model="ctrl.qSettings.env"
ng-change="ctrl.envChanged()"
class="selectpicker"
data-width="fit"
ng-options="env in ctrl.qSettings.envs">
</select>
I have problem with jQuery change connected with select tag. It fire twice, second time returning empty array. jQuery or JS is NOT included twice, already checked.
I would be very grateful for any help in this area :)
JS
$(".select-car").on("change", function(){
var cars = [];
var carType = $(this).val();
$.getJSON("js/cars.json", function(data) {
$.each(data, function(i, item) {
// console.log(item);
if(item.type === carType) {
cars.push(item);
}
});
});
console.log(cars);
});
HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<title>Wyporzyczalnia samochodów</title>
</head>
<body>
<main class="container main-container">
<div class="row select-car">
<div class="col-md-12 header">
<h2 class="page-header">Wybierz typ samochodu</h2>
<form action="">
<select name="cartype" class="form-control select-car">
<option value="" selected="true" disabled>---</option>
<option value="camper">Camper</option>
<option value="limuzyna">Limuzyna</option>
<option value="osobowy">Osobowy</option>
</select>
</form>
</div>
</div> <!-- Select car -->
<div class="row avaible-cars">
</div>
</main>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You have two classes .select-car
<div class="row select-car">
and in
<select name="cartype" class="form-control select-car">
Which is causing this to be called twice. And hence binded the change event twice.
I have the following code for a widget. The widget is a searchpod. The file is searchPod.html
<select class="search-by" id="searchBy">
<option value="search_by">Search By</option>
<option value="lastname">Employee Last Name</option>
<option value="ssn">Employee SSN</option>
<option value="eeid">Employee EEID</option>
<option value="claim_number">Claim Number</option>
<option value="leave_number">Leave Number</option>
</select>
I have another file called SPTest.js which tries to use that select above. This function is inside a test function since we are also using QUnit to do unit tests.
define(
['../Widget/SearchPod/searchPod'],
function () {
function checkSearchBy()
{
test('check if select has "Search By" text', function () {
alert($("#searchBy option[value='search_by']").text());
alert($('#searchBy23').find('option:selected').text());
var expected = "Search By";
deepEqual($("#searchBy option[value='search_by']").text(), expected,
"We expect dropdown text to display 'Search By' by default");
});
}
return {
runny: runny,
checkSearchBy: checkSearchBy,
};
I can't figure out why my .js file can't find the select by its id.
I'll put the HTML output below for those who'd like to see:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLR Javascript Unit Test</title>
<link rel="stylesheet" href="Style/qunit.css">
<link rel="stylesheet" href="Style/cupertino/jquery-ui-1.10.1.custom.min.css" />
<link rel="stylesheet" href="Style/jquery.jscrollpane.css" />
<link rel="stylesheet" href="Style/jquery.dataTables.css" />
<link rel="stylesheet" href="Style/Report.css" />
<link rel="stylesheet" href="Style/GlobalReportStyles_10_css.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Scripts/Lib/qunit.js"></script>
<script type="text/javascript">
QUnit.config.autostart = false;
</script>
<script data-main="Scripts/App" src="Scripts/Lib/require.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li>Test Results<button id="test">Test DOM</button></li>
<li>Report Viewer<button id="btnSPTest">
Test Search Pod</button></li>
<li>Transactional</li>
</ul>
<div id="tabs-1">
Testing is fun!
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</div>
<div id="tabs-2">
<iframe width="100%" height="600px" src="ViewReportPage.aspx"
id="viewreport"></iframe>
</div>
<div id="tabs-3">
<iframe width="100%" height="600px" src="BuildReport.aspx" id=""></iframe>
</div>
</div>
</body>
</html>
Any explanation would help. Thank you.
how to get two jquery ui slider on a a page , when i used id slider for than one div only first slider is shown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
.
.
.
.
.
<div id="left_panel">
<div id="panel_title">
Left Panel
</div>
<textarea id="txt" > </textarea>
<input type="checkbox" name="right_to_left" value="Bike">
Right to Left
<br/>
<div id="font_family">
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
hello
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->
</div>
<br/>
Size:<div class="font_size" class="slider"></div>
Opacity:<div class="font_opacity" class="slider"></div>
</div>
<div id="middle_panel">
I am in middle
</div>
</div>
</div>
</body>
Please suggest?html
You can add as many as you want in one page and to make them work independently you should use uniques selectors and id is the best one.
Here is a fiddle to make it clear.
use by class , don't use with id, id must be unique
Size:<div class="font_size slider"></div>
Opacity:<div class="font_opacity slider"></div>