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.
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!
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.
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
i have following code in cs file
QueMAnsM[] Answers = Curr.AnsM;
rdbAns.DataSource = Answers;
rdbAns.DataTextField = "Answer";
rdbAns.DataValueField = "AnsId";
rdbAns.DataBind();
rdbAns.TextAlign = TextAlign.Right;
where rdbAns is asp:radiobuttonlist control
i have set TextAlign property to right (This code is at page load)
but text is still showing at left side
what is wrong with this code
Set the TextAlign property to "Right" on the list .
<asp:RadioButtonList id="RadioButtonList1"
RepeatDirection="Vertical"
RepeatLayout="Table"
TextAlign="Right"
runat="server">
OR, In code behind :
RadioButtonList1.TextAlign = TextAlign.Right;
OR, Perhaps you can use some css.
Give your list a CssClass="rbListWrap" and add following style:
.rbListWrap {
width: 500px;
}
.rbListWrap tr td {
height:20px;
vertical-align: middle;
padding: 5px;
width: 33%;
}
.rbListWrap input {
float:right;
}
.rbListWrap label {
position: relative;
padding-left:20px;
}
Set CheckAlign Property to MiddleLeft if you want to move the text of the radio button to the left. You can move it to other positions if you want to.