Comments (4)
Yes, that's something I had noticed too, although forgot to make a bug report for it. Thanks.
I need to create one for big lengths too, which also break everything.
from dabblet.
Does anyone have any design ideas about how it should show for smaller lengths? Should the triangle just become smaller and eventually disappear?
from dabblet.
Yes, shrinking the arrow is one of the possible solutions, so for the 10px it would look like
What for the code: you can try to change it based on the attribute selectors or add classes according to the ballon's width (class version is better for performance) and then style every small variant.
Here I created a rough draft of how this can be coded:
#abslength[style*='width: 16px']:before,
#abslength[style*='width: 15px']:before {
bottom: -6px;
width: 11px;
height: 11px;
}
#abslength[style*='width: 14px']:before,
#abslength[style*='width: 13px']:before {
bottom: -6px;
width: 10px;
height: 10px;
margin-left: -5px;
}
#abslength[style*='width: 12px']:before,
#abslength[style*='width: 11px']:before {
bottom: -5px;
width: 9px;
height: 9px;
margin-left: -5px;
}
#abslength[style*='width: 10px']:before,
#abslength[style*='width: 9px']:before {
bottom: -4px;
width: 7px;
height: 7px;
margin-left: -4px;
}
#abslength[style*='width: 8px']:before,
#abslength[style*='width: 7px']:before {
bottom: -4px;
width: 6px;
height: 6px;
margin-left: -3px;
}
#abslength[style*='width: 6px']:before,
#abslength[style*='width: 5px']:before {
bottom: -3px;
width: 5px;
height: 5px;
margin-left: -3px;
}
#abslength[style*='width: 4px']:before {
bottom: -3px;
width: 3px;
height: 3px;
margin-left: -2px;
}
#abslength[style*='width: 3px']:before,
#abslength[style*='width: 2px']:before,
#abslength[style*='width: 1px']:before {
display: none;
}
#abslength[style*='width: 15px']:before,
#abslength[style*='width: 11px']:before,
#abslength[style*='width: 9px']:before,
#abslength[style*='width: 5px']:before,
#abslength[style*='width: 3px']:before {
-webkit-transform: translate(.5px,0) rotate(45deg);
}
#abslength[style*='width: 7px']:before,
#abslength[style*='width: 4px']:before {
-webkit-transform: translate(0,-.5px) rotate(45deg);
}
#abslength[style*='width: 8px']:before {
-webkit-transform: translate(-.5px,-.5px) rotate(45deg);
}
However, on small sizes, the arrow don't look always nice without extra polishing, so maybe there can be another way of fixing this issue.
from dabblet.
Fixed, somewhat. It still has issues in Webkit when you're typing and making a value smaller due to their bug with attribute selectors, but I don't think it's worth spending time to work around that.
from dabblet.
Related Issues (20)
- Minor JS issue for IE9 HOT 2
- Inline CSS previewers don't handle HTML entities/escapes in style attributes HOT 1
- Line break lost after paste HOT 2
- Enabling the <script> tags. HOT 5
- JavaScript Syntax Error (Does not show location)
- Why not integrate Codemirror or Ace? HOT 1
- Tab-switching shortcuts stop working after switching to Results tab
- Typo in CSS of 'Circular Text' HOT 1
- Import snipet into Silex with an API HOT 2
- adding images from local memory HOT 2
- line error in editor HOT 3
- This request has been blocked; HOT 1
- Validator returns 415 eror
- Can No Longer Save Gists/Dabblets Anonymously HOT 1
- my menu does not work HOT 1
- Nothing serious, description is removed.
- Log in issue HOT 13
- 404 Error - Link to: View Full Page Result HOT 2
- Why dabblet still not save codes and not login with GitHub HOT 1
- Responsible disclosure policy
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 dabblet.