Skip to content

Commit 604824f

Browse files
author
pipeline
committed
sample(EJ2-4521): Width corrected in dropdown components template sample.
1 parent 80b4a8c commit 604824f

File tree

8 files changed

+8
-20
lines changed

8 files changed

+8
-20
lines changed

‎src/autocomplete/template-plnkr.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\n/**\n * AutoComplete Template Sample\n */\nimport { AutoComplete } from '@syncfusion/ej2-dropdowns';\n\n\n\n let empList: { [key: string]: Object }[] = [\n { name: 'Andrew Fuller', eimg: '7', designation: 'Team Lead', country: 'England' },\n { name: 'Anne Dodsworth', eimg: '1', designation: 'Developer', country: 'USA' },\n { name: 'Janet Leverling', eimg: '3', designation: 'HR', country: 'USA' },\n { name: 'Laura Callahan', eimg: '2', designation: 'Product Manager', country: 'USA' },\n { name: 'Margaret Peacock', eimg: '6', designation: 'Developer', country: 'USA' },\n { name: 'Michael Suyama', eimg: '9', designation: 'Team Lead', country: 'USA' },\n { name: 'Nancy Davolio', eimg: '4', designation: 'Product Manager', country: 'USA' },\n { name: 'Robert King', eimg: '8', designation: 'Developer ', country: 'England' },\n { name: 'Steven Buchanan', eimg: '10', designation: 'CEO', country: 'England' }\n ];\n\n let atcObj: AutoComplete = new AutoComplete({\n dataSource: empList,\n fields: { value: 'name' },\n headerTemplate:\n '<div class=\"header\"> <span>Photo</span> <span class=\"info\">Employee Info</span></div>',\n itemTemplate: '<div><img class=\"empImage\" src=\"http://npmci.syncfusion.com/production/demos/src/autocomplete/Employees/${eimg}.png\" alt=\"employee\"/>' +\n '<div class=\"ename\"> ${name} </div><div class=\"job\"> ${designation} </div></div>',\n placeholder: 'e.g. Andrew Fuller',\n popupHeight: '450px'\n });\n atcObj.appendTo('#employees');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"1\" id=\"employees\">\n </div>\n </div>\n</div>\n\n\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 250px;\n }\n\n .header {\n font-weight: 600;\n color: rgba(0, 0, 0, .54);\n height: 48px;\n padding: 15px 0 0 16px;\n font-size: 16px;\n background-color: #f5f5f5;\n font-family: \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\"; \n }\n\n .fabric .header {\n background-color: #fff;\n border-bottom: 1px solid #ccc;\n color: #0078d7;\n font-weight: 400;\n }\n\n .bootstrap .header {\n background-color: #fff;\n border-bottom: 1px solid #ccc;\n color: #777;\n font-family: \"Helvetica Neue\", \"Helvetica\", \"Arial\", \"sans-serif\";\n font-weight: 400;\n font-size: 12px;\n line-height: 30px;\n height: 30px;\n padding: 0 0 0 24px;\n }\n .e-bigger.bootstrap .header {\n line-height: 44px;\n height: 44px;\n font-size: 13px;\n }\n .bootstrap .info,\n .e-bigger.bootstrap .info {\n margin-left: 25px;\n }\n .bootstrap .job {\n opacity: .54;\n font-size: 14px;\n margin-top: -25px;\n margin-bottom: 20px;\n }\n .e-bigger.bootstrap .job { \n font-size: 15px;\n margin-top: -32px;\n margin-bottom: 17px;\n }\n .bootstrap .ename {\n font-size: 15px;\n margin-top: 20px;\n opacity: .87;\n padding: 3px 0 20px;\n }\n .e-bigger.bootstrap .ename{\n font-size: 16px;\n padding-bottom: 15px;\n }\n .bootstrap .empImage,\n .e-bigger.bootstrap .empImage {\n margin: 0px 10px 0 20px;\n } \n .e-bigger.bootstrap .empImage {\n width: 60px;\n height: 60px;\n }\n\n .info {\n margin-left:17px;\n }\n\n .ename {\n display: block !important;\n opacity: .87;\n font-size: 16px;\n margin-top: 8px;\n }\n\n .job {\n opacity: .54;\n font-size: 14px;\n margin-top: -15px;\n margin-bottom: 7px;\n }\n\n .empImage {\n margin: 6px 16px;\n float: left;\n width: 50px;\n height: 50px;\n }\n\n #employees_popup.e-popup .e-list-item * {\n display: block;\n text-indent: 0;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup .e-dropdownbase .e-list-item {\n line-height: 42px;\n height: 80px;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup.e-popup .empImage {\n margin: 10px 16px;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
1+
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\n/**\n * AutoComplete Template Sample\n */\nimport { AutoComplete } from '@syncfusion/ej2-dropdowns';\n\n\n\n let empList: { [key: string]: Object }[] = [\n { name: 'Andrew Fuller', eimg: '7', designation: 'Team Lead', country: 'England' },\n { name: 'Anne Dodsworth', eimg: '1', designation: 'Developer', country: 'USA' },\n { name: 'Janet Leverling', eimg: '3', designation: 'HR', country: 'USA' },\n { name: 'Laura Callahan', eimg: '2', designation: 'Product Manager', country: 'USA' },\n { name: 'Margaret Peacock', eimg: '6', designation: 'Developer', country: 'USA' },\n { name: 'Michael Suyama', eimg: '9', designation: 'Team Lead', country: 'USA' },\n { name: 'Nancy Davolio', eimg: '4', designation: 'Product Manager', country: 'USA' },\n { name: 'Robert King', eimg: '8', designation: 'Developer ', country: 'England' },\n { name: 'Steven Buchanan', eimg: '10', designation: 'CEO', country: 'England' }\n ];\n\n let atcObj: AutoComplete = new AutoComplete({\n dataSource: empList,\n fields: { value: 'name' },\n headerTemplate:\n '<div class=\"header\"> <span>Photo</span> <span class=\"info\">Employee Info</span></div>',\n itemTemplate: '<div><img class=\"empImage\" src=\"http://npmci.syncfusion.com/production/demos/src/autocomplete/Employees/${eimg}.png\" alt=\"employee\"/>' +\n '<div class=\"ename\"> ${name} </div><div class=\"job\"> ${designation} </div></div>',\n placeholder: 'e.g. Andrew Fuller',\n popupHeight: '450px'\n });\n atcObj.appendTo('#employees');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"1\" id=\"employees\">\n </div>\n </div>\n</div>\n\n\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 300px;\n }\n\n .header {\n font-weight: 600;\n color: rgba(0, 0, 0, .54);\n height: 48px;\n padding: 15px 0 0 16px;\n font-size: 16px;\n background-color: #f5f5f5;\n font-family: \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\"; \n }\n\n .fabric .header {\n background-color: #fff;\n border-bottom: 1px solid #ccc;\n color: #0078d7;\n font-weight: 400;\n }\n\n .bootstrap .header {\n background-color: #fff;\n border-bottom: 1px solid #ccc;\n color: #777;\n font-family: \"Helvetica Neue\", \"Helvetica\", \"Arial\", \"sans-serif\";\n font-weight: 400;\n font-size: 12px;\n line-height: 30px;\n height: 30px;\n padding: 0 0 0 24px;\n }\n .e-bigger.bootstrap .header {\n line-height: 44px;\n height: 44px;\n font-size: 13px;\n }\n .bootstrap .info,\n .e-bigger.bootstrap .info {\n margin-left: 25px;\n }\n .bootstrap .job {\n opacity: .54;\n font-size: 14px;\n margin-top: -25px;\n margin-bottom: 20px;\n }\n .e-bigger.bootstrap .job { \n font-size: 15px;\n margin-top: -32px;\n margin-bottom: 17px;\n }\n .bootstrap .ename {\n font-size: 15px;\n margin-top: 20px;\n opacity: .87;\n padding: 3px 0 20px;\n }\n .e-bigger.bootstrap .ename{\n font-size: 16px;\n padding-bottom: 15px;\n }\n .bootstrap .empImage,\n .e-bigger.bootstrap .empImage {\n margin: 0px 10px 0 20px;\n }\n\n .info {\n margin-left:17px;\n }\n\n .ename {\n display: block !important;\n opacity: .87;\n font-size: 16px;\n margin-top: 8px;\n }\n\n .job {\n opacity: .54;\n font-size: 14px;\n margin-top: -15px;\n margin-bottom: 7px;\n }\n\n .empImage {\n margin: 6px 16px;\n float: left;\n width: 50px;\n height: 50px;\n }\n\n #employees_popup.e-popup .e-list-item * {\n display: block;\n text-indent: 0;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup .e-dropdownbase .e-list-item {\n line-height: 42px;\n height: 80px;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup.e-popup .empImage {\n margin: 10px 16px;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

‎src/autocomplete/template.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<style>
2525
.control-wrapper {
2626
margin: 0 auto;
27-
width: 250px;
27+
width: 300px;
2828
}
2929

3030
.header {
@@ -88,10 +88,6 @@
8888
.bootstrap .empImage,
8989
.e-bigger.bootstrap .empImage {
9090
margin: 0px 10px 0 20px;
91-
}
92-
.e-bigger.bootstrap .empImage {
93-
width: 60px;
94-
height: 60px;
9591
}
9692

9793
.info {

0 commit comments

Comments
 (0)