If you look at this plunker and click on the "Show Notification" button you'll see that even though the background is black (background-color: #000000;) there's some gray color on top. What's wrong with this CSS/template?
the HTML:
<body ng-controller="MyCtrl">
<span kendo-notification="notif" k-options="opt" style="display:none;"></span>
<button ng-click="showNotif()">Show Notification</button>
</body>
the JS:
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.opt = { position: {
top: 30,
right: 30
},
templates: [{
type: "growl",
template: "<div class='growl'><h1>#= title #</h1><p>#= message #</p></div>"
}]
};
$scope.showNotif = function() {
$scope.notif.show({
title: "This is the title",
message: "and this is the message"
}, "growl");
};
}
the CSS:
.growl {
background-color: #000000;
color: #ffffff;
border: 0;
height:80px;
width:300px;
font-family: Arial;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
You can fix this by applying an overflow: hidden attribute to your .growl style:
.growl {
background-color: #000000;
color: #ffffff;
border: 0;
height:80px;
width:300px;
font-family: Arial;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
}
Nothing to do with Angular or Kendo.
change the CSS to this:
.growl {
...
padding-top:10px;
}
.growl h1 {
margin-top:0;
}
The full answer is already here : Margin on child element moves parent element
Related
I am using Stripe as my payment processor on BigCommerce. It works perfectly. The problem is that my site theme has a black background. When you type in your credit card info, the text is black in the Stripe inputs so you can't see it. I've tried to use CSS in both checkout.scss and optimized-checkout.scss to try and overwrite it, but since Stripe is loaded via JS and in what looks to be an iFrame, I can't figure it out.
I've added this css to both and it still doesn't work
input {
color: #eee !important;
}
May be you can use JavaScript for this,
document.getElementById("element_id").style etc...
I did not do that thing earlier, but this solution works on these types of scenarios!
but since Stripe is loaded via JS and in what looks to be an iFrame, I can't figure it out.
Indeed! It doesn't use the styling in your CSS, you have to specify it via Javascript by passing a style object when creating the Element:
https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style
https://stripe.dev/elements-examples/
If you're not the one writing the code that interacts with stripe.js at this level you probably want to reach out to Bigcommerce or something to ask them to expose access in some way.
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();
var card = elements.create('card', {
style: {
base: {
iconColor: '#666EE8',
color: 'white', // color of the text : https://stripe.com/docs/js/appendix/style
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
}
});
card.mount('#card-element');
* {
font-family: "Helvetica Neue", Helvetica;
font-size: 15px;
font-variant: normal;
padding: 0;
margin: 0;
}
body {
background: #171515;
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
form {
width: 480px;
margin: 20px 0;
}
.group {
box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
0 3px 6px 0 rgba(0,0,0,0.08);
border-radius: 4px;
margin-bottom: 20px;
}
label {
position: relative;
color: #8898AA;
font-weight: 300;
height: 40px;
line-height: 40px;
margin-left: 20px;
display: flex;
flex-direction: row;
}
.group label:not(:last-child) {
border-bottom: 1px solid #F0F5FA;
}
label > span {
width: 80px;
text-align: right;
margin-right: 30px;
}
.field {
background: transparent;
font-weight: 300;
border: 0;
color: #31325F;
outline: none;
flex: 1;
padding-right: 10px;
padding-left: 10px;
cursor: text;
}
.field::-webkit-input-placeholder { color: #CFD7E0; }
.field::-moz-placeholder { color: #CFD7E0; }
<script src="https://js.stripe.com/v3/"></script>
<body>
<form>
<div class="group">
<label>
<span>Card</span>
<div id="card-element" class="field"></div>
</label>
</div>
</form>
</body>
With bootstrap 4.5.3 I make tooltip and I want to change default appearence.
With my styles defined :
.tooltip {
display: flex;
justify-content: flex-start;
position: absolute;
z-index: 9999;
background: #ddff9d;
color: #333333;
width: 320px;
-webkit-box-shadow: 5px 5px 5px 5px white;
box-shadow: 2px 2px 2px 2px white;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
opacity: 1 !important;
padding: 10px;
text-align: left;
}
.tooltip-inner {
background-color: #00acd6 !important;
/*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
color: #fff;
}
.tooltip.top .tooltip-arrow {
border-top-color: #00acd6;
}
.tooltip.right .tooltip-arrow {
border-right-color: #00acd6;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #00acd6;
}
.tooltip.left .tooltip-arrow {
border-left-color: #00acd6;
}
I have :
https://prnt.sc/wlwp1v
and I want how :
Change width of internal (blue) block to fill width+paddings
Set equal paddings of internal block with external
To align text inside of internal block to the left ?
MODIFIED BLOCK:
That is actually fullcalendar 3.9 component and tooltip is rendered on fly with javascript code:
eventRender: function (eventInfo, element, view) {
let adHtml = '<b>' + eventInfo.title + "</b><br> " +
'<u>{!! showAppIcon('expire_date') !!} Expired at : ' + eventInfo.start_formatted + '</u><br>'+
'{!! showAppIcon('location') !!} ' + eventInfo.adLocationsCount + ' location(s)<br>' +
'<small>Status : ' + eventInfo.status_label + "</small><br>" +
'<small>' + eventInfo.description + "</small>"
let tooltipOptions = {
title: adHtml,
html: true
}
element.tooltip(tooltipOptions)
I use this bootstrhttps://bootswatch.com/solar as template...
I can not debug elements in browser's inspactor, as when mouse is hover tooltip is hidden...
Thanks!
To change the width just use: max-width: 400px;. To left-align text just simply use text-align: left;
Replace your whole CSS with the given below:
.tooltip-inner {
text-align: left;
max-width: 400px;
border-radius: 8px;
padding: 20px;
}
Codepen: https://codepen.io/manaskhandelwal1/pen/LYRXzro
I'm currently working on a project that contains vuejs and I have a need to develop a datepicker. To do this, I've decided to use the following package v-calendar
I've been able to implement the component and works as expected out-of-the-box, however I'm trying some customization like styles (following the documentation) but it just won't work of some cases, can't figure out why.
The idea is to achieve this:
I've been able to set the header style through setupCalendar, however, when I try to apply the style to the content it won't change.
After searching further in the documentation, I've noticed that they were passing the style as attributes, to which I've tried to replicate without any success.
I also wanted to know, if it's possible to submit the received $attrs that are inherited by the father-component into the input? At the moment I'm passing 1 by 1 using input-props but I'm wondering if theres a better approach.
right now it's like this:
any suggestions?
<template>
<date-picker
:attributes="attributes"
v-model="date"
:input-props="{
id: $attrs.id,
name: $attrs.name,
class: 'input--default color--white',
autocomplete: 'nope',
readonly: true
}"
>
</date-picker>
</template>
<script>
// packages
import { setupCalendar, DatePicker } from 'v-calendar'
import 'v-calendar/lib/v-calendar.min.css';
setupCalendar({
locale: 'pt-PT',
themeStyles: {
wrapper: {
fontSize: '17px',
lineHeight: '21px',
boxShadow: '5px 5px 10px 1px rgba( 0, 0, 0, .10 )',
},
header: {
color: '#f7890b',
textTransform: 'capitalize'
},
weekdays: {
color: '#ededed'
},
},
attributes: [{
contentStyle: {
color: '#ff4d4d', // Red
fontWeight: 600,
fontSize: '10px',
},
popover: { color: 'yellow', },
highlight: {
backgroundColor: 'purple',
},
}]
});
export default {
inheritAttrs: false,
components: {
DatePicker
},
data () {
return {
date: null,
attributes: [{
contentStyle: {
color: '#ff4d4d', // Red
fontWeight: 600,
fontSize: '10px',
},
popover: { color: 'yellow', },
highlight: {
backgroundColor: 'purple',
},
}]
}
}
}
</script>
<style>
</style>
If using vue-datepicker you can change the css style adding this styles to your .css or in your view inside <style> ...</style>
Here an example of the elements, i already use to change the input as bootstrap style
body {
font-family: "Helvetica Neue Light", Helvetica, sans-serif;
padding: 1em 2em 2em;
}
input,
select {
padding: 0.75em 0.5em;
font-size: 100%;
border: 1px solid #ccc;
width: 100%;
}
select {
height: 2.5em;
}
.example {
background: #f2f2f2;
border: 1px solid #ddd;
padding: 0em 1em 1em;
margin-bottom: 2em;
}
code,
pre {
margin: 1em 0;
padding: 1em;
border: 1px solid #bbb;
display: block;
background: #ddd;
border-radius: 3px;
}
.settings {
margin: 2em 0;
border-top: 1px solid #bbb;
background: #eee;
}
h5 {
font-size: 100%;
padding: 0;
}
.form-group {
margin-bottom: 1em;
}
.form-group label {
font-size: 80%;
display: block;
}
This is what I'm trying to achieve
<pre>
CONTAINER External Events Box Shrink or Enlarge
<-------------------------------------------------------------------------------------------->
| Text LEFT(ED) internal CONTAINER |
| -------------- -------------------------------------------------- -------------- |
| | Info li | |Content li | | Info li | |
| | wrapped into | |shrink or enlarge to contents OR | | wrapped into | |
| | hollow circle1| |max size: (External container width - 2X(info li)| | hollow circle2| |
| -------------- |--------------------------------------------------- --------------- |
---------------------------------------------------------------------------------------------
</pre>
1- Hollow circles on the right side sould be all aligned (See picture)
2- Hollow circles on the left side sould be all aligned (See picture)
3- Extend(Enlarge or Schrink) dynamically the external
events box to wrap externally the hollow circles(One on the left + the
second on the right + Text container(holding the description name lines).
N.B:
If the first name line in bold reach the red Line
(see the following picture) it must not continue
on a second line( means the first line should be
always an inline bold block) and hence push
forward to extend the gray container.
If the second line written in smaller caracters reach the red Line
(see the following picture) it must break down into a thirth line fourth and
so on until it complets.
(each tuple(hollowCircle1,nameLines,hollowCircle2) is enclosed in its own
wrapper ul.
<body ng-controller="MainCtrl">
<div id='external-events'>
<h4 >Draggable books</h4>
<li style="display: inline;margin: 0;padding: 0;border: none;list-style-type: none;" ng-repeat="book in books track by $index"
id="book.id">
<ul style="margin: 0;padding: 0;border: none;list-style-type: none; display: flex;" class="fc-event" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{index {{$index}},placeholder:true,animate:true}">
<li style="margin: 0;padding: 0;border: none;list-style-type: none; display: inline;" class="circle" >
0</li><br><br><br><br>
<li style="margin: 0;padding: 0;border: none;list-style-type: none; display: inline;" ng-bind-html="book.content['name']"</li>
<li style="margin: 0;padding: 0;border: none;list-style-type: none; display: inline;" class="circle" >
2/10<br></li>
</ul>
</li>
</div>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
</body>
CSS
ul {
list-style-type: none;}
ul.columns>li {
display: inline-block;
padding-right: 0cm;
margin-left: 0px;
}
ul.columns>li:before {
content:"";
display: list-item;
position: absolute;
}
h4 {
color: white;
display: inline;
border-bottom: 3px solid darken($fendersblue, 10);
padding-bottom: 8px;
line-height: 1.75em;
}
.fancy3 {
background-color: darken($fendersblue, 5);
}
#calendar
{
padding: 0 10px;
width: 650px;
float: right;
margin: 0px 0px 10px 55px;
}
#external-events {
width: 500px;
padding: 0 0px;
border: 0px solid #ccc;/* gray moyen*/
background: #eee;/* #5D6D7E;(Blue mat) */ /* #eee color gray*/
text-align: left;
}
#external-events h4 {
font-size: 30px;
margin-top: 0;
padding-top: 1em;
color:gray;
}
#external-events .fc-event {
cursor: pointer;
position:relative;
z-index: 100;
background: #eee;
}
#external-events p {
margin: 0 18em 0 0;
font-size: 14px;
font-weight: bold;
color: gray; /* color gray */
}
.circle {
position: relative;
display: inline-block;
width: 10%;
height: 25%;
padding: 0 0px;
border-radius: 360px;
/* Just making it pretty */
#shadow: rgba(0, 0, 0, .1);
#shadow-length: 4px;
-webkit-box-shadow: 0 #shadow-length 0 0 #shadow;
box-shadow: 0 #shadow-length 0 0 #shadow;
text-shadow: 0 #shadow-length 0 #shadow;
background: #FFFFFF;/*color white*/
color: #f05907;/* color red*/
font-family: Helvetica, Arial Black, sans;
font-size: 10;
text-align: center;
}
p span
{
display: block;
}
p:first-line {
color: gray;
font-size: 25px;
font-weight: bold italic;
}
p {
white-space: pre
}
Css is included in my CodePen
Many Thanks.
The content of your CodePen was a bit of a mess of invalid HTML, illogical use of markup, conflicting styles and seemingly arbitrary (and confusing) mixture of inline styles and CSS definitions.
There was too much to go into specifics. However, here is a version which gets you much closer to the layout you envisaged, I hope:
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#1.0.x" src="https://code.angularjs.org/1.2.8/angular.min.js" data-semver="1.0.7"></script>
</head>
<body ng-controller="MainCtrl">
<div id='external-events'>
<h4 >Draggable books</h4>
<ul data-drag="true" data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{index {{$index}},placeholder:true,animate:true}">
<li class="fc-event" ng-repeat="book in books track by $index"
id="book.id">
<div class="circle">0</div>
<div class="left content" ng-bind-html="book.content['name']"></div>
<div class="left rating">2/10</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
</body>
</html>
CSS:
ul {
list-style-type: none;
}
ul>li {
display:block;
padding-right: 0cm;
margin-left: 0px;
}
h4 {
color: gray;
display: inline;
border-bottom: 3px solid darken($fendersblue, 10);
padding-bottom: 8px;
font-size:600;
}
#calendar{
padding: 0 10px;
width: 650px;
float: right;
margin: 0px 0px 10px 55px;
}
#external-events {
width: 500px;
padding: 0 0px;
border: 0px solid #ccc;/* gray moyen*/
background: #eee;/* #5D6D7E;(Blue mat) */ /* #eee color gray*/
text-align: left;
}
#external-events .fc-event {
cursor: pointer;
z-index: 100;
background: #eee;
border: solid 1px black;
border-radius: 2px;
margin-bottom:5px;
}
.content span
{
color: gray;
}
.fc-event span:first-child
{
font-size: 25px;
font-weight: bold italic;
}
.fc-event div
{
padding:3px;
margin-right:5px;
height: 100%;
}
.content
{
float:left;
max-width:75%;
}
.clear
{
clear:both;
}
.circle {
float:left;
width: 10%;
height: 25%;
padding: 0 10px;
border-radius: 360px;
/* Just making it pretty */
#shadow: rgba(0, 0, 0, .1);
#shadow-length: 4px;
-webkit-box-shadow: 0 #shadow-length 0 0 #shadow;
box-shadow: 0 #shadow-length 0 0 #shadow;
text-shadow: 0 #shadow-length 0 #shadow;
background: #FFFFFF;/*color white*/
color: #f05907;/* color red*/
font-family: Helvetica, Arial Black, sans;
font-size: 10;
text-align: center;
}
.rating
{
float:right;
background: #FFFFFF;/*color white*/
color: #f05907;/* color red*/
font-family: Helvetica, Arial Black, sans;
font-size: 10;
text-align: center;
border-radius: 360px;
}
JS:
var app = angular.module("app", []);
app.controller("MainCtrl", ['$scope', '$sce', function($scope, $sce){
$scope.books = [
{
id: 'id1',
content: {
name: '<span>Alain du sceau france</span><br><span> Canada Madagascar philipine</span>',
price: 'price1',
date: 'd1'
}
},
{
id: 'id2',
content: {
name: '<span>Name zu Long zu Schreiben Bis Here ist Ein Beispiel</span><br><span>Maneschester Canada Madagascar philipine</span>',
price: 'price2',
date: 'd2'
}
},
{
id: 'id3',
content: {
name: '<span>name Aleatoire Schwer und zu Leicht Zu Schreiben</span><br><span>Mexico Canada USA France Uk Deutschland Schweiz Madagascar philipine</span>',
price: 'price3',
date: 'd3'
}
}
];
$scope.books.forEach(function(book) {
book.content.name = $sce.trustAsHtml(book.content.name);
})
// initialize the external events
// -----------------------------------------------------------------
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
// initialize the calendar
// -----------------------------------------------------------------
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
eventDragStop: function(event, jsEvent, ui, view ) {
if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
//////////
$('#calendar').fullCalendar('removeEvents', event._id);
var el = $( "<div class='fc-event'>" ).appendTo('#external- events').text(event.id);
}
}
});
var isEventOverDiv = function(x, y) {
var external_events = $( '#external-events' );
var offset = external_events.offset();
offset.right = external_events.width() + offset.left;
offset.bottom = external_events.height() + offset.top;
// Compare
if (x >= offset.left
&& y >= offset.top
&& x <= offset.right
&& y <= offset .bottom) { return true; }
return false;
}
}]);
CodePen demo: https://codepen.io/anon/pen/JwQOMQ?editors=1111
I'm trying to create a stepper in the form of arrow (using angular / css mostly). Let's start with this codepen. What I want to do now, is to center the status name in the middle of the arrow.
The straight-forward idea I had was to do something around those lines to apply the text-align center property.
.block-head {
/* rest of the class css */
text-align: center;
}
.block-head:before {
/* rest of the class css */
text-align: left;
}
.block-head:after {
/* rest of the class css */
text-align: left;
}
Problem is this is not working. I tried setting the text align property to center on the block-text class aswell, but it's not working either...
How can I apply the text-align:center property to my class but not to it's :before & :after ? And if it's not possible, how should I change my code to keep the current design and have the text centered ?
You can use flexbox properties for this.
Add display: flex; and justify-content: center to block-text
codepen
Multiple ways are there to get it . Try like this. This is a quick fix by giving your .block-text margin-left:50%;
function ctrl($scope){
// those variable are passed as param to the directive
$scope.selectedKey = 2
$scope.elements =
[
{
name: "Status 1",
key: 1,
description: "description status 1"
},
{
name: "Status 2",
key: 2,
description: "description status 2"
},
{
name: "Status 3",
key: 3,
description: "description status 3"
},
{
name: "Status 4",
key: 4,
description: "description status 4"
}
]
$scope.colors =
{
current: "lightblue",
success: "lightgreen",
disable: "lightgrey"
}
$scope.widthCalc = ($scope.elements.length - 1) * 26
$scope.getColor = function($index) {
if ($scope.elements[$index].key === $scope.selectedKey)
return $scope.colors['current']
if ($scope.elements[$index].key < $scope.selectedKey)
return $scope.colors['success']
if ($scope.elements[$index].key > $scope.selectedKey)
return $scope.colors['disable']
}
}
.block-container {
width: auto;
padding-top: 4px;
padding-right: 8px;
padding-left: 8px;
margin-bottom: -10px;
}
.block-head {
background-color: #4D81BF;
height: 20px;
line-height: 20px;
display: inline-block;
position: relative;
width:22px;
margin-right:4px;
margin-bottom: -5px;
}
.block-text {
color: black;
font-size: 14px;
margin-left: 50%;
}
.block-head:before {
color: #FAFAFA;
border-left: 10px solid;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
display: inline-block;
content: '';
z-index:1;
position: absolute;
top:0;
}
.block-head:after {
color: inherit;
z-index:2;
border-left: 10px solid;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -10px;
top:0;
}
.block-head-first {
margin-left:0px !important;
}
.block-head-last {
margin-right:0px;
}
.block-head-first:before {
color: #FAFAFA;
border-left: 0;
border-top: 0;
border-bottom: 0;
display: inline-block;
content: '';
z-index:1;
position: absolute;
top:0;
}
.block-head-last:after {
color: #4D81BF;
border-left: 0;
border-top: 0;
border-bottom: 0;
display: inline-block;
content: '';
z-index:1;
position: absolute;
top:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<meta charset=utf-8 />
<title>Angular JS Demo</title>
</head>
<body ng-controller="ctrl">
<div class="block-container">
<div ng-repeat="element in elements"
class="block-head"
ng-class="{'block-head-first': $first, 'block-head-last': $last}"
ng-style="{'width' : selectedKey === element.key ? 'calc(100% - ' + widthCalc + 'px)' : '',
'background-color': getColor($index),
'color': getColor($index)}">
<span class="block-text" ng-if="selectedKey === element.key">{{element.name}}</span>
</div>
</div>
</body>
</html>
.block-head {
text-align: center;
}
.block-head:before {
left: 0px;
}
Take a look at my codepen:.
The fix was relatively simple.
You were trying to change the text-align of the outer element and I changed it for the inner element:
block-text {
color: black;
font-size: 14px;
padding-left: 24px;
display: inline-block;
width: 100%;
text-align: center;
}
I also changed from margin-left to padding-left to properly handle the width: 100%