how to set html inline css from django


Tags: html,css,django

Problem :

Hi everyone, I am stuck at one point while rendering the data from django views. I want to use the CSS data produced in views to be used in the template. I did all I could do, i) inserted the element into the RequestContext, sent it to template ii) From here, I tried to insert that CSS style data into div tag

This is my css data in VIEW( they are "left:xx px top: xx px" positions)

coords = {'usa':['usamap.png',['635px','322px'],['592px','381px'],['541px','398px'],['115px','582px']],
           'canada':['canadamap.png',['201px','336px'],['377px','565px'],['420px','600px'],['441px','648px']]
             }

template = loader.get_template('polls/phasex.html')
context = RequestContext(request,{'id_list':id_list,'country':country,'coords':coords[key],'temp':temp,})
return HttpResponse(template.render(context))

On template I am trying to access the data:

<div style={{'left: '|add:coords.1.0|add:'; top: '|add:coords.1.1|add:';'}} >
<text>{{'left: '|add:coords.1.0|add:'; top: '|add:coords.1.1|add:';'}}</text>

actually i should get this when i run:

<div style = 'left: 635px; top: 322px'>

But i am getting this on the webpage:

<div style="left:" 635px;="" top:="" 322px;="">
<text>left: 635px; top: 322px;</text>
</div>

I can't understand where's the problem? The text box was for debugging. It's printing properly, but i'm not getting the same inside css styles.

Thanks in Advance



Solution :

You have to place variables inside quotes, like this:

<div style="left:{{ variable }}"></div>

And not like this

<div style={{ "left: variable" }}></div>

    CSS Howto..

    CSS: How to position a div in the center with dynamic width

    How to push elements after absolute element

    How to style PushButton's image size on hover/pressed in Qt4 using CSS

    Data Tables in tabPanel output from navPanel in Shiny: How to change background colors using CSS

    Should I teach CSS layout directly to new learners or should I first teach how to make layout with tables, then table-less layouts?

    How to remove space between columns in BluePrint CSS framework?

    How to check if css box-shadow is supported (jQuery)?

    how do I prevent max-height transition from scrolling the page to the top?

    How to force a div to scale at 100% width of the current windows Browser

    LESS: How to specify current tag with nesting?

    How often to use REM in CSS [closed]

    How do I keep a grid-type-arrangement of floating div elements centered in their container at various screen widths? [closed]

    How to segregate these divs with 'position:absolute' into different groups?

    How do I make a (mock) bank system? [closed]

    How to remove dash inside text with CSS?

    How to rotate Images in HTML using CSS in FireFox..? [duplicate]

    How do i get a font to show up smooth like this?

    How to build a submenu with CSS?

    How to link an external stylesheet in CSS

    How to prevent the button from submission the form after sending it?

    How to center items inside isotope container?

    Cakephp how to remove underline on links

    How can I do this: text inside rectangle using HTML/CSS?

    CSS: How to force objects to stay inside container but allow full width background? [duplicate]

    Ionic: How to center a div?

    How do I change the MVC Bootstrap layout to have more than one columns

    How Should I Display This Background Using CSS?

    How to change css by using tag or class name in typescript?

    How do you resize a container between two others?

    How can I fix the indentation in a facebook like-box?