I have found some info on container use in Several containers at one page and Twitter Bootstrap Containers, but was left wanting a bit more input.
From Twitter Bootstrap's own example we see multiple container divs on the same page. But what about ASP.Net MasterPages and UserControls.
Should a single container be used on the Master, therefore enclosing all Content areas in a single top-level container (and then the Content pages would be comprised of row divs)? Or should the container div be pushed down to the Content page?
And taking this one step further, what about a rather complicated UserControl (.ascx) that is comprised of several row divs; should the ascx markup have its own container, or start with a row div assuming the containing page has an enclosing container?
Finally, more generally, does anyone have a rule-of-thumb regarding when to use a new container div?
I put the container div in my master page since all my pages will be using the row/span's in the child pages. In the unlikely event that I want my child page to not use the container, I simply close the div tags...
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
</div> <!-- ending the container -->
<!-- whatever -->
<div> <!-- the master page ends the container div, so we'll add this instead -->
</asp:Content>
A few helpful hints with bootstrap and asp.net...
Radio buttons and checkboxes.
The text appears underneath the radio/checkbox. Fix this by nesting your asp.net radio button list control or similar control inside a div with the radio css class or checkbox css class, and setting the RepeatLayout to flow.
<div class="radio">
<asp:RadioButtonList ID="rblFleettype" runat="server" RepeatLayout="Flow">
<asp:ListItem Selected="True">Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
</asp:RadioButtonList>
</div>
Alerts for error messages.
A lot of asp.net controls can be converted to templates to expose the error literals/labels, then you can apply CssClass="alert alert-error" to the error label. But if you do this it will show the red error boundaries even when there is no error yet. To fix that you can use the PreRender event for the literal/label to check the Text property and see if it's empty, and then set the Visibility property accordingly.
Related
I have inherited an .ascx control that consists of an asp:repeater construct containing a HeaderTemplate, an ItemTemplate and an empty FooterTemplate.
Both the header and the item templates are linked to a data source.
My question is simply this, I want to have a vertical slider applied to the ItemTemplate such that I can scroll up and down the items contained within whilst the HeaderTemplate remains static.
I have tried using an asp:Panel within the ItemTemplate but this doesn't render the row within the template.
I've resorted to encapsulating the whole of the asp:Repeater within an asp:Panel that specifies a vertical scrollbar. This works but scrolls the header out of view if the number of rows in the ItemTemplate is large.
If anyone can help and suggest a way forward I would be most grateful.
It can be done in a simple manner with some CSS tricks e.g.
Repeater Item Template Markup
<HeaderTemplate>
<div class="template">
</HeaderTemplate>
<ItemTemplate>
Your Stuff
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
CSS Defined for "template"
.template {
height: 200px;
overflow-y: scroll;
}
Hope this will help !!
Is there a way to REMOVE a DIV of the master page? not hide, there are some hyperlinks in the div, so I want to remove them from the code as well. thanks
By using HTML DOM you can actually remove any element you want. You need to use JavaScript or jQuery to achieve this.
var div = document.getElementById("task_row_" + taskId);
div.parentNode.removeChild(div);
Reference: Remove DIV tag using Javascript or Jquery
You could do the following:
<div id="random_name" runat="server" visible="false">
content
</div>
That will allow you to hide the div, but also from the .net show & hide it as well using.
random_name.visible = true
The use of Visible, doesn't just hide it from the view but show it in the code, it completely hides it, not view able by the client at all.
For changing content of master page from child page check out my answer from:
Disable Hyperlink of Master page from content page
I would like to add div's and text to a specific DIV with ASP.NET, i have only found code which allowed controls to be added to the body but not to a specific Div.
I'm assuming you want to add controls and text to the div element server-side. If so, you can simply add runat and id attributes to the div and it will be available to you on the server.
For example, if you have a div on your page declared like this:
<div id="MyDiv" runat="server"></div>
You can add text, html content or other controls to it using the following:
MyDiv.InnerText = "some inner text"; // adding text
MyDiv.InnerHtml = "<div>inner html</div>"; // adding html
MyDiv.Controls.Add(new LiteralControl("a literal control")); // adding a control
Change the outer div to an <asp:Panel control. A Panel renders to html as a normal div, and will make it easy to add items from server code.
i have a filter panel with 5-6 combo boxes ajax control tool kit..
i want this filter panel to be visible false by default.. and toggle it(show/hide) on client click using java script
however when i have my filter panel as visible = false runat=server java script does not get the object
and if i do code behind.. filterpanel.attributes.add("style",display:none)
filterpanel.attributes.add("style",visibilty:hidden)
the combo box throws a runtime error..
i've searched on the net which says.. combo box is difficult to render inside a panel.. whose default property is initially false!
The problem is that the <select> elements have to be rendered (but not necessarily visible) in order to reliably access their dimension properties.
So display: none; won't work because the elements are not rendered, and visibility: hidden; will partially work because the elements are rendered, so space is allocated for them on the page, but hidden, so that space will remain empty.
A third solution is to render the container as usual, but make it absolutely positioned outside of the browser viewport:
filterPanel.Attributes.Add("style",
"position: fixed; left: -10000px; top: -10000px;");
That way, the panel and its contents won't be visible, but the size of the <select> elements will be properly computed.
On the client side, the formula to show the panel becomes:
document.getElementById("filterPanelClientID").style.position = "static";
And to hide it again:
document.getElementById("filterPanelClientID").style.position = "fixed";
You can test a jQuery-based implementation here.
The issue is that if you set Visible="false" on a server control, it won't render any of the HTML elements, including the combo boxes. Hiding the panel using the following is AJAX friendly:
<asp:Panel id="p" runat="server" style="display:none">
</asp:Panel>
Which will render a DIV and all your drop downs, but hide them from view, allowing you to toggle the div's visibility.
Don't apply the "display: none" to the panel, only "visibility: hidden":
filterpanel.Attributes.Add("style", "visibilty: hidden");
This will hide your panel (the <div> I suppose) but reserve the required space (and therefore will allow the dimension-related properties of the corresponding DOM element to have the right values).
Of course you'll see an empty spot but you could probably resolve this issue by playing with the styles of an element (maybe by nesting the panel inside another element and by applying styles to that element instead of doing that on the panel itself).
Hai ,
I am using an iframe for showing a page in my website. i want to hide that frame using a close button in the content page( the page which is showing in the frame)
How to do this? use jQuery
See this image
You can use a client side script to make the iframe invisible. Lets consider the IFrame is inside a div <div id="iFrameContainer"><iframe></iframe></div>. In such a case you can fire a javascript on click of the button and set something like document.getElementById("iFrameContainer").visible=false; This should work for you.
have your iframe in your div tag. Then execute the following statement for hiding or displaying respectively when button get onclick event.
document.getElementById('iframeid').style.display='none'; // hiding
document.getElementById('ifrmaeid').style.display='block'; // displaying
As iframe is html control it will pruduce an erroe while running it at the sever...
To make the iframe hide or show at particular condition ... we can use apply simple trick.. take a div element which will wrap the iframe element.. eg
<div id="vidPreview" runat="server" visible="false">
<iframe src="demo.aspx" width="400" height="200" frameborder="0" style= "background-color:Black;"></iframe>
</div>
When u want to make visible just make that div's visibility property=true
in above eg make...vidPreview=true whenever i want to display iframe..