Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom edit/list/view templates are getting improperly rendered HTML

See original GitHub issue

Supplying a custom template like:

{% extends 'admin/model/create.html' %}

{% block body %}
    {{ super() }}
{% endblock %}

and then passing these templates in the ModelView subclass like:


class RosterView(ModelView):
    list_template = 'web/roster_list.html.jinja'
    create_template = 'web/roster_create.html.jinja'
    edit_template = 'web/roster_edit.html.jinja'

    column_list = ['name', 'player_name', 'factions', 'entries', 'users', 'points']
    column_editable_list = ['name', 'player_name', 'factions', 'entries', 'users']

The HTML doesn’t get properly rendered, the resulting source looks like:


<!DOCTYPE html>
<html>
  <head>
    <title>Roster - Roster - Admin</title>
    
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
    
    
        <link href="/admin/static/bootstrap/bootstrap2/swatch/default/bootstrap.min.css?v=2.3.2" rel="stylesheet">
        <link href="/admin/static/bootstrap/bootstrap2/css/bootstrap-responsive.css?v=2.3.2" rel="stylesheet">
        <link href="/admin/static/admin/css/bootstrap2/admin.css?v=1.1.1" rel="stylesheet">
        
        <style>
        body {
            padding-top: 4px;
        }
        </style>
    
    
    
    
    
  &lt;link href=&#34;/admin/static/vendor/select2/select2.css?v=3.5.2&#34; rel=&#34;stylesheet&#34;&gt;
  &lt;link href=&#34;/admin/static/vendor/bootstrap-daterangepicker/daterangepicker-bs2.css?v=1.3.22&#34; rel=&#34;stylesheet&#34;&gt;
  
  
  &lt;link href=&#34;/admin/static/vendor/x-editable/css/bootstrap2-editable.css?v=1.5.1.1&#34; rel=&#34;stylesheet&#34;&gt;
  


    
    
  </head>
  <body>
    
    <div class="container">
      <div class="navbar">
        <div class="navbar-inner">
          
          <a class="brand" href="/admin">Admin</a>
          
          
          <ul class="nav">
            
  
        &lt;li&gt;
          &lt;a href=&#34;/admin/&#34;&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;dropdown&#34;&gt;
          &lt;a class=&#34;dropdown-toggle&#34; data-toggle=&#34;dropdown&#34; href=&#34;javascript:void(0)&#34;&gt;
            
            Pieces&lt;b class=&#34;caret&#34;&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class=&#34;dropdown-menu&#34;&gt;
              
              &lt;li&gt;
              &lt;a href=&#34;/admin/figure/&#34;&gt;
              Figure&lt;/a&gt;
              &lt;/li&gt;
              
              &lt;li&gt;
              &lt;a href=&#34;/admin/wargear/&#34;&gt;
              Wargear&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      
        &lt;li class=&#34;dropdown&#34;&gt;
          &lt;a class=&#34;dropdown-toggle&#34; data-toggle=&#34;dropdown&#34; href=&#34;javascript:void(0)&#34;&gt;
            
            Metadata&lt;b class=&#34;caret&#34;&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class=&#34;dropdown-menu&#34;&gt;
              
              &lt;li&gt;
              &lt;a href=&#34;/admin/keyword/&#34;&gt;
              Keyword&lt;/a&gt;
              &lt;/li&gt;
              
              &lt;li&gt;
              &lt;a href=&#34;/admin/faction/&#34;&gt;
              Faction&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      
        &lt;li class=&#34;dropdown&#34;&gt;
          &lt;a class=&#34;dropdown-toggle&#34; data-toggle=&#34;dropdown&#34; href=&#34;javascript:void(0)&#34;&gt;
            
            Rules&lt;b class=&#34;caret&#34;&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class=&#34;dropdown-menu&#34;&gt;
              
              &lt;li&gt;
              &lt;a href=&#34;/admin/ability/&#34;&gt;
              Ability&lt;/a&gt;
              &lt;/li&gt;
              
              &lt;li&gt;
              &lt;a href=&#34;/admin/specialization/&#34;&gt;
              Specialization&lt;/a&gt;
              &lt;/li&gt;
              
              &lt;li&gt;
              &lt;a href=&#34;/admin/tactic/&#34;&gt;
              Tactic&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      
        
        &lt;li class=&#34;active dropdown&#34;&gt;
        
          &lt;a class=&#34;dropdown-toggle&#34; data-toggle=&#34;dropdown&#34; href=&#34;javascript:void(0)&#34;&gt;
            
            Roster&lt;b class=&#34;caret&#34;&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class=&#34;dropdown-menu&#34;&gt;
              
              &lt;li class=&#34;active&#34;&gt;
              
              &lt;a href=&#34;/admin/roster/&#34;&gt;
              Roster&lt;/a&gt;
              &lt;/li&gt;
              
              &lt;li&gt;
              &lt;a href=&#34;/admin/rosterentry/&#34;&gt;
              Roster Entry&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      
        &lt;li class=&#34;dropdown&#34;&gt;
          &lt;a class=&#34;dropdown-toggle&#34; data-toggle=&#34;dropdown&#34; href=&#34;javascript:void(0)&#34;&gt;
            
            User&lt;b class=&#34;caret&#34;&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class=&#34;dropdown-menu&#34;&gt;
              
              &lt;li&gt;
              &lt;a href=&#34;/admin/user/&#34;&gt;
              User&lt;/a&gt;
              &lt;/li&gt;
              
              &lt;li&gt;
              &lt;a href=&#34;/admin/role/&#34;&gt;
              Role&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      

          </ul>
          
          
          <ul class="nav pull-right">
            
  
  

          </ul>
          
          
          
        </div>
      </div>

      
      
  
    
  

      

      
      

      
    
    
    <ul class="nav nav-tabs actions-nav">
        <li class="active">
            <a href="javascript:void(0)">List</a>
        </li>

        
        <li>
            <a href="/admin/roster/new/?url=%2Fadmin%2Froster%2F" title="Create New Record">Create</a></li>
        

        

        

        

        

        
        <li class="dropdown">
            &lt;a class=&#34;dropdown-toggle&#34; data-toggle=&#34;dropdown&#34; href=&#34;javascript:void(0)&#34;&gt;With selected&lt;b class=&#34;caret&#34;&gt;&lt;/b&gt;&lt;/a&gt;
    &lt;ul class=&#34;dropdown-menu&#34;&gt;
        
        &lt;li&gt;
            &lt;a href=&#34;javascript:void(0)&#34; onclick=&#34;return modelActions.execute(&#39;delete&#39;);&#34;&gt;Delete&lt;/a&gt;
        &lt;/li&gt;
        
    &lt;/ul&gt;

        </li>
        

        
        

    </ul>
    

    

    
    <div id="no-more-tables">
    <table class="table table-striped table-bordered table-hover model-list cf">
        <thead class="cf">
            <tr>
                
                    
                    <th class="list-checkbox-column">
                        <input type="checkbox" name="rowtoggle" class="action-rowtoggle" title="Select all records" />
                    </th>
                    
                    
                        
                        <th class="span1">&nbsp;</th>
                        
                    
                    
                    
                    <th class="column-header col-name">
                        
                            
                                <a href="/admin/roster/?sort=0" title="Sort by Name">Name</a>
                            
                        
                        
                    </th>
                    
                    
                    <th class="column-header col-player_name">
                        
                            
                                <a href="/admin/roster/?sort=1" title="Sort by Player Name">Player Name</a>
                            
                        
                        
                    </th>
                    
                    
                    <th class="column-header col-factions">
                        
                            Factions
                        
                        
                    </th>
                    
                    
                    <th class="column-header col-entries">
                        
                            Entries
                        
                        
                    </th>
                    
                    
                    <th class="column-header col-users">
                        
                            Users
                        
                        
                    </th>
                    
                    
                    <th class="column-header col-points">
                        
                            Points
                        
                        
                    </th>
                    
                
            </tr>
        </thead>
        
        <tr>
            <td colspan="999">
                
                <div class="text-center">
                    There are no items in the table.
                </div>
                
            </td>
        </tr>
        
    </table>
    </div>
    
    
    
    
    
    

    
    
    &lt;form id=&#34;action_form&#34; action=&#34;/admin/roster/action/&#34; method=&#34;POST&#34; style=&#34;display: none&#34;&gt;
        
        &lt;input id=&#34;url&#34; name=&#34;url&#34; type=&#34;hidden&#34; value=&#34;/admin/roster/&#34;&gt;
        &lt;input id=&#34;action&#34; name=&#34;action&#34; type=&#34;hidden&#34; value=&#34;&#34;&gt;
    &lt;/form&gt;
    


    </div>
    

    
    <script src="/admin/static/vendor/jquery.min.js?v=3.3.1" type="text/javascript"></script>
    <script src="/admin/static/bootstrap/bootstrap2/js/bootstrap.min.js?v=2.3.2" type="text/javascript"></script>
    <script src="/admin/static/vendor/moment.min.js?v=2.22.2" type="text/javascript"></script>
    <script src="/admin/static/vendor/select2/select2.min.js?v=3.5.2" type="text/javascript"></script>
    
    

    
    
    

    

    
  
  &lt;script src=&#34;/admin/static/vendor/bootstrap-daterangepicker/daterangepicker.js?v=1.3.22&#34;&gt;&lt;/script&gt;
  
  &lt;script src=&#34;/admin/static/vendor/x-editable/js/bootstrap2-editable.min.js?v=1.5.1.1&#34;&gt;&lt;/script&gt;
  
  &lt;script src=&#34;/admin/static/admin/js/form.js?v=1.0.1&#34;&gt;&lt;/script&gt;

    <script src="/admin/static/admin/js/filters.js?v=1.0.0"></script>

    
    
        &lt;div id=&#34;actions-confirmation-data&#34; style=&#34;display:none;&#34;&gt;{&#34;delete&#34;: &#34;Are you sure you want to delete selected records?&#34;}&lt;/div&gt;
        &lt;div id=&#34;message-data&#34; style=&#34;display:none;&#34;&gt;&#34;Please select at least one record.&#34;&lt;/div&gt;
        &lt;script src=&#34;/admin/static/admin/js/actions.js?v=1.0.0&#34;&gt;&lt;/script&gt;
    


  </body>
</html>

And the appearance is like:

I’m just following the example from the documentation here: https://flask-admin.readthedocs.io/en/latest/introduction/#extending-the-built-in-templates

Is there something missing to make this template customization work? When I don’t try to override defaults everything appears to work correctly

Issue Analytics

State:
Created 4 years ago
Comments:5

Top GitHub Comments

2reactions

TomHall2020commented, Feb 22, 2022

Appreciate this has been a while, but may be helpful for those searching for this problem. I had a similar issue although it was only the top navbar links that were escaped out and displaying incorrectly for me.

I was able to resolve by changing my custom template extension from .html.j2 to .html. I noticed your custom template also had the double extension .html.jinja. Not sure why the admin templating system is being picky about the file extension?

0reactions

jjjacksncommented, Apr 20, 2022

Just had the same issue here using templates ending with .html.jinja.

Top Results From Across the Web

Django displays incorrect template - python - Stack Overflow

When Clients want to see their calculations, correct information is displayed but the template rendered is for Administrators rather than for ...

Django Tutorial Part 6: Generic list and detail views

In this tutorial we're going to complete the first version of the ... and then call render() to pass the list to a...

NetSuite Applications Suite - Oracle Help Center

Create a View to Render a Registered Page Type · Register a Page Type · Register a Template · Supported Page Types ·...

ListView - Android Developers

To display a more custom view for each item in your dataset, implement a ListAdapter. For example, extend BaseAdapter and create and configure...

Custom Render Textures - Unity - Manual

Writing a shader for a Custom Render Texture ; _CustomRenderTexture3DSlice, float, Index of the current 3D slice being processed. This only applies to...