Home Forums Porto Admin Template Putting Icon with basic select Replacement

  • This topic has 10 replies, 2 voices, and was last updated 3 months ago by  Support2. This post has been viewed 154 times
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #10030734
    mushi
    Participant

    Hey,
    Will you please explain, how can I put an icon with Tag Autocomplete like you did here with basic select but I am unable to put both (icon and select) in same row, They are overlapping no matter what i do.


    • This topic was modified 3 months ago by  mushi.
    #10030737
    Support2
    Keymaster

    Hello,

    Sorry but i’m little confused about your question.

    If you mean the Tag Autocomplete faeture from here: http://preview.oklerthemes.com/porto-admin/2.2.0/forms-advanced.html
    It’s not possible use with select.

    If you mean just a select with an icon in same row here is the code you need:

    <div class="input-group">
    	<span class="input-group-prepend">
    		<span class="input-group-text">
    			<i class="fas fa-user"></i>
    		</span>
    	</span>
    	<select class="form-control">
    		<option>Option 1</option>
    		<option>Option 2</option>
    		<option>Option 3</option>
    	</select>
    </div>

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030738
    mushi
    Participant

    i want to use left icon(font awesome) with (Tag Autocomplete) textbox.

    as you used in example Form-> Basic -> Form Elements -> Left Icon
    Example


    #10030741
    Support2
    Keymaster

    Hello,

    Thanks for the explanation.

    Here is the code you need:

    <div class="input-group">
    	<span class="input-group-prepend">
    		<span class="input-group-text">
    			<i class="fas fa-user"></i>
    		</span>
    	</span>
    	<div>
    		<input name="tags" id="tags-input" data-role="tagsinput" data-tag-class="badge badge-primary" class="form-control" value="Amsterdam,Washington,Sydney,Beijing" />
    	</div>
    </div>

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030744
    mushi
    Participant

    thanks it worked but how can i set its (Tag Autocomplete) width ? in your above example default width of textbox is too small.


    #10030748
    mushi
    Participant

    One more thing, How can I put pagination,search and records per page on advanced tables? I’m unable to find their code in tables-advanced.html file. Other things are working fine except these three. I’m using Advanced Tables.


    #10030750
    Support2
    Keymaster

    Hello,

    1) For a full width:

    <div class="input-group flex-nowrap">
    	<span class="input-group-prepend">
    		<span class="input-group-text">
    			<i class="fas fa-user"></i>
    		</span>
    	</span>
    	<div class="w-100">
    		<input name="tags" id="tags-input" data-role="tagsinput" data-tag-class="badge badge-primary" class="form-control" value="Amsterdam,Washington,Sydney,Beijing" />
    	</div>
    </div>

    2) The advanced tables are intialized trough JS. This means that the pagination, search and records are added trough the JS file js/examples/examples.datatables.default.js (this is the intialization code for the Basic Advanced Table here: http://preview.oklerthemes.com/porto-admin/2.2.0/tables-advanced.html). My suggestion is use as base the code of “Basic” advanced table.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030758
    mushi
    Participant

    Hey, Big thanks for your help. I have one more question to ask i have used icons (awesome fonts) in my datatables, I want to change their icons color (primary) on hover how can i do that?


    • This reply was modified 3 months ago by  mushi.
    #10030762
    mushi
    Participant

    One more thing, I’m using the code of “Basic” advanced table how can i use hover on table?


    #10030763
    mushi
    Participant

    Also how can i reduce table boxes height?


    • This reply was modified 3 months ago by  mushi.
    #10030767
    Support2
    Keymaster

    Hello,

    1) Porto Admin don’t comes with a class for hover primary color. In that case you need to create a custom class. First you need this HTML:

    <i class="fas fa-check custom-hover-primary"></i>

    Then add in (css/custom.css):

    /* Adds a transition effect */
    .custom-hover-primary {
        transition: ease color 300ms;
    }
    
    .custom-hover-primary:hover {
        color: #CCC; /* Change the color code to your primary color */
    }

    2) To change the hover effect on Basic Advanced Table:
    (css/custom.css):

    #datatable-default:hover {
        background: #000;
    }

    3) To change the width of table columns:

    <table class="table table-bordered table-striped mb-0" id="datatable-default">
    	<thead>
    		<tr>
    			<th>Rendering engine</th>
    			<th>Browser</th>
    			<th>Platform(s)</th>
    			<th class="d-lg-none">Engine version</th>
    			<th class="d-lg-none">CSS grade</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td width="200">Trident</td>
    			<td width="150">Internet
    				Explorer 4.0
    			</td>
    			<td>Win 95+</td>
    			<td class="center d-lg-none">4</td>
    			<td class="center d-lg-none">X</td>
    		</tr>
    		<tr>
    			<td>Trident</td>
    			<td>Internet
    				Explorer 5.0
    			</td>
    			<td>Win 95+</td>
    			<td class="center d-lg-none">5</td>
    			<td class="center d-lg-none">C</td>
    		</tr>
    	</tbody>
    </table>

    * Note the width attribute on the first <tr>. You can define the width only on the first <tr>.

    Let us know if you have more questions.

    Kind Regards,

    Rodrigo.


Viewing 11 posts - 1 through 11 (of 11 total)