CODEWITHSUNDEEP
javascriptcssruby-on-railsangularjs
dosuken123
dosuken123

Reputation: 468

CSS "float: none;" prevents a Javascript function "ng-click"?

This is a peculiar problem.
"float: none;" seems to prevent executions of Javascript (ng-click).

new.html.haml (where has "float: none;")

.container{ng: {controller: 'sample_1_controller'}}
  %nav.bread.mgn
    %ol.breadcrumb
      %li crumb1
      %li crumb2
  = render "shared/menu"
  .content_left{:style => "float: none; margin: 0 auto;"}
    %form{:action => "", "ng-submit" => "verify_method($event)"}
      %div blahblahblah
      %button{:type => "submit"} Proceed

shared/_menu.html.haml (where has "ng-click")

.menu
  %a{'ng-click' => "toggle_menu()"} Menu
  %div blahblahblah

Since "shared/menu" is rendered from everywhere, toggle_menu() method is declared in application_controller.js.coffee, which has a bigger scope than sample_1_controller.

application_controller.js.coffee (where has "toggle_menu()")

$scope.toggle_menu = ()->
  console.log "Clicked!!!!"

Now we are ready...
If i remove "float: none;", Console outputs "Clicked!!!!".
If i left "float: none;", Console doesn't output "Clicked!!!!".

Weird....

Upvotes: 0

Views: 106

Answers (1)

Younis Ar M
Younis Ar M

Reputation: 941

inspect the element, some other div might be overlapping the button, hence the button might not be getting clicked at all.

Upvotes: 5

Related Questions