Comments (8)
Hi @apedrolli ,
Need to have a look first.. Can you paste your code (with those long labels) into plunker or jsfiddle?
from angular-multi-select.
Here you are!
http://embed.plnkr.co/s0ehmpGx2NVTq7PZrAWN/preview
thanks.
p.s. the problem is not on the label of the button, but on the label of the items in the item list
from angular-multi-select.
Hi @apedrolli ,
This is the consequence of using position: absolute
on the checkboxLayer. There's nothing I can do about this.
If it's really important to you, either you change your page layout, or you can do this:
- Get the screen (or maybe viewport?) width
- Get the x pos of the checkboxLayer
- Get the width of the checkboxLayer
- If ( checkboxLayer x pos + checkboxLayer width ) > screen width then add that
right: 0px;
Painful, I know :)
from angular-multi-select.
I'll try it! Little help on where this must be done? I think inside angular-multi-select.js, but where?
This info will fast me a lot.
Thanks.
from angular-multi-select.
I think you can do this using the on-open
callback instead, so you can define the function in your controller.
One possible problem; I'm not sure how are you going to grab that particular checkboxLayer, especially if you are using more than one directive in a page. Maybe you really need to wrap that directive in a div
, give an ID to that div, and then you grab it using the div's #ID .checkboxLayer selector.
from angular-multi-select.
You're right! I was forgetting that there are those callbacks!
I'll definitely try.
Thanks again!
from angular-multi-select.
if it could be usefull for someone, here is my code:
$scope.calcolaPosizione = function ($event) {
var s = event.target.nextElementSibling;
if (s.getBoundingClientRect) { // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
var rect = s.getBoundingClientRect ();
x = rect.left;
//y = rect.top;
w = rect.right - rect.left;
//h = rect.bottom - rect.top;
console.log(" Left: " + x + "\n Width: " + w);
}
else {
console.log("Your browser does not support this example!");
}
var win = $window.innerWidth ;
if (x + w > win) {
console.log("need to set right:0");
event.target.nextElementSibling.style.right = "0px";
}
}
called by on-open="calcolaPosizione()"
thanks for the hints.
from angular-multi-select.
Hi @apedrolli ,
Thanks, great job on the code. Now I know what to suggest when others have similar problem.
I'll be closing this issue then. Cheers.
from angular-multi-select.
Related Issues (20)
- How to add tooltip for each dropdown element? HOT 9
- how to add default text when data is not bound to multiselect? HOT 1
- Reset doesn't set all values' 'ticked' property to false HOT 2
- output-model needn't be a compulsory attribute HOT 4
- Is there any angular 4 version of this available ? HOT 2
- Use same input-model to multiple multiselectors? HOT 4
- Select items from single group only
- XSS attack by option name
- Mutli select not support direction
- how to select all items loaded on the control??
- How to prevent .length == 'undefined' error when populating dropdown via on-open
- Filtering problem when grouped
- Grouping
- Issue injecting multi-select directive into another directive with same scope
- make filter clear button 'x' icon encoded
- Possible to launch dropdown from custom button?
- will it be possible to give remove option to the selected items in the ui HOT 1
- Search not working when grouping is enabled.
- Any ways to dynamically update helper-elements?
- Multiple elements selected when only one is clicked HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-multi-select.