Wrap icons

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.0.13 - 2018-05-21
+### Fixed
+- Position icons now wrap when constrained.
+
 ## 1.0.12 - 2018-05-21
 ### Fixed
 - Fix documentation links

composer.json

@@ -2,7 +2,7 @@
     "name": "rias/craft-position-fieldtype",
     "description": "Brings back the Position fieldtype from Craft 2",
     "type": "craft-plugin",
-    "version": "1.0.12",
+    "version": "1.0.13",
     "keywords": [
         "craft",
         "cms",

src/assetbundles/positionfieldtype/dist/css/PositionFieldtype.css

@@ -42,3 +42,7 @@
 .position-icon-right:before {
     content: "\e905";
 }
+.position-fieldtype.btngroup {
+    flex-wrap: wrap;
+    height: auto;
+}

src/templates/_components/fields/Position_input.twig

@@ -14,7 +14,7 @@
 
 {% import "_includes/forms" as forms %}
 
-<div id="{{ id }}" class="btngroup big">
+<div id="{{ id }}" class="position-fieldtype btngroup big">
     {% for option, label in allOptions %}
         {% if field.options[option] %}
             <div title="{{ label }}" class="btn big {% if value is not null ? option == value : field.default == option %} active{% endif %} position-icon-{{ option }}" data-option="{{ option }}"></div>

src/templates/_components/fields/Position_settings.twig

@@ -50,7 +50,7 @@
         </div>
     </div>
 
-    <div id="{{ id }}" class="btngroup big">
+    <div id="{{ id }}" class="position-fieldtype btngroup big">
         {% for option, label in allOptions %}
             <div title="{{ label }}" class="btn big {% if settings.default is not empty and settings.default == label %} active{% endif %} position-icon-{{ label }}" data-option="{{ label }}"></div>
         {% endfor %}