Search code examples
ruby-on-railsactionviewhelper

how to add styles to actionview helper tags?


how do i add styles to actionviews helper tags. like the following

<%= link_to "Home", :controller=> "home", :action=> "index", :style=>{:position=>"absolute", :top=>"0px"} %>

is something like the above achievable. I dont want to add css classes.

Thanks.

Update-- sorry Salil. it doesn't work for link_to_remote. I need a solution that works for any helper tag

<%= link_to_remote "Next", :style=>"float:right;", :update=>"uxUpdateDiv", :url=>{:controller=> "home", :action=> "next"}, :before=> "jQuery('#uxcLoader').css('display','block'); jQuery('#uxOverLay').css('display','block');",:success=> "jQuery('#uxcLoader').css('display','none'); jQuery('#uxOverLay').css('display','none');" %>

the style doesn't seem to be applied at all...!! even a style attribute is not formed.


Solution

  • Yes you an do it in following way

    <%= link_to "Home", {:controller=> "home", :action=> "index"}, :style=>"position:absolute;top:0px" %>
    

    This will create following HTML

    <a href="/home" style="position: absolute; top: 0px;">Home</a>
    

    It depends on which tag you are using for some tag you have to add :html>{}

    For link_to_remote you have to write

    <%= link_to_remote "Next", 
                    :update=>"uxUpdateDiv", 
                    :url=>{:controller=> "home", :action=> "next"}, 
                    :html=>{:style=>"float:right;"},
                    :before=> "jQuery('#uxcLoader').css('display','block'); jQuery('#uxOverLay').css('display','block');",
                    :success=> "jQuery('#uxcLoader').css('display','none'); jQuery('#uxOverLay').css('display','none');" %>
    

    this will create following html check it out.

    <a href="#" onclick="jQuery('#uxcLoader').css('display','block'); jQuery('#uxOverLay').css('display','block');; new Ajax.Updater('uxUpdateDiv', '/home/next', {asynchronous:true, evalScripts:true, onSuccess:function(request){jQuery('#uxcLoader').css('display','none'); jQuery('#uxOverLay').css('display','none');}}); return false;" style="float: right;">Next</a>