This question already has an answer here:
How to change the size and other properties of the chat window
(1 answer)
Closed 5 years ago.
Is it possible to resize the width of the chat for botframework ? Currently I'm testing on a emulator. Basically I want make my bot chat wider to the right. As you can see in the picture, the chat width remain the same despite me increasing the size of the columns, add more columns, and so on. Currently using adaptive card.
If you are using the iframe embed, you can edit the width of the iframe HTML element by adding the style in-line:
<div id="bot">
<iframe src="https://webchat.botframework.com/embed/..."
style="height: 600px; width: 500px; resize: both;">
</iframe>
Alternatively, if you want greater control you can edit the styling directly to the Web Chat source code -
Customizing Web Chat
Related
In our company he have been developing new email design recently and we have bumped into interesting bug occuring only in default macOS Mail.app client. The problem is that around 990px width of viewport all images are offset approximately 40px to the left from their parent <td> element. But the exact width of the viewport when the image is offset is based on the images' width. The HTML snippet is uploaded here. The output HTML is generated by MJML library in NestJS backend of our system. Screenshots with outline turned on on all elements from are on imgur gallery here.
Have you ever experienced this? If so, do you have any tips how to hack this thing to work properly?
When revisiting a page with a Facebook embed, the embed has a height of 0px.
I've already discussed with Facebook and recorded some screencasts: https://developers.facebook.com/bugs/1562053057141539/
Is there a way to force the widget to recalculate it's height?
Regards,
Christian
I created a set of small PNG files to hug the top and bottom of my website. By repeating themselves on the X-axis they span the entire width of the site and actively shrink and expand with the browser. This worked as predicted until the upper span was pushed to the right allowing another image (logo/button) to occupy the upper-left corner. This repeating image and the banner logo are a contiguous image so I'm doing my best to make it work as designed. I added this bit to my style sheet to nudge the repeating image over to the right:
left:650px;
This caused a horizontal scroll-bar to appear allowing access to a big-open-nothing at the right side of my site (it appears to be the same distance the PNG is being pushed over to). I believe this is called overflow? To constrain the overflow I added the following to the html, body tag in the style sheet:
width: 100%;
overflow-x: hidden;
This removes the scroll-bar in all the browsers I've tested (Chrome, IE, FF & Opera) but in most cases, side scrolling can still be invoked by clicking down on the center mouse button and activating the easy-scroll feature (I don't know the actual name of this feature, but hope you understand what I mean).
FF deactivates this mouse feature but still allows scrolling with the keyboard arrows. IE is the only browser that is working correctly.
I've looked all over for an answer but have only netted some possible solutions, but I don't understand how to implement or even how to describe them. Being a novice I suspect incorrect terminology is also hindering my searches. In any case, if you take a peek at my website:
http://www.cybergolem.com/indexWIP.php
BTW, my div nesting looks like this:
<body>
<div id="container">
<a class="homebutton" href="index.php">Home Page</a>
<div id="header"></div>
</div>
<div id="footer">
<div id="footNote"> — Thar Be Dragons Here — </div>
</div>
</body>
Thanks Much.
Scenario
My page p1 contains an iframe.
The iframe points to a page p2 containing an embedded video from youtube.
Problem
The problem is that if I scroll (by mouse) the page inside the iframe, it scrolls normally only if the mouse cursor isn't on a youtube embdedded video.
But if the mouse cursor is on a youtube embedded video, the page p2 inside the iframe stops to scroll, while the external page p1 starts to scroll.
How can avoid this no normal behaviour?
I expect that even if the mouse cursor is on the youtube embedded video, the page inside the iframe continues to scroll normally, and it doesn't loose the mousewheel event.
Failed solutions
I tried to add the attribute wmode="transparent" to the iframe tag of youtube embedded video, but it doesn't solve the problem.
Details
To scroll inside the iframe I'm using a plugin that substitues the scrollbar.
Demo
You can find the demo here. Open it with Firefox and scroll with the mouse inside the iframe
I didn't find a solution, other than that suggested by #Kaarel Kont-Kontson.
If I put a div in top of the video the user can play the video and can scroll even if the mouse cursor in on the video.
Specifically, the following is the div to display a single video:
<div style="position:relative; height:200px; width:200px;">
<iframe style="position:absolute;width:100%;height:100%;z-index:-10;" src="//youtube.com/embed/dooCQdg9-NA"></iframe>
<div style="height:100%;width:100%;position:absolute;z-index:20;"></div>
</div>
Found a solution, got observing Facebook code.
Basically, instead of using iframe to embed youtube video, I'm using the <embed> tag, like the following code:
<embed wmode="opaque" salign="tl" allowscriptaccess="never" allowfullscreen="true" scale="scale" quality="high" bgcolor="#FFFFFF" name="swf_u_jsonp_2_2b" id="swf_u_jsonp_2_2b" style="display: block;" src="https://www.youtube.com/v/XvLAKrVbCBM?version=3&autohide=1" type="application/x-shockwave-flash">
I'll be short.
http://www.tuttoinunafesta.info
Click on the second button of the top menu ("Feste per bambini") and look at the links that appear on the orange stripe.
In IE10 and Chrome they are vertically in the center of the stripe as they should be, because the images are 42px (the same div of the container div).
In Firefox they are some px below where they should be.
Why?
The container div of the menu-top buttons is overlapped by the container div of the colored stripe (in this case the orange one).
The bottom div has the following properties:
{position:relative; top:-2px;}.
It seems that Firefox can't overlap the images of the links over the images of the buttons even if the two divs are overlapped.
Have you used a css reset? Browsers add padding and margins by default, but the problem is, they're all different. A simple css reset can be done with this code:
* { margin: 0; padding: 0; }
There are more in-depth ones available on the web - this is one of the most commonly used ones - http://meyerweb.com/eric/tools/css/reset/.