I have an asp.net form that is styled with CSS. I am trying to input a string into a textbox through the code behind the asp form.
Problem: All text that goes into any asp.net textbox is centered and in one line Figure 1
Attempted solution: Created a class in my CSS form and changed margins and alignments. Surrounded the textbox in a div with the class
Question: How do I revert the CSS back so all ASP.NET textbox's are back to normal
If you add class attribute to the form element then the given styles apply for all the elements within that form element.
Instead of doing that if you want to apply style for only one element add id attribute to the element and give styles.
Ex:
.form {
text-align: center;
}
above code apply center text for all elements.
<input id="txtBxId " value="Hello World!"/>
#txtBxId {
text-align: center;
color: red;
}
but if you do like this it will apply for single element
you can use textbox in centered text with 2 ways :
1) tag
<center>
<asp:TextBox ID='text'>
</center>
2) Input :
<html>
<style>
#txtBxId {
text-align: center;
color: red;
}
</style>
<body>
<input id="txtBxId " value="Hello World!"/>
</body>
</html>
In my code, I want to add a repeating-linear-gradient to my div from my code behind. At the moment, I am trying to set this by the following code:
_div.Style.Add("background-image", "repeating-linear-gradient(90deg,rgba(0,100,200,.5),rgba(0,100,200,.5) 1px,transparent 1px,transparent 1px,rgba(0,100,200,.5) 1px)");
But the code has no effect on the div itself. I have been able to change the display with similar code:
_div.Style.Add("display", "inherit");
Any help would be appreciated.
Edit
Here is the HTML for the div
<div id="_div" runat="server">
<asp:Label ID="_Label" runat="server"></asp:Label>
</div>
Here is the CSS for the div
#output_div {
display: none;
padding-top: 2%;
padding-bottom: 2%;
width: 50%;
margin: 0 auto;
/*Below line works, but would like to set it dynamically on the server side*/
/* background-image: repeating-linear-gradient(90deg, rgba(0,100,200,.3), rgba(0,100,200,.3) 1px, transparent 1px, transparent 1px, rgba(0,100,200,.3) 1px);*/
background-size: 4px 4px;
}
Give it a try with following approach,
_div.Attributes.Add("style", "background-image: repeating-linear-gradient(90deg,rgba(0,100,200,.5),rgba(0,100,200,.5) 1px,transparent 1px,transparent 1px,rgba(0,100,200,.5) 1px)");
That way, style attribute will be rendered to the output HTML.
Update
You can also try adding a specific CSS class.
.myBackgroundImg {
background-image: repeating-linear-gradient(90deg, rgba(0,100,200,.3), rgba(0,100,200,.3) 1px, transparent 1px, transparent 1px, rgba(0,100,200,.3) 1px);
}
Then you can apply it in the code behind.
_div.Attributes.Add("class", "myBackgroundImg");
Try the below line -
_div.Style.Add("background", "repeating-linear-gradient(90deg, rgba(0,100,200,.5) , rgba(0,100,200,.5) 1px,transparent 1px,transparent 1px,rgba(0,100,200,.5) 1px)")
You may have to use ScriptManager & UpdatePanel also.
I have problem in Visual Studio 2008 (ASP.net with C#).
I have div#apDiv13, now I want to make my div a hyperlink.
I set my div's background and now I want it to be a hyperlink on mouse over
or go to some address in web on-click.
This is very bad idea but technically it's possible. What you need to do is display link as a block and set its size to 100% vertically and horizontally so it fills the container div.
Example (http://jsfiddle.net/snLwg/)
div {
background: red;
width: 300px;
height: 300px;
}
div a {
display: block;
height: 100%;
width: 100%;
}
Simple way:
<a href="http://stackoverflow.com/">
<div>Contents of your div</div>
</a>
My Problem:
I have a fluid CSS design layout that works brilliantly, albeit until my asp.net: table messes things up! When the user reduces the browser size or if the user is logged on via a mobile device my table will extend itself to it's actual width which is approx 1000px.
What iv'e tried to do:
Iv'e tried using javascript code to fix this and it works only if i specify the max width but i need a way for this code to know the current max width of the screen
My code used:
the script:
<script language="javascript" type="text/javascript">
$('#dvTableDock').width($('#dvPageWidth').width());
</script>
i then create a style:
.TableDock
{
overflow-x: auto;
overflow-y: auto;
width: 870px; // Need to dynamically specify width here
height:200px;
padding: 0 0 17px 0;
}
i then add a div that gets screen width and apply the style and script to another tag that wraps the table:
<div id="dvScreenWidth" visible="false">
</div>
<div class="TableDock" id="dvTableDock">
//table in here
</div>
What i want is for the dock to know when to show the horizontal scroll, i.e when the screen width becomes less than 1000px and the table begins to extend out of the page.
I really hope i have made my self clear in this question but please let me know what other information is needed to help me. Thanks to anyone that helps or corrects any of my mistakes.
Instead of using fixed width (ie, pixels units) use percents.
.TableDock
{
overflow-x: auto;
overflow-y: auto;
width: 95%;
height:200px;
padding: 0 0 17px 0;
}
So this is my own solution which worked:
.TableDock
{
overflow-x: auto;
overflow-y: auto;
//Remove the width and height completely
padding: 0 0 17px 0;
}
I solved this by removing the width and height completely
I know I can just use a master page, but what markup do I use on the master page to always have a header at the top and a footer all the way at the bottom using some CSS code?
For the footer:
It's called a Sticky Footer. You can google it and find some (google css sticky footer). I like this one.
Although I am not perfectly sure, what your context is, in general you can do this by setting display:fixed for your footer and header id/class and using bottom:0 for the footer and top:0 for the header.
You probably want to include a high z-index for both so they are always displayed at the upper-most layer.
The problem with this solution is that the actual content of the page scrolls behind both items, and may be unreadable, so you have to tweak the top and bottom margin for both.
This is a quick and dirty information to get you started, as you did not provide more details in your question.
Use position: fixed
So a header might be:
.header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
}
And a footer:
.footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
}
That would be a 100px high header and a 50px high footer at the bottom. Note that position: fixed does not work in IE6 by default