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 am creating a treeview in asp.net and able to bind treeview perfectly.But my tree view is looks the following image which is as default layout of treeview control.
I am using the following code
$(document).ready(function () {
$("div[id=tvCategories] input[type=checkbox]").click(function () {
$(this).closest('table').next('div').find('input[type=checkbox]').attr('checked', this.checked);
$(this).parents('div').each(function (index) {
if ($(this).find('input[type=checkbox]:checkbox').length > 0) {
$(this).prev('table').find('input[type=checkbox]').attr('checked', true);
}
});
});
});
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TreeView ID="tvCategories" NodeIndent="25" OnTreeNodeDataBound="tvCategories_TreeNodeDataBound" Style="font-family: 'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 5px; margin-bottom: 5px; margin-left: 50px; color: Black; font-size: 12px"
runat="server" ShowCheckBoxes="All">
</asp:TreeView>
</ContentTemplate>
</asp:UpdatePanel>
But I want need the following layout. which I am not able to create this
Please help me to create this.Is Trieeview control is match for this layout or bind it by other way ?
What you are intending to do is not possible to elegantly do because of the default HTML that is rendered by the TreeView control (Table -> Div -> Table, Div etc).
You could however use a CSS control adaptor to change the way the default HTML is rendered (Ul -> Li -> Ul -> Li). The HTML that is rendered using this approach is nested and therefore can be targeted using CSS to attain the look you are seeking to achieve. You may have to rewrite some of your code and create a custom implementation.
See http://samples.asp.net/cssadapters/TreeView.aspx for code examples.
I hope that helps!
In my aspx page, I have a textarea:
<div style=" position: absolute; top: 45px; bottom: 5px;
left: 5px; right: 5px">
<textarea id="code" name="code" runat="server" wrap="off" style="clear: both; width:99%; height:99%" >
</textarea>
</div>
All I want is the Textarea auto display full the browser. But when I built the page, the text area just display small in the left browser screen.
Try to press F12, the Textarea tag is changed:
<textarea id="code" name="code" runat="server" wrap="off" style="display:block" > </textarea>
Really tired, I met this situation for many times. Sometimes, I add style= "clear:both" but in this situation, it cannot help.
The Textarea 's style is just contain: display:block
I copy my code to http://jsfiddle.net/REgjn/ ---> it display as the way I expected: the textarea is fill full the chrome browser. But it is not when I built it on the real browser.
Help!!!
Why is the TextArea tag changed???
I have modified your code. I hope it will work
<div style=" position: absolute; top: 45px; bottom: 5px;
left: 5px; right: 5px;width:99%; height:99%">
<textarea id="code" name="code" runat="server" wrap="off" style="clear: both; width:99%; height:99%" >
</textarea>
</div>
I am using a popup control with a link button inside that is used to close the popup. The problem is that the link button (or image button in the code below) is causing a full postback which is not intended. Can anyone help? below is the code.
<asp:PopupControlExtender ID="PopupControlLogin" BehaviorID="logpop" Position="Bottom"
TargetControlID="myLogin" PopupControlID="PanelLogin" runat="server">
</asp:PopupControlExtender>
<asp:Panel ID="PanelLogin" Style="position: absolute; display: none;" runat="server">
<div style="border: solid 1px #808080; border-width: 1px 0px;">
<div style="background: url(images/sprite.png) repeat-x 0px -200px;">
<asp:Label ID="Label2" runat="server" Style="font-weight: bold;" Text="Login" />
<asp:ImageButton ID="ImageButton1" Style="background: url(images/sprite.png) no-repeat 0px -300px;"
OnClientClick="$find('logpop').hide(); return false;" runat="server" />
</div>
<div style="background-color: #f2f2f2; width: 300px; height: 150px;">
My Content
</div>
</div>
</asp:Panel>
You are using it correctly, but I think there's an error in your jquery $find. Should be
$('#logpop').hide();
or
OnClientClick="$('#logpop').hide(); return false;"
I would change the button to a straight HTML link:
<img src="images/sprite.png" />
You can adjust the display as needed, but this should be what you need.
I want the arrow-collapsed image to be displyed before accordian headers and when accordian header is clicked and expanded, arrow-collapsed image should change to arrow-expanded image. What am I doing wrong below? Also, image paths are all correct. I have checked many times.
my accordian:-
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
css
Am I giving the CSS Class names incorrectly or what ????
#denis..its still not displaying the images..cant find the images in Firebug either
Firstly, I would suggest to take a look at Accordion sample page which lists all available properties along with their descriptions. You'll notice that the Accordion also exposes HeaderSelectedCssClass property - this is where you set a style for the collapsed state. So, you could re-write your markup like so:
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler"
HeaderSelectedCssClass="accordionHeader toggler-expanded"
ContentCssClass="accordionContent">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
And for CSS:
<style type="text/css">
.accordionHeader {
cursor: pointer;
margin-top: 10px;
margin-left: 20px;
}
.toggler {
background: url('../../images/arrow-collapsed.png') no-repeat left center transparent;
}
.toggler-expanded {
background: url('../../images/arrow-expanded.png') no-repeat left center transparent;
}
.accordionContent {
margin-top: 10px;
margin-left: 20px;
}
</style>
And please remove all those scripts.