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
Related
I first noticed that my Google Maps Controls were disproportionally large on my own web app (seen below).
Initially I thought some of my CSS was playing with Google's CSS on the controls; however, visiting Google's own webpage told me this incident was not isolated to me...
Below is a map on their documentation: https://developers.google.com/maps/documentation/javascript/examples/control-positioning
The large controls appear on every page of their documentation for me as well. I tried different machines and different browsers (Chrome and Firefox).
I also tried other sites that used the Google Maps API and saw a similar phenomenon in some cases.
Is anyone else experiencing the same issues?
Looks like google have now acknowledged this and have provided a (currently un-documented) feature to change the UI scaling by passing in a "controlSize" when creating the map.
See comment from Google here.
JSFiddle here (from comment above).
Sample code:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
controlSize: 32,
});
}
Note: 40 is the default currently (and corresponds to the large controls that this question is about). I've found 25 to be about the same as the previous controls.
Update:
As of v3.36 this is a documented feature, see here
Turns out this isn't a bug. See more here:
Aug 13, 2018 03:56PM Reported Issue Google Maps JavaScript API weekly
channel (3.34) will be using the larger control UI.
As we are seeing increases of touch operations on various devices, we
adjusted the control UI to fit for both finger touches and mouse
clicks.
It's possible to opt out of this by loading the API with v=quarterly,
v=3, v=3.33 or v=3.32. Note: requests to retired version will receive
the default channel, see 1.
If you have any requests or other issues concerning the new control UI
please let us know.
1 https://issuetracker.google.com/112519576
Use v=quarterly, v=3, v=3.33 or v=3.32 when loading the API to use smaller controls.
EDIT:
Refer to answer from #Jonny van Beek on how to scale Google map's controls to the size of your choosing.
Refer to answers from #garethdn and #Peter (below) to find out how to replace Google's large controls with your own custom controls.
Refer to #Dutchmanjonny's post (below) for latest and correct solution to this problem.
For those that are reluctant to opt out by specifying older versions of the API, creating custom controls is relatively straight forward. The following will create two button elements to zoom in and out.
defaultMapOptions: google.maps.MapOptions = {
// Hide Google's default zoom controls
zoomControl: false
};
initializeMap(el: HTMLElement, options?: google.maps.MapOptions): google.maps.Map {
let opts = Object.assign({}, this.defaultMapOptions, options);
let map = new google.maps.Map(el, opts);
let zoomControlsDiv = document.createElement('div');
// Add a class to the container to allow you to refine the position of the zoom controls
zoomControlsDiv.classList.add('google-map-custom-zoom-controls');
this.createCustomZoomControls(zoomControlsDiv, map);
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomControlsDiv);
return map;
}
createCustomZoomControls(controlDiv: HTMLDivElement, map: google.maps.Map) {
let zoomInControlUI: HTMLButtonElement = document.createElement('button');
let zoomOutControlUI: HTMLButtonElement = document.createElement('button');
let zoomControls: HTMLButtonElement[] = [zoomInControlUI, zoomOutControlUI];
// List of classes to be applied to each zoom control
let buttonClasses: string[] = ['btn', 'btn-primary', 'btn-sm'];
zoomInControlUI.innerHTML = `+`;
zoomOutControlUI.innerHTML = `−`;
zoomControls.forEach(zc => {
zc.classList.add(...buttonClasses);
controlDiv.appendChild(zc);
});
google.maps.event.addDomListener(zoomInControlUI, 'click', () => map.setZoom(map.getZoom() + 1));
google.maps.event.addDomListener(zoomOutControlUI, 'click', () => map.setZoom(map.getZoom() - 1));
}
let map = this.initializeMap(myGoogleMapContainerElement);
After the backlash, Google has now published an example for how to replace the default (big) controls: https://developers.google.com/maps/documentation/javascript/examples/control-replacement
Here is the code as published by Google:
<!DOCTYPE html>
<html>
<head>
<title>Replacing Default Controls</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.gm-style .controls {
font-size: 28px; /* this adjusts the size of all the controls */
background-color: white;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
box-sizing: border-box;
border-radius: 2px;
cursor: pointer;
font-weight: 300;
height: 1em;
margin: 6px;
text-align: center;
user-select: none;
padding: 2px;
width: 1em;
}
.gm-style .controls button {
border: 0;
background-color: white;
color: rgba(0, 0, 0, 0.6);
}
.gm-style .controls button:hover {
color: rgba(0, 0, 0, 0.9);
}
.gm-style .controls.zoom-control {
display: flex;
flex-direction: column;
height: auto;
}
.gm-style .controls.zoom-control button {
font: 0.85em Arial;
margin: 1px;
padding: 0;
}
.gm-style .controls.maptype-control {
display: flex;
flex-direction: row;
width: auto;
}
.gm-style .controls.maptype-control button {
display: inline-block;
font-size: 0.5em;
margin: 0 1px;
padding: 0 6px;
}
.gm-style .controls.maptype-control.maptype-control-is-map .maptype-control-map {
font-weight: 700;
}
.gm-style .controls.maptype-control.maptype-control-is-satellite .maptype-control-satellite {
font-weight: 700;
}
.gm-style .controls.fullscreen-control button {
display: block;
font-size: 1em;
height: 100%;
width: 100%
}
.gm-style .controls.fullscreen-control .fullscreen-control-icon {
border-style: solid;
height: 0.25em;
position:absolute;
width: 0.25em;
}
.gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen- control-top-left {
border-width: 2px 0 0 2px;
left: 0.1em;
top: 0.1em;
}
.gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-top-left {
border-width: 0 2px 2px 0;
}
.gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-top-right {
border-width: 2px 2px 0 0;
right: 0.1em;
top: 0.1em;
}
.gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-top-right {
border-width: 0 0 2px 2px;
}
.gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-bottom-left {
border-width: 0 0 2px 2px;
left: 0.1em;
bottom: 0.1em;
}
.gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-bottom-left {
border-width: 2px 2px 0 0;
}
.gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-bottom-right {
border-width: 0 2px 2px 0;
right: 0.1em;
bottom: 0.1em;
}
.gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-bottom-right {
border-width: 2px 0 0 2px;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- Hide controls until they are moved into the map. -->
<div style="display:none">
<div class="controls zoom-control">
<button class="zoom-control-in" title="Zoom In">+</button>
<button class="zoom-control-out" title="Zoom Out">−</button>
</div>
<div class="controls maptype-control maptype-control-is-map">
<button class="maptype-control-map"
title="Show road map">Map</button>
<button class="maptype-control-satellite"
title="Show satellite imagery">Satellite</button>
</div>
<div class="controls fullscreen-control">
<button title="Toggle Fullscreen">
<div class="fullscreen-control-icon fullscreen-control-top-left"></div>
<div class="fullscreen-control-icon fullscreen-control-top-right"></div>
<div class="fullscreen-control-icon fullscreen-control-bottom-left"></div>
<div class="fullscreen-control-icon fullscreen-control-bottom-right"></div>
</button>
</div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.querySelector('#map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
disableDefaultUI: true,
});
initZoomControl(map);
initMapTypeControl(map);
initFullscreenControl(map);
}
function initZoomControl(map) {
document.querySelector('.zoom-control-in').onclick = function() {
map.setZoom(map.getZoom() + 1);
};
document.querySelector('.zoom-control-out').onclick = function() {
map.setZoom(map.getZoom() - 1);
};
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
document.querySelector('.zoom-control'));
}
function initMapTypeControl(map) {
var mapTypeControlDiv = document.querySelector('.maptype-control');
document.querySelector('.maptype-control-map').onclick = function() {
mapTypeControlDiv.classList.add('maptype-control-is-map');
mapTypeControlDiv.classList.remove('maptype-control-is-satellite');
map.setMapTypeId('roadmap');
};
document.querySelector('.maptype-control-satellite').onclick =
function() {
mapTypeControlDiv.classList.remove('maptype-control-is-map');
mapTypeControlDiv.classList.add('maptype-control-is-satellite');
map.setMapTypeId('hybrid');
};
map.controls[google.maps.ControlPosition.LEFT_TOP].push(
mapTypeControlDiv);
}
function initFullscreenControl(map) {
var elementToSendFullscreen = map.getDiv().firstChild;
var fullscreenControl = document.querySelector('.fullscreen-control');
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(
fullscreenControl);
fullscreenControl.onclick = function() {
if (isFullscreen(elementToSendFullscreen)) {
exitFullscreen();
} else {
requestFullscreen(elementToSendFullscreen);
}
};
document.onwebkitfullscreenchange =
document.onmsfullscreenchange =
document.onmozfullscreenchange =
document.onfullscreenchange = function() {
if (isFullscreen(elementToSendFullscreen)) {
fullscreenControl.classList.add('is-fullscreen');
} else {
fullscreenControl.classList.remove('is-fullscreen');
}
};
}
function isFullscreen(element) {
return (document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement) == element;
}
function requestFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullScreen) {
element.msRequestFullScreen();
}
}
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msCancelFullScreen) {
document.msCancelFullScreen();
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
Here is what did it for me:
.gm-bundled-control
,.gm-style-mtc
,.gm-fullscreen-control{
transform: scale(.7);
}
Makes the controls 30% smaller.
I added some css and that's it.
/* Fix +/- zoom buttons design */
#map .gm-bundled-control-on-bottom {
right: 30px !important;
bottom: 116px !important;
}
#map .gm-bundled-control-on-bottom > div:first-child {
top: 44px !important;
}
#map .gmnoprint > .gmnoprint > div {
height: 60px !important;
width: 30px !important;
}
#map .gmnoprint > .gmnoprint > div > div { /* seperator */
width: 22.5px !important;
margin: 0px 3.75px !important;
}
#map .gmnoprint > .gmnoprint button {
width: 30px !important;
height: 30px !important;
}
#map .gmnoprint > .gmnoprint button img {
height: 13.5px !important;
width: 13.5px !important;
margin: 6.75px 8.25px 9.75px !important;
}
and this is for the yellow man button:
/* yellow person button design*/
#map .gm-svpc {
width: 30px !important;
height: 30px !important;
}
#map .gm-svpc img:nth-child(1), #map .gm-svpc img:nth-child(2){
width: 13.5px !important;
height: 22.5px !important;
left: -7px !important;
top: -12px !important;
}
#map .gm-svpc img:nth-child(3) {
width: 24px !important;
height: 30px !important;
}
and for last the MAP|Satellite buttons design
/* MAP|Satellite buttons design*/
#map .gm-style-mtc > div:nth-child(1) {
padding: 0px 9px !important;
height: 30px !important;
font-size: 15px !important;
}
#map .gm-style-mtc > div:nth-child(2) {
top: 30px !important;
}
#map .gm-style-mtc > div:nth-child(2) > div {
padding: 2px 4px 2px 2px !important;
font-size: 14px !important;
}
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%
I would like the Bootstrap alert and close button functionality. I've included the JQuery and Bootstrap javascript file in my page head but don not want the CSS in it because it overrides a ton of styling.
Currently I've added these parts of the Bootstrap to my own css to make the alert and close button appear.
.alert {
padding: 8px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px
}
.alert h4 {
margin-top: 0;
color: inherit
}
.alert .alert-link {
font-weight: 700
}
.alert>p,
.alert>ul {
margin-bottom: 0
}
.alert>p+p {
margin-top: 5px
}
.alert-dismissable,
.alert-dismissible {
padding-right: 35px
}
.alert-dismissable .close,
.alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
color: inherit
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1
}
.alert-info hr {
border-top-color: #a6e1ec
}
.alert-info .alert-link {
color: #245269
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1
}
.alert-danger hr {
border-top-color: #e4b9c0
}
.alert-danger .alert-link {
color: #843534
}
#-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0
}
to {
background-position: 0 0
}
}
#-o-keyframes progress-bar-stripes {
from {
background-position: 40px 0
}
to {
background-position: 0 0
}
}
#keyframes progress-bar-stripes {
from {
background-position: 40px 0
}
to {
background-position: 0 0
}
}
This CSS makes the alert work as expected. The below part is for the close button. It styling has changed a bit, but I seem to be missing a few lines of CSS. Can anyone tell me which onesm can't seem to find them.
button.close { -webkit-appearance:none;padding:0;cursor:pointer;background:0;border:0}
Target HTML:
<% if (message.length > 0) { %>
<div class="alert alert-info"><%= message %><button type="button" class="close" data-dismiss="alert">x</button></div>
<% } %>
HTML (added alert-dismissable class, changed x to ×):
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
Message
</div>
CSS (added basic styles for close class):
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
CODEPEN EXAMPLE
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
I have a drop down menu with css file and i want to convert it into Verctical menu I tried much but i can do that please anyone help me Folowing is my css and html code.anyone please tell me what exactly i am missing due to which menu is not converting
#sddmT
{ margin: 0;
padding: 0;
z-index: 30}
#sddmT li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#sddmT li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #4A617B;
color: White;
text-align: center;
text-decoration: none}
#sddmT li a:hover
{ background: #BDCFD6;
color:#4A617B
}
#sddmT div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #4A617B;
border: 1px solid #BDCFD6}
#sddmT div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #4A617B;
color: #BDCFD6;
font: 11px arial}
#sddmT div a:hover
{ background: #BDCFD6;
color: #4A617B}
And her is html Code
<ul id="sddm">
<li>ETP
<div id="m1" onmouseover="mcancelclosetime()" onclick="mclosetime()">
<a href="http://dashboard.shakarganj.com.pk/ca/sml1etp.php" target=_blank>ETP - Jhang</a>
<a href="http://dashboard.shakarganj.com.pk/ca/sml2etp.php" target=_blank>ETP - Bhone</a>
</div>
</li>
</ul>
And here is my JS code to clos and open the menu items
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'visible';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
//document.onclick = mclose;
// -->
upDate
I want like this
Try this:
#sddmT li { margin: 0;
padding: 0;
list-style: none;
position:static;
font: bold 11px arial; }
I know this is an old post, but I couldn't help noticing you have some whitespace between your main and sub-menus. Wrapping the submenus with the item that they point to will work, but you need to eliminate the whitespace, or you'll trigger the close/exit function every time you go to open the menu.
margin: 0 1px 0 0 vs margin:0.