i am using css to configure this div's properties using it's id, but it aint working, maybe because i created it in c# in the code behind, how can i fix that?
c#
StringBuilder sb = new StringBuilder();
sb.Append(#"<div id=""img1"" runat=""server"">Vidal</div>");
Label1.Text = sb.ToString();
Css
#img1{
position: absolute;
top: 20px;
left: 20px;
width: 253px;height: 190px;
}
I would use a class instead of an ID. Also, you don't need to make it a div, as your Label will render as a span. You simply need to set the CssClass and Text properties.
C#
Label1.CssClass = "someClass";
Label1.Text = "Vidal";
CSS
.someClass
{
position: absolute;
top: 20px;
left: 20px;
width: 253px;
height: 190px;
}
you can't use label control to display html content , use literal control or panel like below
Panel div = new Panel();
div.ID = "img1";
div.Controls.Add(new Literal{Text = "Vidal"});
this.Controls.Add(div);
I think for your purposes, you might be better with asp:literal control:
StringBuilder sb = new StringBuilder();
sb.Append("<div class=\"image-css-selector">Vidal</div>");
Literal1.Text = sb.ToString();
A label control will have it's own markup and that might affect your html code
If you are using a single webform, then please make sure that you do not have multiple ids. If you are using a master page, and you really need a runat="server attribute to the div then you need to change the css like this:
#ContentPlaceHolder_img1{
position: absolute;
top: 20px;
left: 20px;
width: 253px;height: 190px;
Where ContentPlaceHolder is the name of the ID that you have gave for your content placeholder. for ex:
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
In your master page.
Related
Here ddlSchool is the ajax Combo box
<code>
ddlSchool.DataSource = dt;
ddlSchool.DataTextField = "SchoolName";
ddlSchool.DataValueField = "Id";
ddlSchool.DataBind();
ddlSchool.Items.Insert(0, new System.Web.UI.WebControls.ListItem(" --Select-- ", "0"));
ddlSchool.SelectedValue = "0";
</code>
when I inspect it renders the value but not displaying due to the following ,
<code>
<ul id="ContentPlaceHolder1_ddlSchool_ddlSchool_OptionList" class="ajax__combobox_itemlist" style="visibility: hidden; z-index: 1000; overflow-x: hidden; overflow-y: auto; width: 416px; position: absolute; height: 425px; left: 293px; top: 1458px; display: none;"></ul>
</code>
Please help me to get the ListItems
Try removing:
style="visibility: hidden;display: none;
from the style settings
Also, as it is position absolute, it may be displaying somewhere else on the page eg not where you expect to see it
I found the reason why the listbox is not displaying at the exact place. This is because of bootstrap while splitting the columns into 3. The space is not enough to display line items.So it is displaying at some other place.Need to change the bootstrap column settings to overcome this problem.
I've got a little Problem with my first ASP-Project.
Im offering the user and input-mask to enter data. At some points I want to control if the input is numeric. If not I want to change the border color of my Textbox.
This is my Textbox:
<asp:TextBox ID="tbOnlyNumeric" runat="server" Height="30px" CssClass="MyNumericBox" autocomplete="off"></asp:TextBox>
The style of the box looks like that:
.MyNumericBox
{
width:250px;
overflow: auto;
font-size: 20px;
position:relative;
right:111px;
border-color: #dcdcdc;
padding: 4px;
margin:15px;
border-width: 2px;
border-radius: 10px;
border-style: solid;
transition: box-shadow 0.3s, border 0.3s;
text-align: right;
padding-right: 18px;
outline: none;
}
My idea was to cast the the Text of the textbox in an try-catch-statment:
try
{
if (string.IsNullOrWhiteSpace(tbOnlyNumeric.Text))
{
throw new Exception();
}
else
{
salesExpected = Convert.ToInt32(tbOnlyNumeric.Text.ToString().Replace(".", string.Empty));
}
}
catch (Exception ex)
{
debugLabel.Text = "EX";
correct = false;
tbOnlyNumeric.CssClass = tbSalesExpected.CssClass.Replace("MyExpectedBox", "MyExpectedBoxWrong");
}
So if there is something wrong with my textbox it should look like that:
but instead it looks like that:
I already noticed that if watch it in chrome the old css class is deleted but the new one isn't addet.
Any idea why?
Thanks in advance
could you try this code. put this in your catch statement
ScriptManager.RegisterClientStartUpScript(this,this.GetType(),"pop","changeCssStyle();",true);
//in the head section of your aspx file create a script that will change the
//css style of the textbox
<script type="text/javascript">
function changeCssStyle(){
//if you are using a master page refer the id of textbox to the id of
//head content in master page e.g. MainContent_tbOnlyNumeric
//lets assume you already have reference to jquery in your head section
$('#MainContent_tbOnlyNumeric').css("border-color","red");
}
</script>
Finally figured outthat using:
tbSalesExpected.CssClass = "MyExpectedBoxWrong";
instead of:
tbOnlyNumeric.CssClass = tbSalesExpected.CssClass.Replace("MyExpectedBox", "MyExpectedBoxWrong");
fixes the problem.
Thanks for your answers and comments!
First I will explain my scenario.
I have asp.net menu (dynamically created menu) and now I want to place push notification just like Facebook on my each menu option. I have designed it using CSS and put a label using jQuery.
if (res == "MenuIcons") {
$(this.parentElement).addClass('Notification');
var $label = $("<label ID=\"notificationlbl" + i + "\" style=\"position: absolute; margin-top: 2%; margin-left: -3.1%; margin-right:-3.3%; z-index: 99; color: white; font-size: 9px; font-family: Verdana; letter-spacing: -1px;\">").text('99');
$(this.parentElement.parentElement).append($label);
i++;
}
But I am totally confused that how to handle it using C# because I am unable to get the ID of the label created on run-time.
If you didn't understand please let me know and I will explain it more.
why don't you set a data attribute to each label, something like
var $label = $("<label data-element-type='notification' ID=\"notificationlbl" + i + "\" style=\"position: absolute; margin-top: 2%; margin-left: -3.1%; margin-right:-3.3%; z-index: 99; color: white; font-size: 9px; font-family: Verdana; letter-spacing: -1px;\">").text('99');
and then you can retrieve the whole collection with jQuery:
$("[data-element-type='notification']").each(function(){...});
Try adding runat="server" attribute in your label tag. You label tag id won't be available until runtime. So what you can do is search for the controllers by the id of your label. In code behind you can do as following
foreach(Contol c in this.Controls)
{
if(c.ID.contains("notificationlbl")
{
//your code
}
}
I have two divs on my page. The first one (optionSelect) is not scrollable and stays at the very top of the page. The other one (dataView) is scrollable and is right under the first one.
I'm trying to retain the second div's scrollbar position on postbacks using scrollTop, but it's not working. I verified that the scrollTop() value is being set by displaying it in a TextBox.
On a page update, I change the text in that TextBox to the value of div2's scrollTop(). (working)
On page load, I want to set div2's scrollTop() to the previous value. (not working)
Can someone tell me what I'm doing wrong?
CSS:
.optionSelect {
font-family: Consolas;
overflow: hidden;
position: absolute;
width: 100%;
height: 245px;
}
.dataView {
overflow: auto;
position: absolute;
width: 100%;
top: 245px;
bottom: 0;
}
body {
overflow: auto;
width: 100%;
height: 100%;
}
Javascript:
var currentScroll = "<%=GetScrollPosition()%>"; // C# function to get scroll position value
$("div.dataStyle").scrollTop(currentScroll);
function beforePagePostback() {
$("#loadingImage").show();
var position = $("div.dataStyle").scrollTop();
$("#ScrollPositionTextBox").prop("value", position); // sets scroll position to text box
"<%=SetScrollPosition()%>"; // C# func that gets the scroll position from the text box
}
Not really an answer but your javascript says div.dataStyle and your css class is dataView. Are these supposed to be one and the same or is there something else we're not seeing?
Without C# but scrolltop is working: http://jsfiddle.net/ecarlsonweb/ys3LA/
var currentScroll = "40";
$(function(){
$("div.dataView").scrollTop(currentScroll);
});
The order my C# functions were being called was wrong.
I had to SetScrollPosition() before GetScrollPosition(). I thought that SetScrollPosition() would be called before the page load since beforePagePostback() is called before the page is updated.. but apparently not.
I m using iframe to open another webservice. there user can view the complete the nav of the targeted link. but i wan't to prevent the user to view the complete nav.
There are five items in the targetd URL like this:
Overview
Call Log
Terrif
Payment
Logout
<iframe id="subframe" frameborder="0" scrolling="no" src="login.aspx" style="float: left;height: 754px; margin-left: 118px; width: 727px;" ></iframe>
Now what i want is that, allow user only to view the Call Log.
How could be this possible to do?
Which steps could be taken to perform these all?
If the service is on your own domain, you can access the frames DOM like so:
var myFrame = frames["myFrame"]
var cssLink = document.createElement("link")
cssLink.href = "iframeStyles.css"; /* change this to the url for a stylesheet targetting the iframe */
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['myFrame'].document.body.appendChild(cssLink);
Also see this question:
How to add CSS class and control elements inside of the Iframe using javaScript.?
If the iframe loads a page from another domain, you may not alter it, because that would be against the same origin policy.
I used this a couple of months before.. Some edits might be required:
<div id="IframeWrapper">
<div id="iframeBlocker">
</div>
<iframe id="mainframe" src="http://www.xyz.com/"></iframe>
</div>
CSS:-
#IframeWrapper
{
position: relative;
}
#iframeBlocker
{
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 450px;
}
#mainframe
{
overflow: hidden;
border-width: 0px;
}
OTHER ALTERNATE AND A BETTER ONE