8000 Width of suggestion box in Autocomplete · Issue #1860 · volosoft/jtable · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Width of suggestion box in Autocomplete #1860

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
dasguptahirak opened this issue Nov 30, 2015 · 3 comments
Open

Width of suggestion box in Autocomplete #1860

dasguptahirak opened this issue Nov 30, 2015 · 3 comments

Comments

@dasguptahirak
Copy link

I have successfully created an autocomplete field with the help of issue #115, but could not able to control the width of suggestion box in "create" and "edit" form.

The suggestion box is taking width of the complete window frame.

Any suggestions???

Before using autocomplete field
image

After using Autocomplete field "Loco No"
image
@dambangoc
Copy link

Hj, how can you create form with tows collumns, i used jtable but this just only generate form one column.

@dasguptahirak
Copy link
Author

@dambangoc : Sorry for replying late

You have to write below code above your jtable for displaying fields in two columns (in create and edit form)

<style>
#jtable-create-form {
    display: block;
    width: 650px;
    -moz-column-gap:10px;
    /* Firefox */
    -webkit-column-gap:10px;
    /* Safari and Chrome */
    column-gap:10px;
    -moz-column-count:2;
    /* Firefox */
    -webkit-column-count:2;
    /* Safari and Chrome */
    column-count:4;
}
#jtable-edit-form {
    display: block;
    width: 650px;
    -moz-column-gap:40px;
    /* Firefox */
    -webkit-column-gap:40px;
    /* Safari and Chrome */
    column-gap:40px;
    -moz-column-count:2;
    /* Firefox */
    -webkit-column-count:2;
    /* Safari and Chrome */
    column-count:2;
}
</style>

 <script type="text/javascript">

    var colArray=[];
    //colArray="<%= loco_num %>";
    //alert("initial");
    <% for (int i=0; i<loco_num.length; i++) { %>

    colArray[<%= i %>] = "<%= loco_num[i] %>"; 
    <% } %>
//  div.jtable-column-header-container {height: auto !important;}
    $(document).ready(function() {



        $('#PunctualityDirectTableContainer').jtable({


            title : 'Punctuality Direct',
            paging: true,
            pageSize : 10,
            sorting: true,
            defaultSorting: 'DLocoNumber ASC',

            selecting: true, //Enable selecting
            //multiselect: false, 
            //selectingCheckboxes: true,
           // animationsEnabled : true,
            toolbar: {
                items: [{
                    icon: '<%=cp%>/layout/images/table_excel.png',
                    text: 'Export to Excel',
                    click: function () {
                        window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#LocoMasterTableContainer').html()));
                        //perform your custom job...
                    }
                },{
                    icon: '/images/pdf.png',
                    text: 'Export to Pdf',
                    click: function () {
                        //perform your custom job...
                    }
                }]
            },




            actions : {
                listAction   : 'listPunctualityDirectAction',
                createAction : 'createPunctualityDirectAction',
                updateAction : 'updatePunctualityDirectAction',
                deleteAction : 'deletePunctualityDirectAction'
            },
            fields : {
                DNotification : {
                    title : 'Notification No',
                    width : '5%',
                    key : true,
                    list : true,

                    edit : true,
                    //create : true,
                    sorting: true
                    //inputClass: 'validate[required,custom[integer],minSize[5],maxSize[5]]'

                },
                DRDate :{
                    title : 'Rep Date',
                    width : '5%',
                    type: 'date',
                    displayFormat: 'dd-mm-yy',



                        edit : true,

                        sorting: true
                },
                DTrainNo : {
                    title : 'Train No',
                    width : '5%',
                    list : true,
                    edit : true,
                    create : true,
                    sorting: true,
                    inputClass: 'validate[required,custom[integer],minSize[5],maxSize[5]]'

                },
                .........

@MagicJack
Copy link
MagicJack commented Apr 26, 2016 •
edited
Loading

Instead of using 2 columns, I make the lables at left hand side and input fields at right hand side.
It has the effects of 2 columns but won't the side effect of 2 column: when you have odd field to edit.

form.jtable-dialog-form {
    font-size: 14px;
}
#jtable-create-form, #jtable-edit-form {
    width: 450px;
}
#jtable-edit-form   div.jtable-input-field-container,
#jtable-create-form div.jtable-input-field-container  {
    height: 1.8em;
}
/* Sytles for Add/Edit form: label and input in one line */
#jtable-edit-form   div.jtable-input-field-container div.jtable-input-label,
#jtable-create-form div.jtable-input-field-container div.jtable-input-label {
    text-align: right;
    float: left;
    width: 48%;
    height: 1em;
    white-space: nowrap;
}
/* Sytles for Add/Edit form: label and input in one line */
#jtable-edit-form   div.jtable-input-field-container div.jtable-input,
#jtable-create-form div.jtable-input-field-container div.jtable-input {
    float: right;
    width: 48%;
    height: 1em;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@dasguptahirak @MagicJack @dambangoc
0