JSFiddle - React, Tailwind, and code Playground

Element Width

by pmamode

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<div ng-app="App">
  <div ng-controller="ctrl">
    <span style="" ng-click="myfunction(this)" ng-init="count=0">
      mercedes
    </span>
    <span>
  Element: {{test}}
</span>
<select style="width: {{test}}px">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
  </div>
</div><br>

<div>
Every good boy does find.  
<span class="dropdown">
  <span class="dropbtn">Dropdown</span>
  <div class="dropdown-content">
    <span>1ajkflajlkafsjalfj</span>
    <span>Link 2</span>
    <span>Link 3</span>
  </div>
</span>  Jack and Jill went up a hill.
</div>

CSS

.dropbtn {
    background-color: grey;
    color: white;
    padding: 0px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 0px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content span {
    color: black;
    padding: 2px 2px;
    text-decoration: none;
    display: block;
}

.dropdown-content span:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

JavaScript

var app = angular.module('App', []);

function ctrl($scope) {


  $scope.myfunction = function(msg, $event) {
    var el = event.target
    $scope.test = event.target.offsetWidth;
  }



}