#header {
background-color:#ecf0f0;
width:100%; margin:0 auto; padding-left:10px; padding-right:10px;
font-size:12px; font-family:'ApexSans-Book'; text-transform:uppercase; border-bottom: solid 1px #c1c1c1;
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
box-sizing:border-box;
}
You may need to use the full path to your "ie-css3.htc". See below:
behavior: url("/ie-css3.htc"); /* Paths are relative to the html file (NOT the css file)*/
Related
To test links in my Quilljs editor, I'm highlighting text and then clicking the link symbol in the toolbar -- for a split second the link tooltip shows up, only to disappear right away unless I hold my click on the symbol.
It appears that there's a 'ql-hidden' class that's being applied wrongly, but I'm not sure if it's something to do with my configuration being incorrect.
Here's the JavaScript:
var primaryQuill = new Quill('#editor', {
modules: {
toolbar: '#toolbar',
'link-tooltip': true
},
theme: 'snow'
});
Here's the HTML (using the Jade templating language):
#toolbar
span.ql-format-group
button.ql-bold(type="button") Bold
button.ql-italic(type="button") Italic
span.ql-format-group
button.ql-link(type="button") Link
#editor
p Start writing here...
And here are the only styles I've written for this:
.ql-toolbar {
background: #fff !important;
box-shadow: 1px 1px 3px 1px rgba(0,0,0,.1) !important;
margin: 5px 0px !important;
border: none !important;
}
.ql-container {
margin: -5px 0px !important;
background: #fff !important;
border: none !important;
box-shadow: 1px 2px 3px 1px rgba(0,0,0,.2) !important;
min-height: 500px;
font-size: 1.2em !important;
font-family: inherit !important;
color:rgba(0,0,0,.8) !important;
}
These are AngularUI Bootstrap popovers, which are written in Angular instead of jQuery.
I have a popover in a plnkr that is working, but it's positioning is messed up. It is being cut in half by the page.
When I inspect the popover's CSS, I see some code which doesn't make any sense to me. I understand what it's doing, but where are these element.style properties coming from? They seem to be the problem.
element.style {
top: -139px;
left: 112px;
display: block;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
line-break: auto;
}
There isn't even a scroll option available. Is there a way to position a popover so that the entirety of it appears on the page, regardless of where the button is?
In the element where you whant your popover displayed, add the following directive:
popover-append-to-body="true"
Like this:
<small popover="{{form.descripcion}}" popover-trigger="mouseenter" popover-append-to-body="true">
[{{form.status}}]
</small>
The element styling is set in the source of UI Bootstrap in the tooltip section.
Tooltips and popovers are not meant to store that much data which is why they just center it over the element that it is attached to.
EDIT
For this specific example you can add this CSS:
.popover-parent + .popover {
top: 0 !important;
}
.popover-parent + .popover .arrow {
top: 15px !important;
}
The most dynamic way would be to hook into the event that shows the tooltip and calculate the position of the popover then.
I am using select2. I've enabled users to select keywords that doesn't match. Just wondering when someone does type something that doesn't match, how do you style the dropdown item that's not matching to show a different style? I would like to gray it out or make it italic or something.
Heres an example, the 1st dropdown item doesn't match anything else in the dropdown:
I'm using Angular, but I'm happy for anyone with jQuery solutions to answer as well. I can appropriate it for Angular.
you will want to use the formatResult option, along with styling the result using the markMatch internal function of select2 to retain underline function (see https://groups.google.com/forum/#!topic/select2/FhVygJ_21Nk )
This is an example of code i did to style user input than did not match the queried list of tags. I also included the count of the number of times the tag was used
...
formatResult: function(result, container, query, escapeMarkup) {
var markup=[];
window.Select2.util.markMatch(result.text, query.term, markup, escapeMarkup);
if (result.isNew) {
return markup.join("");
} else {
return '<span class="post-tag">'+markup.join("")+'</span><span class="item-multiplier">× '+result.count+'</span>';
}
},
...
css for my above example
<style>
.item-multiplier {
font-size: 90%;
font-weight: normal;
margin-right: 4px;
color: #999;
}
.post-tag, .post-text .post-tag, .wmd-preview a.post-tag {
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
position: relative;
text-decoration: none;
font-size: 100%;
line-height: 1.4;
white-space: nowrap;
color: #333;
cursor: default;
border: 1px solid #aaaaaa;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #e4e4e4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}
.select2-results .select2-highlighted {
background: #fff0d9;
color: #000;
}
.select2-result-selectable .select2-match, .select2-result-unselectable .select2-match {
font-weight: bold;
}
</style>
I'm needing an image to show on all my Drupal 7 leaflet map popups, below the content that it is pulling in from the drupal nodes. I have added the image test.jpg to my libraries/leaflet/images folder, and the following code to leaflet.css, though its not working. How can I correct/ do this?
.leaflet-popup-tip {
background: black;
width: 725px;
background-image: url('../images/test.jpg');
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
Try with
.leaflet-popup-content-wrapper {
background: black;
width: 725px;
background-image: url('../images/test.jpg');
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
I am building a SPA with AngularJs and Breeze using VS 2013 project based on John Papa's HotTowel.
We have all the latest nuget packages for Angular, Breeze and BootStrap. One of my requirements is to highlight a text area when the field is invalid (in our case required). This functionality has been implemented with many other fields in the app (primarily input and select fields) and works just fine. However, when I try to apply the data-ng-required directive to the textarea, I do not get the red outline around the textarea.
After some digging I found a fix for this by modifying the breeze.directives.css file:
Before:
input:invalid,
select:invalid {
border: red solid 1px !important;
border-left: 5px solid red !important;
}
span.z-decorator span.invalid,
input:invalid + .z-decorator > .invalid,
select:invalid + .z-decorator > .invalid {
visibility: visible;
display: inline-block;
background-color: rgb(189, 54, 47);
margin: 0.3em 0 0 1em;
padding: 4px 10px;
-ms-border-radius: 3px 3px 3px 3px !important;
border-radius: 3px 3px 3px 3px !important;
background-position: 15px center;
background-repeat: no-repeat;
-webkit-box-shadow: 0 0 12px #999999;
-ms-box-shadow: 0 0 12px #999999;
box-shadow: 0 0 12px #999999;
color: #ffffff;
-ms-opacity: 0.8;
opacity: 0.8;
z-index: 20;
}
select:invalid + .z-decorator > .invalid {
margin: 0.1em 0 0 1em;
}
After:
input:invalid,
textarea:invalid,
select:invalid {
border: red solid 1px !important;
border-left: 5px solid red !important;
}
span.z-decorator span.invalid,
input:invalid + .z-decorator > .invalid,
textarea:invalid + .z-decorator > .invalid,
select:invalid + .z-decorator > .invalid {
visibility: visible;
display: inline-block;
background-color: rgb(189, 54, 47);
margin: 0.3em 0 0 1em;
padding: 4px 10px;
-ms-border-radius: 3px 3px 3px 3px !important;
border-radius: 3px 3px 3px 3px !important;
background-position: 15px center;
background-repeat: no-repeat;
-webkit-box-shadow: 0 0 12px #999999;
-ms-box-shadow: 0 0 12px #999999;
box-shadow: 0 0 12px #999999;
color: #ffffff;
-ms-opacity: 0.8;
opacity: 0.8;
z-index: 20;
}
select:invalid + .z-decorator > .invalid {
margin: 0.1em 0 0 1em;
}
I simply inserted the following:
"textarea:invalid," in the definition of each class
This gives the results I was expecting, however, I really did not want to modify the breeze.directives.css file as this could get over-written the next time we update the breeze files.
To prevent this, I copied the both sections of the css to the bottom of our custometheme.css file where we add customizations then modified them to only point to the textarea:invalid.
My questions is, does anybody know of a reason they left this functionality out? Might this cause problems later?
I did some fairly extensive research to find the solution to this problem and was not able to find any references to other people running into this.
Anyone else run into this?
I'm afraid the breeze directives are more of a proof of concept. That's one reason they are in Breeze Labs.
That said, we take pull requests and I have no objection to adding a textarea selector.