This is my aspx code,
<div class="ellipsis">
Body Text Body Text Body Text Body Text Body
Text Body Text Body Text Body Text Body !!!
</div>
<asp:HyperLink ID="HyperLink1" runat="server">
<span style="color: Maroon; font-style: italic; font-size: small;">
More..
</span>
</asp:HyperLink>
CSS
.ellipsis
{
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
I want to show single line likes
Body Text Body Text ...More..
But the hyperlink HyperLink1 is dropped to new line . How can I fix it ?
This is Fiddle !
I would not recommend using floats for this. While it does do the trick, it changes the layout of the page and is unneccessary for such a small change. It would be just as easy to fix by changing the display type of the div to inline-block.
.ellipsis
{
display: inline-block;
...
}
Here is a fiddle: http://jsfiddle.net/JntkC/2/
Add a style:
float:left;
to both the div and the link
Adding the style to the div works. See the updated version of your fiddle http://jsfiddle.net/JntkC/1/
Add this line to the CSS
float: left;
Related
I'm trying to play a video in my C# WinForm.
Here is what I have so far:
I have a webViewer control in my form, and the following code:
// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);
Here is what it looks like when I run my app:
The problem is that the video does not fill up the entire webViewer (which is the white part in the image).
I have the webViewer1.Anchor property set to all, so when I resize the form, the webViewer resizes based on the form.
Note:
When the user clicks the fullscreen button the problem is fixed. But this is a bad solution for me because it's a bad experience for the user. Plus, the user may not know that they need to click the fullscreen button. This is what that looks like:
How do I make the video take up the entire webViewer without the user having to click the fullscreen button?
Also, as a side-question, when the user clicks the "YouTube" button, it opens Internet Explorer, and not the default browser. How do I fix this?
You need to fix the styling of your page:
// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html style='width: 100%; height: 100%; margin: 0; padding: 0;'><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "</head><body style='width: 100%; height: 100%; margin: 0; padding: 0;'>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);
This ensures that the HTML and BODY tags occupy 100% of the page, and that allows the child iframe to occupy 100% of the page. That generates this HTML:
<html style='width: 100%; height: 100%; margin: 0; padding: 0;'>
<head>
<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
</head>
<body style='width: 100%; height: 100%; margin: 0; padding: 0;'>
<iframe id='video' src='https://www.youtube.com/embed/5aCbWqKl-wU' style="padding: 0px; width: 100%; height: 100%; border: none; display: block;" allowfullscreen></iframe>
</body>
</html>
I think you need to set up an Aspect Ratio.
Checkout the document here
https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
I am using vs2019. I don’t know why. After trying it, it is in a black state and does not display the video.
I want the textboxes to have the same color and the same size. However, the textboxes don't seem to change when I do the CSS. I also would like to know how to do it for multiple textboxes as I'm planning to add a lot more textboxes.
My CSS:
.TxtBox + .TxtBox{
border-style: none;
border-color: inherit;
border-width: 0;
position:absolute;
outline: 0;
height: 25px;
width:530px;
padding-left: 10px;
background-color: rgb(204, 204, 204);
top: 25px;
left: 165px;
}
And this is my Html using the Asp.Net framework:
<asp:TextBox class ="TxtBox" ID="TextBox2" runat="server" Height="20px"></asp:TextBox>
<asp:TextBox class="TxtBox" ID="TextBox1" runat="server" Height="16px"></asp:TextBox>
The "+" operator means "only the first child", so:
.TxtBox + .TxtBox{
means that you want to apply the style to the first textbox inside a textbox (assuming you set the class TxtBox to all of them)
Since you want to apply the style to all of the elements with that class, just do:
.TxtBox {
My control is as below:
<asp:HyperLink CssClass="link-image" ID="Link1" runat="server"/>
C# Code-Behind:
Link1.ImageUrl = "imagePath";
Generated HTML code:
<a class="link-image" id="MainContent_Link1">
<img alt="" src="\Images\Advertising\ImageFile1.jpg">
</a>
My CSS:
.link-image {
display: block;
margin-left: auto;
margin-right: auto;
}
The CSS works if I apply the class to the img element but the control can only set the class to the a element.
I try to avoid using JavaScript if possible.
To manipulate style of inner tag img just use the corresponding css accessor:
.link-image img {
/* style for img goes here
}
Please Use CSS:
text-align:center;
I'm trying to create an application that can fill html form automatically using WebBrowser control(C#). There is a option list on the web page and I can get corresponding elements in the drop down box. But when I call the invokemember("click") methods, there is no responce.Below in the selection element of HTML
<div>
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
<a class="select" v="0" href="javascript:;">Not </a>
<a v="419000" href="javascript:;">insure</a></div>
Here is my codes,I find ScrollIntoView and Focus method is ok
HtmlElementCollection element_div=currentWindow.Frames[0].Document.GetElementsByTagName ("div");
foreach (HtmlElement item in element_div)
{
if (item.GetAttribute("classname") == "ddlcont" && item.Children.Count !=0)
{
item.Children[1].ScrollIntoView(true);
item.Children[1].Focus();
item.Children [1].SetAttribute("selected", "true");
item.Children [1].InvokeMember("Click");
}
}
I am appreciate that if anyone can help me to solve the problem. Thanks for your help!
You may have pasted wrong, but in your example div doesn't have a class.
Look:
<div>
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
should be
<div
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
(no > on the first line)
Try something like this instead:
Button1.GetType().GetEvent("OnClick").GetRaiseMethod().Invoke(Button1, EventArgs.Empty);
You may need to tweak the syntax a little bit, but this should put you on the right path.
I have a gridview with some imagebuttons, each of which kicks off a report page for that item. The report take 10-15 seconds to run, so I'd like a popup 'Generating report, please wait' type thing. I can think of a few ways but would like the opinion of those more experienced than I. The options I was considering:
a) link my imagebutton to an intermediate page that says 'please wait', and then refer it onto the report page from there. Seems a bit clunky
b) Investigate using jquery or similar. I have telerik controls, they have a few things but it isn't clear if any are suitable.
c) Define some kind of CSS layer with a please wait warning on it, and make it visible as part of the button's onclick event
d) Look into jquery or similar
Any thoughts?
Thanks!
I use Div with transparency, and its pretty cool and simple. Give it a try.
<div id="ModalPopup" style="visibility: hidden;">
<div style="position: fixed; width: 100%; height: 100%; z-index: 10002; background-color: Gray;
filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: fixed; width: 100%; height: 100%; z-index: 10003;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
width: 200px;">
<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
Procesando....
</div>
</td>
</tr>
</table>
</div>
To display the div, use this JavaScript:
document.getElementById('ModalPopup').style.visibility = 'visible';
I have the exact same problem before but I found the AJAX Server Control UpdateProgress very useful. Here's a link to UpdateProgress Control.
you can have an <iframe> on the page, of which its style is set to display:none. a button (which you will use to execute an action) will perform a javascript function that will set the style of the <iframe> to display:block on click.
please wait on page load in js can be used in any language give a try
in body place this code
<body>
<div id='loadingmsg' style='display: none;'></div>
<div id='loadingover' style='display: none;'></div>
</body>
in css
#loadingmsg {
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("assets/img/loaders/load10.gif") no-repeat center center rgba(255,255,255,0);
}
#loadingover {
background: #23351f;
z-index: 99;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
js
<script>
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
showLoading();
}
else if (state == 'complete') {
hideLoading();
}
}
function showLoading() {
document.getElementById('loadingmsg').style.display = 'block';
document.getElementById('loadingover').style.display = 'block';
}
function hideLoading() {
document.getElementById('loadingmsg').style.display = 'none';
document.getElementById('loadingover').style.display = 'none';
}
</script>