I am facing something a little bit weird. Well, at least for my understanding.
Let me give you the snippet, so you can see what I am doing
var app = angular.module('riskQueries', []);
app.controller('cuitCtrl',function ($scope, $window) {
$scope.defaultCuit = '--Inserte su CUIT aquí--';
$scope.riskData = {
cuit: null
};
$scope.reset = function () {
$scope.riskData.cuit = angular.copy($scope.defaultCuit);
$window.alert('Hey! You clicked!');
};
$scope.reset();
$scope.comboData = {
planAnterior: null,
planSolicitado: null,
options: [
{id: 0, name: "No tengo un plan"},
{id: 1, name: "Plan Básico"},
{id: 2, name: "Plan Joven"},
{id: 3, name: "Plan Famliar"},
{id: 4, name: "Plan Cobertura Completa"},
{id: 5, name: "Plan Plus"}
],
};
});
app.filter('selectedPlan',function(){
return function(planSolicitado,planAnterior){
planAnterior <= planSolicitado;
};
});
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-family: "Verdana", sans-serif;
}
.submit {
align-content: center;
width: 30%;
background-color: #71b9fb;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: "Verdana", sans-serif;
}
.submit:hover {
background-color: #c4e3ff;
}
.form {
width: 45%;
border-radius: 5px;
border-style: solid;
border-color: darkblue;
border-width: thick;
background-color: #FFFFFF;
padding: 40px;
font-family: "Verdana", sans-serif;
}
.header {
border-bottom-style: groove;
border-bottom-color: #9BE5F4;
border-bottom-width: thick;
width: 50.5%;
}
.header .logo{
max-width: 25%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="logic.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="header">
<img class="logo">
</div><br>
<div class="form" ng-app="riskQueries" ng-controller="cuitCtrl">
<form name="BPMForm">
<label for="Cuit">CUIT/CUIL:</label>
<input name="Cuit" type="text" ng-model="riskData.cuit"><br><br>
<label for="PlanAnterior">Plan Actual:</label>
<select name="PlanAnterior" id="PlanAnterior" ng-model="comboData.planAnterior" ng-options="option.name for option in comboData.options">
<option value="">---Seleccione su plan Actual---</option>
</select><br><br>
<label for="PlanSolicitado">Plan Solicitado:</label>
<select name="PlanSolicitado" id="PlanSolicitado" ng-model="comboData.planSolicitado" ng-options="option.name for option in comboData.options | filter: {id: '!' + comboData.planAnterior.id}">
<option value="">---Seleccione su plan a Solicitar---</option>
</select><br><br>
<button class="submit" ng-click="reset()">Limpiar</button>
</form>
<p>resultados: WebService: {{riskResponse}} - cuit: {{riskData.cuit}} - planAnteior: {{comboData.planAnterior.id}} - planSolicitado: {{comboData.planSolicitado.id}}</p>
</div>
</body>
If you run it, you can see that an alert box defined in the function I've created for my button is getting activated without me having clicked it. I think this maybe has something to do with where I declare the ng-app and ng-controller, but failed to find something useful.
What am I missing here?
I'm assuming you're trying to call the reset() function, right? It seems you've called it right after declaring it on the controller.
$scope.reset = function () {
$scope.riskData.cuit = angular.copy($scope.defaultCuit);
$window.alert('Hey! You clicked!');
};
$scope.reset(); // <--- You're calling it here
$scope.comboData = {
Remove the $scope.reset(); line from your controller and you should be good to go :)
Related
I am new to Blazor and trying to set up an address form to use google place autocomplete. I have done this web and mobile before.
I am not sure how to:
Call the javascript from the blazor component.
Populate the address fields from the selected address.
Save the data in the fields to the backend.
I was able to get working with the code below. For the complete solution see github repo. Here is the demo site.
\Shared\_Host.cshmtl
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYI&libraries=places"></script>
</head>
\wwwroot\js\serverSideScripts.js
window.initAutocomplete = () => {
let autocomplete;
let address1Field;
let address2Field;
let postalField;
fillInAddress = (autocomplete) => {
// Get the place details from the autocomplete object.
const place = autocomplete.getPlace();
let address1 = "";
let postcode = "";
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
// place.address_components are google.maps.GeocoderAddressComponent objects
// which are documented at http://goo.gle/3l5i5Mr
if (place) {
for (const component of place.address_components) {
const componentType = component.types[0];
switch (componentType) {
case "street_number": {
address1 = `${component.long_name} ${address1}`;
break;
}
case "route": {
address1 += component.short_name;
break;
}
case "postal_code": {
postcode = `${component.long_name}${postcode}`;
break;
}
case "postal_code_suffix": {
postcode = `${postcode}-${component.long_name}`;
break;
}
case "locality":
document.querySelector("#locality").value = component.long_name;
break;
case "administrative_area_level_1": {
document.querySelector("#state").value = component.short_name;
break;
}
case "country":
document.querySelector("#country").value = component.long_name;
break;
}
}
address1Field.value = address1;
postalField.value = postcode;
// After filling the form with address components from the Autocomplete
// prediction, set cursor focus on the second address line to encourage
// entry of subpremise information such as apartment, unit, or floor number.
address2Field.focus();
}
}
address1Field = document.querySelector("#ship-address");
address2Field = document.querySelector("#address2");
postalField = document.querySelector("#postcode");
// Create the autocomplete object, restricting the search predictions to
// addresses in the US and Canada.
autocomplete = new google.maps.places.Autocomplete(address1Field, {
componentRestrictions: { country: ["us", "ca"] },
fields: ["address_components", "geometry"],
types: ["address"],
});
address1Field.focus();
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener("place_changed", function () { fillInAddress(autocomplete) });
}
\Pages\GoogleAutoComplete.razor
#page "/AddressAutocompleteForm"
#inject IJSRuntime JSRuntime
<title>Place Autocomplete Address Form</title>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
color: #686868;
}
form {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 400px;
padding: 20px;
}
input {
width: 100%;
height: 1.2rem;
margin-top: 0;
padding: 0.5em;
border: 0;
border-bottom: 2px solid gray;
font-family: "Roboto", sans-serif;
font-size: 18px;
}
input:focus {
border-bottom: 4px solid black;
}
input[type="reset"] {
width: auto;
height: auto;
border-bottom: 0;
background-color: transparent;
color: #686868;
font-size: 14px;
}
.title {
width: 100%;
margin-block-end: 0;
font-weight: 500;
}
.note {
width: 100%;
margin-block-start: 0;
font-size: 12px;
}
.form-label {
width: 100%;
padding: 0.5em;
}
.full-field {
flex: 400px;
margin: 15px 0;
}
.slim-field-left {
flex: 1 150px;
margin: 15px 15px 15px 0px;
}
.slim-field-right {
flex: 1 150px;
margin: 15px 0px 15px 15px;
}
.my-button {
background-color: #000;
border-radius: 6px;
color: #fff;
margin: 10px;
padding: 6px 24px;
text-decoration: none;
}
.my-button:hover {
background-color: #666;
}
.my-button:active {
position: relative;
top: 1px;
}
</style>
<!-- Note: The address components in this sample are based on North American address format. You might need to adjust them for the locations relevant to your app. For more information, see
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
-->
<form id="address-form" action="" method="get" autocomplete="off">
<p class="title">Sample address form for North America</p>
<p class="note"><em>* = required field</em></p>
<label class="full-field">
<!-- Avoid the word "address" in id, name, or label text to avoid browser autofill from conflicting with Place Autocomplete. Star or comment bug https://crbug.com/587466 to request Chromium to honor autocomplete="off" attribute. -->
<span class="form-label">Deliver to*</span>
<input id="ship-address"
name="ship-address"
required
autocomplete="off" />
</label>
<label class="full-field">
<span class="form-label">Apartment, unit, suite, or floor #</span>
<input id="address2" name="address2" />
</label>
<label class="full-field">
<span class="form-label">City*</span>
<input id="locality" name="locality" required />
</label>
<label class="slim-field-left">
<span class="form-label">State/Province*</span>
<input id="state" name="state" required />
</label>
<label class="slim-field-right" for="postal_code">
<span class="form-label">Postal code*</span>
<input id="postcode" name="postcode" required />
</label>
<label class="full-field">
<span class="form-label">Country/Region*</span>
<input id="country" name="country" required />
</label>
<button type="button" class="my-button">Save address</button>
<!-- Reset button provided for development testing convenience.
Not recommended for user-facing forms due to risk of mis-click when aiming for Submit button. -->
<input type="reset" value="Clear form" />
</form>
#functions {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("initAutocomplete");
}
}
}
I have a csv file that I load into an 11 column html table. The data displays as expected except there is a very narrow column on the far right. There is also an extra blank row at the bottom. I have made dozens of adjustments to the width percentages but the little column on the right prevails. I haven't tried to eliminate the extra row on the bottom because I don't know what to try. See CSS code.
<title>CSV to HTML5</title>
<style type="text/css">
table {
width: 850px;
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: center;
padding: 6px;
border: 1px solid black;
border-collapse: collapse;
}
tr {
height: 24px;
border: 1px solid black;
}
tr:nth-child(even) {
background-color: #00FFFF;
}
td {
font-family: Arial, Verdana;
font-size: 0.8em;
font-weight: 700;
}
td {
border: 1px solid black;
cellpadding: 3px;
}
td:nth-child(1) {
width: 4%;
text-align: center;
}
td:nth-child(2) {
width: 6%;
text-align: left;
padding-left: 5px;
}
td:nth-child(3) {
width: 14%;
text-align: left;
padding-left: 5px;
}
td:nth-child(4) {
width: 14%;
text-align: left;
padding-left: 5px;
}
td:nth-child(5) {
width: 18%;
text-align: left;
padding-left: 5px;
}
td:nth-child(6) {
width: 6%;
padding-left: 5px;
}
td:nth-child(7) {
width: 5%;
text-align: center;
}
td:nth-child(8) {
width:8%;
text-align: center;
}
td:nth-child(9) {
width: 8%;
text-align: center;
}
td:nth-child(10) {
width: 8%;
text-align: center;
}
td:nth-child(11) {
width:8%;
text-align: center;
</style>
</head>
<body>
<div>
<div>
<legend>
<h1 id="clubname" style="text-align:center"></h1>
<h2 id="racename" style="text-align:center"></h2>
<h3 id="racedate" style="text-align:center"></h3>
</legend>
</div>
<div id="output">
</div>
<div id="myDiv" class="container">
<hr>
<form>
<div class="form-group">
<input type="text" class="form-control" id="inp_clubname" placeholder="Club Name" size="24" required>
<input type="text" class="form-control" id="inp_racename" placeholder="Race Name" size="24" required>
<input type="date" class="form-control" id="inp_racedate" placeholder="Date Name" size="24" required>
<label for="csvFileInput">CSV File: </label>
<input type="file" id="csvFileInput" onchange=accept=".csv" size="35" required>
<input type="button" class="btn btn-primary" onclick="generate()" value="Generate" />
</div>
</form>
<hr>
</div>
</div>
<footer>
<p style="text-align:center">©: Klexy Soft</p>
</footer>
<script type="text/javascript">
function generate() {
console.log('generate called')
//copy text from form to headings
ids = ["clubname", "racename", "racedate"]
for (i in ids) {
value = document.getElementById('inp_' + ids[i]).value
document.getElementById(ids[i]).innerHTML = value
}
files = document.getElementById('csvFileInput').files
// Check for the various File API support.
if (window.FileReader) {
// FileReader are supported.
var reader = new FileReader();
// Read file into memory as UTF-8
reader.readAsText(files[0]);
// Handle errors load
reader.onload = loadHandler;
reader.onerror = errorHandler;
} else {
alert('FileReader is not supported in this browser.');
}
}
function loadHandler(event) {
var csv = event.target.result;
processData(csv);
}
function processData(csv) {
var allTextLines = csv.split(/\r\n|\n/);
var lines = [];
for (var i = 0; i < allTextLines.length; i++) {
var data = allTextLines[i].split(',');
lines.push(data);
}
//console.log(lines);
drawOutput(lines);
}
function errorHandler(evt) {
if (evt.target.error.name == "NotReadableError") {
alert("Canno't read file !");
}
}
function drawOutput(lines) {
//Clear previous data
document.getElementById("output").innerHTML = "";
var table = document.createElement("table");
for (var i = 0; i < lines.length; i++) {
var row = document.createElement("TR");
table.appendChild(row)
for (var j = 0; j < lines[i].length; j++) {
// first row is header
cell = document.createElement(i == 0 ? "TH" : "TD");
row.appendChild(cell)
cell.appendChild(document.createTextNode(lines[i][j]));
}
}
document.getElementById("output").appendChild(table);
document.getElementById("myDiv").style.visibility = "hidden";
}
console.log('initialized')
</script>
</body>
csv file
PL,Sail#,Yacht,Type,Skipper,Club,Rtg,Finish,Elapsed,Cor'ted, 1st +,
1,1234,Boat Name,42MkII,Name,GYC,115,14:10:53,02:00:53,01:46:42,00:00:00,
2,1234,Boat Name,4000,Name,GYC,107,14:16:29,02:06:29,01:53:17,00:06:35,
3,1234,Boat Name,Catalina36MKII,Name,GYC,144,14:26:34,02:16:34,01:58:48,00:12:06,
4,1234,Boat Name,42,Name,GYC,131,14:26:37,02:16:37,02:00:28,00:13:46,
5,1234,Boat Name,Mark3,Name,GYC,218,14:52:01,02:42:01,02:15:08,00:28:26,
6,1234,Boat Name,Nonsuch 30C,Name,GYC,156,14:54:43,02:44:43,02:25:29,00:38:47,
7,1234,Boat Name,KP44,Name,GYC,168,15:25:50,03:15:50,02:55:07,01:08:25,
One of the problems I was having was the java script, function drawOutput(lines) { and the codes that perform the function, generates the table and adds an extra blank row at the bottom, I guess waiting for another line of data. By adding one more line to the java script function code, the very last line, I was able to remove the extra empty row.
document.getElementById("output").appendChild(table).deleteRow(-1);
I have a few controls that I am attempting to encapsulate on my webpage. I have tried a few different methods on encapsulating my controls and they have not succeeded. I tried using a div and this did not work too well and I have also tried this post:
Create a group box around certain controls on a web form using CSS
What is happening is that a box is being created but it is at the top of my webpage instead of around the controls.
I would like to create a grey box similar to the ones found on this webpage:
https://img.labnol.org/di/trigger1.png
Below, I am attaching a copy of the CSS and HTML code that I am using in order to create my form. The form is a simple file upload form that I tweaked from an example. I am using this on my own, personal website.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury # DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event){
//_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
function changeText()
{
document.getElementById('p1').innerHTML = "1 file selected";
}
</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>Upload</h2>
<fieldset>
<legend>Group 1</legend>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<p id="p1">Drag your file here or click in this area.</p>
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:508px; margin-left: -4px; margin-top: 10px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</fieldset>
<script>
// self executing function here
(function() {
document.getElementById('upload_form')[0].onchange = changeText;
})();
</script>
</body>
</html>
Here is the CSS (which is referred to in the html as test.css):
body{
background: rgba(0,0,0,0.0);
}
form{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: 200px;
border: 4px dashed #0D0D0D;
}
form p{
width: 100%;
height: 100%;
text-align: center;
line-height: 140px;
color: #0D0D0D;
font-family: Arial;
}
h2{
text-align: center;
}
form input[type="file"]{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
form input[type="button"]{
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-top: -20px;
margin-left: -4px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form input[type="button"]:hover{
background: #149174;
color: #0C5645;
}
form input[type="button"]:active{
border:0;
}
form progressBar{
text-align: center;
}
Coming back to the HTML, the fieldset tags are placed around the controls that I am attempting to encapsulate. I left them there so that anyone can see the main issue that I am running into.
I apologize but I am very new to web programming. Any help will be greatly appreciated, thank you.
Note: how the box is created doesn't really matter to me. I would expect that the box is created in HTML and then I can style it using CSS.
The structure of your HTML is fine, but the position: absolute properties in your CSS are clashing with the fieldset.
Since <fieldset> is wrapping all your controls, I would suggeset giving it a fixed width and height and position your child elements based on that, i.e. use width: 100% for your children and give all of them the same margin so they align nicely. Also make sure you either edit your #progressBar style in the markup.
Here's a snippet with the changes I just mentioned:
body {
background: rgba(0, 0, 0, 0.0);
}
fieldset {
width: 508px;
height: 270px;
/* fixed width and height*/
margin: 13vh auto;
}
#p1 {
border: 4px dashed #0D0D0D;
/* modified the actual text box instead of the entire form */
width: 508px;
height: 140px;
line-height: 140px;
margin-top: 0px;
}
form p {
text-align: center;
color: #0D0D0D;
font-family: Arial;
}
h2 {
text-align: center;
}
form input[type="file"] {
position: absolute;
margin: 0;
outline: none;
width: 508px;
height: 140px;
margin: 22px 4px;
opacity: 1;
background-color: orange;
/* Last two properties are a visual representation. Delete background-color and set opacity to 0 */
}
form input[type="button"] {
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 100%;
/* width relative to parent fieldset */
height: 35px;
margin-top: -20px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form input[type="button"]:hover {
background: #149174;
color: #0C5645;
}
form input[type="button"]:active {
border: 0;
}
form progressBar {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury # DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event) {
//_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
function changeText() {
document.getElementById('p1').innerHTML = "1 file selected";
}
</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>Upload</h2>
<fieldset>
<legend>Group 1</legend>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<p id="p1">Drag your file here or click in this area.</p>
<input type="button" value="Upload File" onclick="uploadFile()">
<!-- changed progressBar style -->
<progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</fieldset>
<script>
// self executing function here
(function() {
document.getElementById('upload_form')[0].onchange = changeText;
})();
</script>
</body>
</html>
Hope it helps!
I created a dropdown list using the selectMenu jQuery widget and then created a dropdown component using it in the Angular so that I'm able to reuse the same component. Now, the problem which I am facing is that the dropdown list consists of 3 columns and the 2nd column contains the main content of each row. Now, whenever I am increasing the size (length) of the content to be put in the 2nd column, the heights of other two columns of each row are not adjusted dynamically. I'm confused on how to fix this issue? Given below is the image of the dropdown list, which I have created, with the unadjusted height of the row.
Here is the link to the codepen page with the example and the code which I have used: Codepen Dropdown link. I tried fixing this issue by using display:table-cell; in CSS file but my effort went in vain. Please suggest how to fix this issue. Moreover. here is the output which I desire.
Given below is the code snippet.
$(function() {
$.widget("custom.mySelectMenu", $.ui.selectmenu, {
_renderMenu: function(ul, items) {
var that = this,
currentCategory = "";
$.each(items, function(index, item) {
var li, name, short, price;
if (item.optgroup != currentCategory) {
ul.append(
"<li class='ui-selectmenu-category'>" +
item.optgroup +
"</li>"
);
currentCategory = item.optgroup;
}
li = that._renderItemData(ul, item);
console.log(ul);
name = li.text();
short = item.element.data("short");
price = item.element.data("price");
console.log(li, short, price);
li.prepend(
$("<span>", {
class: "short"
}).html(short)
);
li.append(
$("<span>", {
class: "price"
}).html(price)
);
if (item.optgroup) {
li.attr("aria-label", item.optgroup + " : " + item.label);
}
});
}
});
$("#options").mySelectMenu({
width: 300
});
$("#options")
.mySelectMenu("menuWidget")
.addClass("overflow");
});
.ui-selectmenu-category {
color: #5f5f5f;
padding: 0.5em 0.25em;
min-width: 290px;
}
.ui-selectmenu-category::after {
content: "PRICE";
float: right;
padding-right: 40px;
}
.ui-menu-item .ui-menu-item-wrapper {
display: inline-block;
padding: 1em 2px;
}
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
margin: 0;
border-width: 1px 0px 1px 0px;
border-color: #cccccc;
background-color: #e4ebf1;
color: #000;
}
.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
color: #2e6d99;
}
.ui-menu-item div.ui-menu-item-wrapper {
width: 290px;
}
.ui-menu-item .short {
color: #2e6d99;
font-weight: strong;
width: 30px;
padding-left: 0.5em;
position: absolute;
}
.ui-menu-item .price {
font-weight: strong;
width: 75px;
margin-right: -6px;
}
.overflow {
height: 200px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Custom Rendering</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label for="options">Select an Option:</label>
<select id="options">
<optgroup label="PREFERRED OPTIONS">
<option data-short="L" data-price="$0.00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
<option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
</optgroup>
<optgroup label="STANDARD OPTIONS">
<option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
<option data-short="K" data-price="$6.00" >Handknob</option>
</optgroup>
<optgroup label="ADDITIONAL OPTIONS">
<option data-short="F" data-price="$4.00">Hex Head Screw with Locknut</option>
<option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
<option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
</optgroup>
</select>
</body>
</html>
You can do it using with display:table and display:table-cell
$(function() {
$.widget("custom.mySelectMenu", $.ui.selectmenu, {
_renderMenu: function(ul, items) {
var that = this,
currentCategory = "";
$.each(items, function(index, item) {
var li, name, short, price;
if (item.optgroup != currentCategory) {
ul.append(
"<li class='ui-selectmenu-category'>" +
item.optgroup +
"</li>"
);
currentCategory = item.optgroup;
}
li = that._renderItemData(ul, item);
console.log(ul);
name = li.text();
short = item.element.data("short");
price = item.element.data("price");
console.log(li, short, price);
li.prepend(
$("<span>", {
class: "short"
}).html(short)
);
li.append(
$("<span>", {
class: "price"
}).html(price)
);
if (item.optgroup) {
li.attr("aria-label", item.optgroup + " : " + item.label);
}
});
}
});
$("#options").mySelectMenu({
width: 300
});
$("#options")
.mySelectMenu("menuWidget")
.addClass("overflow");
});
.ui-menu .ui-menu-item {
display:table; width:100%;
}
.ui-menu .ui-menu-item-wrapper {
position: relative;
padding: 3px 1em 3px .4em;
border-width: 1px 0 1px 0;
border-color: transparent;
border-style: solid;
}
.ui-selectmenu-category {
color: #5f5f5f;
padding: 0.5em 0.25em;
min-width: 290px;
}
.ui-selectmenu-category::after {
content: "PRICE";
float:right;
padding-right: 40px;
}
.ui-menu-item .ui-menu-item-wrapper {
display: table-cell;
vertical-align:top
padding: 1em 2px;
}
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
margin: 0;
border-width: 1px 0px 1px 0px;
border-color: #cccccc;
background-color: #e4ebf1;
color: #000;
}
.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
color: #2e6d99;
}
.ui-menu-item div.ui-menu-item-wrapper {
width: 290px;
}
.ui-menu-item .short {
color: #2e6d99;
font-weight: strong;
width: 30px;
padding-left: 0.5em;
position:absolute;
}
.ui-menu-item .price {
font-weight: strong;
width: 75px;
margin-right: -6px;
}
.overflow {
height: 200px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Custom Rendering</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label for="options">Select an Option:</label>
<select id="options">
<optgroup label="PREFERRED OPTIONS">
<option data-short="L" data-price="$0.00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
<option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
</optgroup>
<optgroup label="STANDARD OPTIONS">
<option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
<option data-short="K" data-price="$6.00" >Handknob</option>
</optgroup>
<optgroup label="ADDITIONAL OPTIONS">
<option data-short="F" data-price="$4.00">Hex Head Screw with Locknut</option>
<option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
<option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
</optgroup>
</select>
</body>
</html>
Very simple fix, add this:
.ui-menu .ui-menu-item:not(.ui-selectmenu-category) {
display: flex;
}
According to your code add this display: flex;
.ui-menu .ui-menu-item {
display: flex;
height: auto;
flex-direction: row;
margin: 0;
cursor: pointer;
list-style-image:
}
While clicking on the add button the static text and a text box is adding vertically.
How can I add this horizontally ?
How can I make this design responsive ?
For Desktop/Laptop : 4 in a row., Tablet: 3 in row and Mobile : 1 in a row.
Attached the HTML, Java script and css files. Please suggest.
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({'id': 'choice' + newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length - 1;
$scope.choices.splice(lastItem);
};
});
fieldset {
background: #FCFCFC;
padding: 16px;
border: 1px solid #D5D5D5;
}
.addfields {
margin: 10px 0;
}
#choicesDisplay {
padding: 10px;
background: rgb(227, 250, 227);
border: 1px solid rgb(171, 239, 171);
color: rgb(9, 56, 9);
}
.remove {
background: #C76868;
color: #FFF;
font-weight: bold;
font-size: 21px;
border: 0;
cursor: pointer;
display: inline-block;
padding: 4px 9px;
vertical-align: top;
line-height: 100%;
}
input[type="text"],
select {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<select>
<option>Mobile</option>
<option>Office</option>
<option>Home</option>
</select>
<input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</fieldset>
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
For making it responsive you should use Angular Material or Bootstrap
You can use Bootstrap grid (which can bug out in other way though since you won't have proper .rows when adding columns this way) or just use flexbox and code it manually as your requirements are really simple: https://css-tricks.com/dont-overthink-flexbox-grids/