I have a placeholder whose content (table and buttons) is generated dynamically based on the user choice. And I wanted to make the table vertically scrollable, and while doing so I have faced this unusual CSS behavior for me:
So I have the place holder as follow:
<div id="srollableTableDiv">
<asp:PlaceHolder ID = "roundingProblems_ph" runat="server" />
</div>
and I am applying the following CSS on the div:
#srollableTableDiv { height:500px; overflow:scroll; border:1px solid red; }
Now what happens is that when the table is generated, the CSS seems not to be working at all, but when I change a value in the CSS (for example make the border color to red or blue) the whole CSS would work in the browser without refreshing the page (I am using VS and chrome).. but once I refresh the page the CSS stops working again until I change CSS to another value!
Note: I am using bootstrap.
Could anyone explain what is the issue here?
Thank you very much.
Related
I am using Kendo MVC in C# project.
I am trying to add k-danger class to kendo button. I don't know why but it's not working where k-primary class works.
This is my buttons code:
<button type='button' id='Button1' onclick='Delete(#=ID#)' class='k-button k-button-icontext k-grid-add k-danger'> // This is just showing the default button
<span class='k-icon k-i-trash'></span>
</button>
<button type='button' id='Button2' onclick='Info(#=ID#)' class='k-button k-button-icontext k-grid-add k-i-pencil'> // This is showing the primary button
<span class='k-icon k-i-pencil'></span>
</button>
The icons works perfectly.
I searched everywhere but I found nothing about this. So I am concluding that there is no k-danger class, I don't know if I am wrong.
If no k-danger is available is there anything else I can use instead of k-danger?
I can provide full code if it's needed.
danger (or actually btn-danger) is a Bootstrap-specific CSS class name and indeed, it does not exist in the Kendo UI stylesheet. There are two options that I would suggest:
Assuming that you have the Bootstrap stylesheet registered, try using the btn-danger CSS class of Bootstrap. The downside is that you will likely stumble upon Kendo UI vs Bootstrap style conflicts and the resulting button appearance will be a mix between the two libraries' styles.
Create your own Kendo UI "danger" button styling. For example, add the following CSS rule to a stylesheet, which is registered after the Kendo UI stylesheet:
.k-button.k-danger,
.k-button.k-danger:active {
background-color: #f00;
color: #fff;
border-color: #f00;
}
k-danger does not have any style in kendo css,
You need to create your custom style to get your result or just add bootstrap css and add "btn btn-danger" class in you Danger Button.
Check this JsBin Demo
Js Bin Example
By default kendo provide you with k-error-colored as shown here.
The other handy classes are :
k-info-colored
k-success-colored
k-warning-colored
You just have to use it with k-button
This jsfiddle shows how it render.
I have one link whose background colour has to change when I click on it. So I have used a JavaScript function to do this,but it is working in Internet explorer but not changing in Mozilla Firefox.
The code is below:
function hilite() {
Trend.style.background= "#000000";
}
Here trend is the id of the Link tag.
Link:
<a id="Trend" style="color: #FFFFFF;
text-decoration: none;" href="ATrendAnalysis.aspx">Trend Analysis</a>
Cs file:
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ScriptRegistration1", "hilite();", true);
In this case:
Trend.style.background= "#000000";
"Trend" is a JavaScript variable, which is not defined. This is NOT referencing an element in the DOM.
Use:
document.getElementById('Trend').style.background= "#000000";
You could also try to apply some styles to the link using CSS by using the pseudo-class selector :active.
:Active would apply the defined style (in your case, it would be change its background color) only while the link is being pressed.
I'm developing a page in which I've given users an interactivity to change the background color of a page by clicking particular button. I am trying to find out through various sites but they are giving the information about how to change the background color of the text box or grid view. it is a bit like customization tool which you find in various sites like orkut and face book.
in the css/style
body
{
background-color:#000000;
}
But since it seems like you want to change the color on the fly then either in a javascript or code behind, change the class of the body to one that has background-color applied.
eg. for the code behind, make sure to set the with a runat="server" and id
and then in code behind:
bodyId.Attributes["class"] = "test";
in css:
.test
{
background-color: #000000 !important;
}
Note that this will happen after a postback, while in the sites you mentioned it probably uses javascript.
You can use jQuery to modify the DOM on the fly, which would be perfect for your situation. Here's a quick sample using the .css() method. Once you make that change, you can store the value in a cookie or some other mechanism and use it next time the page is loaded.
//assumes MyButtonId is the id of the button the user clicks
$('#MyButtonId').click(function () {
//set the background-color of the body element to green
$('body').css('background-color', '#00F')
});
Ok,
i have a fully rendered dynamic form ( i do not know the content of the form, it is provided to my via a webservice )
i used asp.net RequiredFieldValidator for validation, because i read in this article that we could dynamically switch validators on and off depending if the field is visible or not
with the ValidatorEnable(val, enabled) function.
though now that i got the form rendered, i'm running into a bit of trouble with this javascript, as i don't want to put it in the aspx file itself, (don't have a control there anyway since the form is build up in codebehind from the webservice data...)
so i took a look at the clientId and it turns out the validator's client ID is the id of the span it renders to.
so i tried running this in firebug to test if i could enable / disable one of those validators, but that seems not to be possible, a jQuery span element does not have a property to enable it.
ValidatorEnable($("#ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_reqAnswer_373ac8b7_8da9_467b_b9b4_d586e45a7504"), false);
and the html that goes with this
<div class="question-container question-odd" id="ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_question-373ac8b7-8da9-467b-b9b4-d586e45a7504">
<div class="question-meta">
<h3 class="validation-label">Which club have you visited?</h3>
<span style="display: block; margin-bottom: 10px; margin-top: 5px;" class="error validation" id="ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_reqAnswer_373ac8b7_8da9_467b_b9b4_d586e45a7504">Please fill out this field.</span>
</div>
<input type="text" class="answer-container text" id="ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_answer_373ac8b7_8da9_467b_b9b4_d586e45a7504" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$MasterWithNavContent$Poll_4$answer_373ac8b7_8da9_467b_b9b4_d586e45a7504">
</div>
Does someone know where i'm going wrong here?
maybe I'm to quick to jump from the serverside ClientId to the <span> which the RFV renders into? but they seem exactly the same.
hope someone can point me in the good direction!
Maybe a better approach would be to loop through the client-side array of validators (Page_Validators) and find the validator which you want to disable.
See also this MSDN page and this codeproject article for more information.
Perhaps a more appropriate way to do this would be
ValidatorEnable($("<%= reqAnswer.ClientID %>")[0], false);
Using <%= reqAnswer.ClientID %> avoids having to guess at or hard-code the client-side ID of the validator. Adding [0] after the jQuery $() gets the actual validator DOM element instead of the jQuery wrapper.
Source for [0]
i am doing mini ERP project., in that i have 3 frames.
frame is used as Header where i have "Home" and "logout" image button
when i click "Home" the frame3 goes to Home page and when i click "Logout" button, all the frames disappears and main window of "Login" screen comes.
i have used "Home " and "Logout" button in image using Hyperlink control in ASP.NET
the problem is due to Hyperlink the button gets blue border around it.
i want to remove that border around the image button.
can any one knows how to remove that border
here my codes
<asp:HyperLink ID="HomeButtonlink"
BorderWidth="0px"
Font-Overline = "False"
ImageUrl="~/Images/Untitled-5.png"
runat="server"
Height="100%"
Target ="frame3"
NavigateUrl="~/About.aspx"
BorderStyle="None"></asp:HyperLink>
thanks in advances
A.S.Rajkumar.Rajguru
I would create a new css class for this instead:
<asp:HyperLink ID="HomeButtonlink" CssClass="linkbutton"
ImageUrl="~/Images/Untitled-5.png"
runat="server" Target="frame3" NavigateUrl="~/About.aspx"></asp:HyperLink>
and you can define your class like this:
a.linkbutton, a.linkbutton:visited, a.linkbutton img
{
border: none;
outline: none;
}
You gain very little by using the asp.net server control. You can do the same like this:
<a href="<%=ResolveUrl("~/about.aspx")%>" target="frame3" class="linkbutton">
<img src="<%=ResolveUrl("~/images/untitled-5.png") %>" />
</a>
The border around images that are links is part of the default HTML stylesheet.
To get rid of it for all images, add a simple bit of CSS to your page as follows:
img {border:none;}
This is a common thing to want to do, as very few people actually want the default behaviour these days. You may want to look into adding a 'reset' stylesheet to your site to get rid of all the unwanted default behaviours. It will also make your page work more consistently between different browers.
Here's a link to a related question to help you find out more: https://stackoverflow.com/questions/116754/best-css-reset
If for some reason you don't want to affect all the image links on your site, you could also do a more specific stylesheet for it since you've given it an ID:
#HomeButtonlink {border:none;}
You could also add a CSS class to the object, and then reference that in your stylesheet if you wanted to apply it to a group of buttons.
...but frankly, I'd just go with the full reset if I were you.