CSS triangles: Thin border between container and triangle (iPad / Landscape iPhone) - iphone

I'm running into a very specific issue using CSS triangles:
I've created buttons that work perfectly on desktop browsers (ie9+, ff, chrome, safari), and on iPhones in portrait mode... The issue exists on iPads (retina and non-retina), as well as iPhones in landscape. The button renders with a line between the main container and the css triangle(s) that I've got in place.
Here's a screenshot on imgur:
http://imgur.com/d0k6lP2
Here's the code I'm using:
HTML:
<span>BUTTON SHAPE</span>
CSS (there are potentially a few non-relevant styles included because this is pasted from a larger file):
.cta-watch {
display: inline-block;
position: relative;
padding: 0 10px;
background-color: #91a1a8;
border-collapse: collapse;
color: white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
letter-spacing: 2px;
font-weight: 400;
font-size: 30px;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 40px;
text-decoration: none;
transform: rotate(360deg);
}
.cta-watch.large {
display: inline-block;
position: relative;
width: 34px;
height: 32px;
}
.cta-watch.large:hover {
text-decoration: none;
}
.cta-watch.large.arrow-left::after, .cta-watch.large.arrow-right::after {
border-left: none;
border-right: none;
}
.cta-watch.large span {
display: inline-block;
width: 0;
height: 0;
text-indent: -99999px;
}
.cta-watch.large span:before {
width: 0;
height: 0;
content: '';
border-color: transparent transparent #91a1a8 transparent;
border-width: 0 27px 14px 27px;
border-style: solid;
position: absolute;
top: -14px;
left: 0;
}
.cta-watch.large span:after {
width: 0;
height: 0;
content: '';
border-color: #91a1a8 transparent transparent transparent;
border-width: 14px 27px 0 27px;
border-style: solid;
position: absolute;
bottom: -14px;
left: 0;
}
.cta-watch.large:before {
display: block;
width: 100%;
height: 0;
content: '\25BA';
color: white;
font-family: arial, "Helvetica Neue", Helvetica, sans-serif;
margin-left: 3px;
font-size: 22px;
line-height: 34px;
text-align: center;
}
JSBin showing code demo here: http://jsbin.com/ocaGeja/1
Any help would be greatly appreciated - Thank you!

I can reproduce the same issue in Chrome for Windows, changing the zoom level.
At least in this situation, it is solved changing this value to decimal:
.cta-watch.large span:before {
...
top: -13.7px;
May be that can help you ?
Another posibility would be to change the way you create the hexagon. Instead of the triangles way, you can try the multi-background way:
.hexagon {
position: absolute;
left: 20px;
top: 20px;
font-size: 80px;
height: 2em;
width: 1.732em;
background-size: 50.5% 50.5%;
background-image: -webkit-linear-gradient(300deg,transparent 33%, red 0%), -webkit-linear-gradient(240deg,transparent 33%, red 0%), -webkit-linear-gradient(60deg,transparent 33%, red 0%), -webkit-linear-gradient(120deg,transparent 33%, red 0%);
background-repeat: no-repeat;
background-position: top left, top right, bottom left, bottom right;
}
It's responsive em based, so that it can fit your need quite well.
demo

Related

Ionic can i get round input

I need round input in ionic and if possible to use Floating something like this in the image. Its very easy in Flutter but dont know how can i do this in ionic. Or if just possible to make it round input ?
Here is image
enter image description here
to achieve that, you need to create your own component or get one from GitHub or Codepen or somewhere else. ionic does not provide anything like this.
Edited:
I made a component for you and I put it on Codepen. You just have to convert jQuery to your framework syntax.
Click to View on Codepen.io
Here is the component:
HTML:
<div class="container">
<div class="input-container">
<label>Name</label>
<input type="text">
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
.container {
width: 380px;
margin: 4em auto;
padding: 2em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
}
.input-container {
position: relative;
}
input {
font-size: 18px;
padding: 10px 15px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: 1px solid #999;
border-radius: 1000px;
}
input:focus {
outline: none;
border: 1px solid #00ff00;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
padding: 0 10px;
}
.stylee {
top: -20px;
transform: scale(.75);
left: -2px;
color: #00ff00;
}
JavaScript (jQuery):
$('input').focus(function() {
$(this).prev().addClass('stylee');
}).blur(function() {
if($(this).val())
{
$(this).prev().addClass('stylee');
}
else
{
$(this).prev().removeClass('stylee');
}
});

Multiple responsive pop-ups in same page

i'm trying to add two responsive popups in my page but since i'm new in javascript i cant figure out how to modify this code to make it work for both. So far only one works.
html
<div class="container">
<h1>Responsive Popup</h1>
<a id= "popup-trigger1" class="popup-trigger">Open PopUp 1</a>
<a id= "popup-trigger2" class="popup-trigger">Open PopUp 2</a>
</div>
<div class="popup">
<div class="popup-text">This is my popup 1</div>
<span class="popup-btn-close">×</span>
</div>
css
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.popup-trigger { display: block; margin: 0 auto; padding: 20px; max-width: 260px; background: #4EBD79; color: #fff; font-size: 18px; font-weight: 700; text-align:center; text-transform: uppercase; line-height: 24px; cursor: pointer; }
body {
background-color: #E3E3E3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
text-align: center;
.container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
text-align: center;
background: white;
border-radius: 10px;
border: 5px solid #9AD3DE;
box-sizing: border-box;
}
}
p {
color: #666666;
margin: 30px auto;
text-align: center;
font-size: 16px;
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
> div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(#000000, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
#include transform(translate(-50%, -50%));
left: 50%;
top: 50%;
text-align: center;
border: 5px solid #9AD3DE;
}
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: left;
border: 5px solid #f28920;
}
.popup-btn-close {
position: absolute;
background-color: #f28920;
color:white;
top: -15px;
right: -15px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height:30px;
text-align:center;
font-size:20px;
font-weight:bold;
font-family:'Arial Black', Arial, sans-serif;
cursor:pointer;
-webkit-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
box-shadow: -3px 1px 6px 0px rgba(0,0,0,0.1);
}
.popup-btn-close:hover {
background-color: #ac5918;
color: #fff;
}
.popup-text {background: #fff; color: #333; font-size: 19px; line-height: 30px; z-index: 9999;}
# Javascript#
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close
buttons */
$(popup).find(".popup-btn-close").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("#popup-trigger1").on("click", function() {
popupOpenClose($(".popup"));
});
});
This is my codepen Codepen
Your help willlll be so much appreciated.
Thank you very much!
krystel
Here is one way to have separate popups. I added another popup div, gave them unique ids, then created a data-target attribute on the triggers. I changed the trigger to work on everything that has a popup-trigger class, and then made a tweak to the wrapper code so that it will create a wrapper in the current popup rather than checking if ANY wrapper exists.
There is also a memory leak because every time you open a popup, you attach more event handlers instead of only attaching them once. I would highly recommend you rework them to avoid issues down the road. Convert them to global events on the document rather than per-popup. I did not change them below as I wanted a minimal change set so you could see what was necessary for your question.
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper", popup).length == 0) {
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if (e.target == this) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find(".popup-btn-close").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function() {
$(".popup-trigger").on("click", function() {
var target = $(this).data('target');
popupOpenClose($(target));
});
});
/* this was actually some kind of LESS or SASS/SCSS originally.
I just stripped out the unnecessary parts, but no changes were necessary */
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.popup-trigger {
display: block;
margin: 0 auto;
padding: 20px;
max-width: 260px;
background: #4EBD79;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
line-height: 24px;
cursor: pointer;
}
body {
background-color: #E3E3E3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
text-align: center;
}
h1,
p,
h2,
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 100;
letter-spacing: 0.5px;
}
h1 {
font-size: 40px;
text-align: center;
color: #666666;
margin: 0 0 30px 0;
}
p {
color: #666666;
margin: 30px auto;
text-align: center;
font-size: 16px;
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup>div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: left;
border: 5px solid #f28920;
}
.popup-btn-close {
position: absolute;
background-color: #f28920;
color: white;
top: -15px;
right: -15px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: 'Arial Black', Arial, sans-serif;
cursor: pointer;
-webkit-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: -3px 1px 6px 0px rgba(0, 0, 0, 0.1);
}
.popup-btn-close:hover {
background-color: #ac5918;
color: #fff;
}
.popup-text {
background: #fff;
color: #333;
font-size: 19px;
line-height: 30px;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Responsive Popup</h1>
<a class="popup-trigger" data-target="#popup1">Open PopUp 1</a>
<a class="popup-trigger" data-target="#popup2">Open PopUp 2</a>
</div>
<div id="popup1" class="popup">
<div class="popup-text">This is my popup 1</div>
<span class="popup-btn-close">×</span>
</div>
<div id="popup2" class="popup">
<div class="popup-text">This is my popup 2</div>
<span class="popup-btn-close">×</span>
</div>

rounded corner with background image discoloration

I have a div inside of a div. If you look at the top left and top right corners, you'll notice a thin line of discoloration around the curve of the div, that is, it isn't the background color. That tiny tiny little curved sliver. What is causing this?
Anyway to remedy this without having to remove the border radius?
Please see the fiddle
http://jsfiddle.net/V24XB/7/
css is as follows
.sub-area-title
{
background-image: linear-gradient(to bottom, #636363 0%, #323232 100%);
border-bottom: 1px solid #cccccc;
background-color: white;
margin: 0 auto;
color: white;
font-size: 18px;
font-weight: bold;
padding:10px 75px 10px 75px;
text-align:center;
z-index:1000;
}
.sub-area-container
{
display: inline-block;
width: auto;
min-width: 450px;
background-color: white;
min-height:100px;
max-height: 400px;
/*display:inline-block;*/
margin: 0px 15px 35px 15px;
border-left: 2px solid #6E6E6E;
border-right:2px solid #6E6E6E;
border-bottom:2px solid #6E6E6E;
border-top:2px solid #6E6E6E;
box-shadow: 0px 2px 12px #888888;
border-radius: 10px;
/*border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;*/
max-height: 300px;
overflow-y: auto;
z-index: 1;
}
NOTE: I'm primarily concerned with IE9+. Chrome and firefox and everything else are irrelevant in this particular case
that's the background color of the .sub-area-container(change it an see), one way to work this out would be adding an inset box shadow to that container like this:
box-shadow: 0px 2px 12px #888888, inset 0px 5px 0 #000;
DEMO
you can remove the body tag
It's a bit of a hack but you could try to fill the background-color of your container under the title if you don't want to use an image.
Just replace your white background by a gradient filling the top 10px of your container.
Something like this should work on IE:
.sub-area-title
{
background-image: linear-gradient(to bottom, #636363 0%, #323232 100%);
border-bottom: 1px solid #cccccc;
background-color: white;
margin: 0 auto;
color: white;
font-size: 18px;
font-weight: bold;
padding:10px 75px 10px 75px;
text-align:center;
z-index:1000;
}
.sub-area-container
{
display: inline-block;
width: auto;
min-width: 450px;
background: -ms-linear-gradient(top, #636363 10px, #ffffff 11px, #ffffff 100%);
min-height:100px;
max-height: 400px;
/*display:inline-block;*/
margin: 0px 15px 35px 15px;
border-left: 2px solid #6E6E6E;
border-right:2px solid #6E6E6E;
border-bottom:2px solid #6E6E6E;
border-top:2px solid #6E6E6E;
box-shadow: 0px 2px 12px #888888;
border-radius: 10px;
/*border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;*/
max-height: 300px;
overflow-y: auto;
z-index: 1;
}

Vertical centering flexbox overlay in iOS safari

I have the following code for my flexbox overlay
.overlay-content-wrapper {
display: -webkit-flex;
display: flex;
position:fixed;
height: 100%;
width: 100%;
top: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.overlay-content {
padding: 8px;
min-height: 10px;
min-width: 10px;
margin: auto;
background-color: #fff;
border-radius: 8px;
border: 1px solid #a5a5a5;
position: relative;
}
<div class="overlay-content-wrapper"><div class="overlay-content">Some content</div></div>
In Chrome it works perfectly but in iOS safari (v6 simulator) it doesn't center vertically. What do I need to change to get it to work?
After digging around for a while I discovered that iOS safari supports one of the old syntaxes with teh webkit prefix (given its market share it's surprising more flexbox tutorials/tools don't include the old syntax... but hey ho).
So here is my final CSS which should work in every browser that supports some version of flexbox and falls back to just horizontal centering in other browsers.
.overlay-content-wrapper {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position:fixed;
height: 100%;
width: 100%;
top: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.overlay-content {
padding: 8px;
min-height: 10px;
min-width: 10px;
margin: auto;
background-color: #fff;
border-radius: 8px;
border: 1px solid #a5a5a5;
position: relative;
}
I had the same problem; aligning children (one headline and one icon) of a flex container with align-items: center. The icon aligned correctly at center but my headline aligned with top because of it's height.
Adding align-self: center to the headline CSS solved it!

Fixed Header and Rows height in GWT cellTable

How can i make the height of the row and the header fixed when the height of the cellTable is fixed e.g 200px?
In my case, the header and the row are automatically re-sized every time a content is added or removed.
I've defined my CSS like this:
.cellTableHeader {
border-bottom: 2px solid #6f7277;
padding: 3px 15px;
text-align: left;
color: #4b4a4a;
text-shadow: #ddf 1px 1px 0;
overflow: hidden;
height: 25px;
}
.cellTableCell {
padding: 4px;
overflow: hidden;
font-size: 10px;
font-family: ARIAL;
height: 25px;
}
.cellTableEvenRow {
background: #ffffff;
height: 25px;
}
.cellTableOddRow {
background: #f3f7fb;
height: 25px;
}
I've also tried the cellTable#setColumnWith().
Any idea ?
[1]: http://i.stack.imgur.com/Vd2Hp.png ![enter image description here][1]
Ok, may be my question wasn't well asked at the first place :( but I've resolve my problem.
What i intended to do is to have a fixed table( with surrounding) where i can place my items without having the change on the numbers of the elements effecting the display of the table itself. So, to have that behavior, i didn't set a fixed height on the cell table (since that doesn't work) but I've put the hole table in a vertical panel with defined boder-style and manage the display of the cellTable with its css.
VerticalPanel contentPanelVP = getContentPanel();
contentPanelVP.add(this.trainerConfigurationTable);
/**
* Gets the panel that represents the surroundings
*
* #return configured vertical panel
*/
private VerticalPanel getContentPanel() {
VerticalPanel tableContentVP = new VerticalPanel();
tableContentVP.setVerticalAlignment(HasVerticalAlignment.ALIGN_TOP);
tableContentVP.setStyleName(CSS_TRAINING_BOX_CONTENT);
tableContentVP.setWidth(CONTENT_PANEL_WIDTH);
tableContentVP.setHeight(CONTENT_PANEL_HEIGHT);
return tableContentVP;
}
CSS
.tableContentVP{
border-width: 1px;
border-style: solid;
border-color: grey;
padding: 0px;
background-color: white;
}
Table CSS
#def selectionBorderWidth 2px;
.cellTableWidget {
}
.cellTableFirstColumn {
height: 25px;
}
.cellTableLastColumn {
}
.cellTableFooter {
}
.cellTableHeader {
padding: 0px;
text-align: center;
font-size: 10px;
font-family: ARIAL;
font-weight: bold;
color: white;
text-shadow: 0 1px 1px rgba(255, 255, 255, .7);
background-image: none;
background-color: black;
height: 25px;
vertical-align: middle;
}
.cellTableCell {
padding: 4px;
overflow: hidden;
font-size: 10px;
font-family: ARIAL;
text-align: center;
}
.cellTableSortableHeader {
cursor: pointer;
cursor: hand;
}
.cellTableEvenRow {
background: #ffffff;
height: 25px;
cursor: pointer;
cursor: hand;
}
.cellTableEvenRowCell {
border: selectionBorderWidth solid #ffffff;
}
.cellTableOddRow {
background: #f3f7fb;
height: 25px;
cursor: pointer;
cursor: hand;
}
.cellTableOddRowCell {
border: selectionBorderWidth solid #f3f7fb;
}
.cellTableHoveredRow {
background: #eee;
}
.cellTableHoveredRowCell {
border: selectionBorderWidth solid #eee;
}
.cellTableKeyboardSelectedRow {
background: #ffc;
}
.cellTableKeyboardSelectedRowCell {
border: selectionBorderWidth solid #ffc;
}
.cellTableSelectedRow {
background: #628cd5;
color: white;
height: auto;
overflow: auto;
}
.cellTableSelectedRowCell {
border: selectionBorderWidth solid #628cd5;
}
/**
* The keyboard selected cell is visible over selection.
*/
.cellTableKeyboardSelectedCell {
border: selectionBorderWidth solid #d7dde8;
}
.cellTableLoading {
margin: 30px;
}
Voila !
I hope, it will help someone out there.