I am using bot framework to create chatbot application. In work flow I am using suggested actions the button with thumbs up and thumbs down i have replaced with background svg image but the image is sometimes displaying and sometimes not displaying in web browser.
<div class="wc-suggested-actions"><div>
.wc-suggested-actions .wc-hscroll > ul > li:nth-child(2) button {
background-image: url(/Content/Images/L-ThumbsDown.svg) !important;
text-indent: -9999px;
text-transform: capitalize;
background-repeat: no-repeat;
}
.wc-suggested-actions .wc-hscroll > ul > li:first-child button {
background-image: url(/Content/Images/L-ThumbsUp.svg) !important;
text-indent: -9999px;
text-transform: capitalize;
background-repeat: no-repeat;
}
Related
This is my mark-up:
<Thumbnail src="/path/to/image" />
This is the generated html:
<div src="/path/to/image" class="thumbnail" ><img src="/path/to/image" ></div>
This is the CSS (which comes from bootstrap-sass):
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border 0.2s ease-in-out;
-o-transition: border 0.2s ease-in-out;
transition: border 0.2s ease-in-out;
}
.thumbnail > img, .thumbnail a > img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
And this is the result:
The issue is that the border is on the div. Because the image is smaller than the div this looks odd. I would prefer the border to be on the image. The second selector above, thumbnail > img, uses max-width, and this is essential to prevent a hi-resolution image springing out of its container. So - given these CSS rules to prevent the image springing out it looks the Thumbnail has correctly put the .thumbnail class on the containing div. But then the border is on the containing div, not on the img tag.
If I just put the Bootstrap img-thumbnail class directly on the image (and forget React-Bootstrap Thumbnail altogether) I get the result I want.
.img-thumbnail has the max-width and the border.
It looks like .thumbnail is coming from bootstrap-sass. So, overall, I'm not sure if this is a problem with react-bootstrap or bootstrap-sass. At any event the React-Bootstrap Thumbnail component does not work as I would expect. Is this an error or user error?
I often float images either left or right around text on desktop but I want them centered for small mobile devices and the paragraph to drop below the image using Responsive design. I've got the paragraph dropping below the image using an online mobile viewing device but not when I try to view it via my computer. The image won't center online or on my computer.
Here is what I have found after many hours of research:
I have this set up for all images:
img{
border:0;
max-width:100%;
height:auto;
}
I have this set up for all paragraphs: it pushes the paragraph down below a floated image when the width of the paragraph is less than 10em (about 200 px).
p:before{
content: "";
width: 10em;
display: block;
overflow: hidden;
}
I have applied the following for images to media queries less than 320 and max of 480:
img{
max-width:100%;
display:block!important;
margin:0 auto !important;
float:none !important;
}
(i had to add !important to some of them or they wouldn't take but it's still not accepting margin: 0 auto; )
Can anyone see what I'm doing wrong?
Here you have a working update of what you need: http://jsfiddle.net/ancpjmet/3/
I changed min-devide-width to min-width and max-devide-width to max-width to be able to see the changes on my desktop browser in Google Chrome.
You have to set the div wrapping the img to float: none;, not the img:
#media only screen and (min-width:320px) and (max-width:480px) {
#image-wrapper{
float: none !important;
}
#image-wrapper img{
max-width: 80%;
display: block;
margin: 0 auto;
}
}
I also rebuild your .clearfix class to be more consistant and work in all browsers:
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.clearfix:after {
clear: both; }
.clearfix {
zoom: 1; }
Take a look at the changes in the jsfiddle given.
If I put my extension in menu bar, after closing extension some CSS properties doesn't work. (In the add-on toolbar it works perfectly)
Video: http://www.youtube.com/watch?v=iM9EVFe8M4U
github: https://github.com/Exclumice/firex/tree/master/content
CSS: https://github.com/Exclumice/firex/blob/master/skin/overlay.css
CSS properties which become inoperable:
.proxy-help {
background: url("icon-help.png");
background-position: 97% 50%;
background-repeat: no-repeat;
background-color: #e5e5e5;
border-radius: 10px;
padding: 5px;
text-align: center;
width: 100%;
}
.proxy-help-text > label {
width: 80%;
}
.proxy-list hbox > label.proxy-country {
padding: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background: url("planet.png");
background-position: 5px center;
background-repeat: no-repeat;
width: 180px;
text-indent: 25px;
}
.proxy-list .proxy-type {
padding: 5px;
width: 50px;
}
How to fix it? Why is this happening?
Thanks in advance.
Ok after testing we find this.
When it is in toolbar, the elements are black in DOM Inspector, so they are NOT anonymous:
But when we move them to PanelUI-popup they become anonymous, notice how they are red in the inspector:
maybe #nmaier can advise here.
I'm thinking a box loses its box'ness so then the % widths you used are taking the % of osme different box once placed in panelui-poup.
In PyroCMS, I'm using the session:messages tag to display messages to the user. This is working well, but I'd like to add a close button to each message which requires placing a span within each message. For example:
<div class="alert success">
You have logged in successfully. <span class="close">X</span>
</div>
Each message is wrapped in a div, which is given a class by setting an attribute of the session:messages tag. There is no built-in way to specify the output. How can I override the messages() function in session.php, adding a new attribute to append this close button?
So far I have tried:
Copying system/cms/plugins/session.php to *addons/shared_addons/plugins/session.php* and modifying the messages() function. The core function is used, rather than the new plugin as I had hoped.
Copying the plugin as described above, and then changing it's class to My_Plugin_Session extends Plugin_Session in hopes that its functions would then override the core Plugin_Session class. No luck.
It's not possible to extend certain things that are in the core (e.g. libraries and helpers) - I think this applies to plugins too.
In this case, if I was you (and I may well have to do this for my next project as these closable alerts are typically in Twitter Bootstrap etc.) I'd just edit /system/cms/plugins/session.php directly and add the extra <span> for the close button to the success, notice and error conditionals ('if' statements).
On a typical site I can't think of a situation where you'd ever need some alerts displayed differently to others (other than different colours depending on the outcome of course, which you can do in the CSS using the class name).
Providing you're using Git (you've cloned or forked the official PyroCMS repository and made your own branch) you'll be absolutely fine with future updates - if in a future version the session plugin changes, any changes will just be merged into your code automatically, or if Git can't figure it out, it'll show you the differences and prompt you to fix it by hand.
Note - there are a couple of other solutions for this specific problem based on the admin interface (you may have noticed the flash messages there are closable).
You could create a partial - which can contain PHP, not just Lex tags - e.g. see /system/cms/themes/pyrocms/views/admin/partials/notices.php with something like this (edit as needed and duplicate for notice and error):
<?php if ($this->session->flashdata('success')): ?>
<div class="alert success">
<?php echo $this->session->flashdata('success'); ?>
</div>
<?php endif; ?>
PyroCMS admin actually uses liveQuery to append the close button <span> in the browser
Source: /system/cms/modules/wysiwyg/js/wysiwyg.js:
// Add the close link to all alert boxes
$('.alert').livequery(function(){
$(this).prepend('x');
});
I did this and it is working perfect no need other plugin than jQuery.
in the template layout add this:
{{ session:messages success="message success" notice="message info" error="message error" }}
JavaScript:
$(function() {
$('.message').prepend('<a class="baxclose" id="baxclose"></a>');
$('#baxclose').click(function(){
$('.message').fadeOut('slow');
});
});
and the CSS:
a.baxclose{
float:left;
width:30px;
height:30px;
background:transparent url(../img/close-icon.png);
margin-top: -30px;
margin-left: -30px;
cursor:pointer;
}
.message {
padding: 20px 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-bottom: 10px;
-moz-box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
zoom: 1;
margin-bottom: 20px;
}
.message h3 {
margin-top: 0;
font-size: 12px;
font-weight: bold;
}
.message p {
margin-bottom: 0;
}
.message.info {
border: 1px solid #cadcea;
background-color: #cdf;
background-image: -o-linear-gradient(top, #eef, #cdf);
background-image: -ms-linear-gradient(top, #eef, #cdf);
background-image: -moz-linear-gradient(top, #eef, #cdf);
background-image: -webkit-gradient(linear, left top, left bottom, from(#eef), to(#cdf));
background-image: -webkit-linear-gradient(top, #eef, #cdf);
background-image: linear-gradient(top, #eef, #cdf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEFF', endColorstr='#CCDDFF');
color: #225b86;
text-shadow: 0 1px 1px #fff;
}
.message.error {
border: 1px solid #eeb7ba;
background-color: #fae2e2;
background-image: -o-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -ms-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -moz-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fae2e2), to(#f2cacb));
background-image: -webkit-linear-gradient(top, #fae2e2, #f2cacb);
background-image: linear-gradient(top, #fae2e2, #f2cacb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae2e2', endColorstr='#f2cacb');
color: #be4741;
text-shadow: 0 1px 1px #fff;
}
.message.success {
border: 1px solid #b8c97b;
background-color: #e5edc4;
background-image: -o-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -ms-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -moz-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -webkit-gradient(linear, left top, left bottom, from(#e5edc4), to(#d9e4ac));
background-image: -webkit-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: linear-gradient(top, #e5edc4, #d9e4ac);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5edc4', endColorstr='#d9e4ac');
color: #3f7227;
text-shadow: 0 1px 1px #fff;
}
Instead of the button you use to remove, another option would be to create a fadeOut message on click event.
HTML:
<div id="msgAlert"> …session:messages goes here...</div>
JS:
<script type="text/javascript">
$('html').click(function() { $('#msgAlert').delay(5000).fadeOut('slow'); });
Having a click will fadeOut the session message after 5sec.
I have a few buttons on my webpage in different colors. I have one class for the shape of the button, and then a few classes that give them colors.
.button {
font-family:"Helvetica Neue W01 75 Bold", Helvetica, Arial, Sans-serif;
text-decoration: none;
white-space: nowrap;
color: #333;
padding: 13px 15px;
display: inline-block;
font-size: 1em;
font-weight: bold;
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
a.button {
color: #333;
}
.black.button {
background-color: #dedede;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
background: -moz-linear-gradient((linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=##EFEFEF, endColorStr=##D3D3D3);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#D3D3D3)";
-webkit-appearance: push-button;
}
.black.button:hover {
background: #E2E2E2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#E2E2E2, endColorStr=#E2E2E2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E2E2E2, endColorstr=#E2E2E2)";
}
.orange.button {
background-color: #ffaa44;
background: -webkit-gradient(linear,left bottom, left top, color-stop(0.22, rgb(255,144,9)), color-stop(0.81, rgb(255,170,68)));
background: -moz-linear-gradient(center bottom, rgb(255,144,9) 22%, rgb(255,170,68) 81%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffaa44, endColorStr=#ff9009);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaa44, endColorstr=#ff9009)";
}
.orange.button:hover {
background: #ff9009;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ff9009, endColorStr=#ff9009);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff9009, endColorstr=#ff9009)";
}
I use them like:
<a class="orange button" href="#">Click Me</a>
This works in Chrome and Safari but does not work in Firefox12 (and IE). All I see is a white box with 'ClickMe' (So probably the .button is applied, but not .orange)
From what I read, this is supported in Firefox. But I cannot figure what is wrong in my stylesheet.
When I do an 'Inspect Element', Firefox shows the class as a.orange.button, but in the Styles tab, it doesnot display these classes. It is picking my stylesheet as the rest of the page is displayed okay.
What am I missing here?
It seems to work if you remove invalid CSS code. I'm wondering if you have these exact lines in your original CSS code (with ... and unclosed brackets - which should cause the problem):
background: -webkit-gradient(...
border-radius:...
Cleaned up jsFiddle Demo
The problem is surely not with multiple classes. They work fine in every modern browser.
UPDATE: I found the issue based on this jsFiddle. It is this declaration:
.black.button {
background: -moz-linear-gradient((linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
}
You have one more opening ( than needed right after -moz-linear-gradient.
Correct version (jsFiddle):
.black.button {
background: -moz-linear-gradient(linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
}
Try using something like the following
background: -moz-linear-gradient( top left, white, black );
-webkit-gradient is for webkit browsers -- like Chrome and Safari; Firefox is not a webkit browser.
see http://jsfiddle.net/Wfxym/
Some notes found # linear gradients and especially Cross-browser CSS gradient (details on the Firefox implementation can be found on MDN: https://developer.mozilla.org/en/CSS/linear-gradient)