Increase the width of TabContainer header - c#

I have a vertical TabContainer, but I can't fix the width of the TabPanel (it will increase a little, but not to the full width of the text). Text is hidden behind the ContentTemplate. For example:
Here's the markup:
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Visible="false" UseVerticalStripPlacement="true">
<asp:TabPanel ID="TabPanel2" runat="server" >
<HeaderTemplate>
<div style="width: 200px">General Examination </div>
</HeaderTemplate>
<ContentTemplate> </ContentTemplate>
</asp:TabPanel>
How can I fix the width of the tabs to that they are all same? The second tab, "General Examination", is not fully visible.

You need to add some CSS for the tab headers. The style that applies to that element of the AJAX Control Toolkit TabContainer is named .ajax__tab_header_verticalleft. Something like this should work:
.ajax__tab_header_verticalleft
{
width: 200px;
}
You might be able to dial back a bit from 200px, but that should work for you.

Hope this may help anyone else facing the same problem.
provide VerticalStripWidth="150px" in asp:TabContainer

Related

Radio button not visible in ASP.NET page

ASP.NET radio button is not visible in my page. I am using it inside ASP.NET ListView. I tried putting the radio button inside ASP.NET update panel content template as well. Please tell me what has gone wrong?
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:ListView ID="FraudCheckList_listView" runat="server">
<ItemTemplate>
<p class="fraud-step-title"><%#Eval("question")%></p>
<div class="row">
<asp:RadioButton
runat="server"
class="radio-inline col"
GroupName="govt"
Text="Low Risk"
></asp:RadioButton>
<asp:RadioButton
runat="server"
GroupName='govt'
Text="Medium Risk"
></asp:RadioButton>
<asp:RadioButton
runat="server"
GroupName='govt'
Text="High Risk"
></asp:RadioButton>
</div>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
Since you haven't shared how your code looks like, i am just assuming certain things. Just see if you have done this or not.
void Button_Click(object sender, System.EventArgs e){RadioButton.Visible=false;}
If incase its true or something your radiobutton will not be visible. In your case it must be hidden. So, make the variable of visible as **false ** So you can just change your code to this and try it out.
This you have to do it in your main code. not in your html code.
Thank You!

How to get panels/classes side by side in ASP.NET?

This is the problem I am having:
How my page looks on firefox
and How my page looks on chrome
What I want to do is get reserve form and data source forms side by side. I have already set a class using the fieldset method but can't figure out what to use to have it side by side.
Using this for data sources form
.tables
{
width:372px;
border-color:Black;
margin-left:150px;
height:500px;
}
and using this for Reserve Form
.mreg
{
width:372px;
border-color:Black;
margin-left:150px;
height:500px;
}
Just want two get the two forms side by side.
Edit -
Asp.net coding for Reserve Form:
<asp:Label ID="lblerrormsg" runat="server" Text="Error Message" Visible="False"></asp:Label>
<fieldset class="mreg">
<legend>Reserve </legend>
<asp:Label ID="Label2" runat="server" Text="Reserve ID" Font-Bold=true></asp:Label>
<br />
<asp:TextBox ID="txtRID" runat="server" Height="18px" Width="213px"></asp:TextBox>
<%--<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtLID" ErrorMessage="Loan ID Required"></asp:RequiredFieldValidator>--%>
<br />
<br />
<br />
</fieldset>
Coding for data source form:
fieldset class="tables">
<legend>Data Sources </legend>
<asp:Label ID="Label6" runat="server" Text="Reservation Table" Font-Bold=true></asp:Label>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
AutoGenerateDeleteButton="True"
DataKeyNames="Reservation_ID" DataSourceID="SqlDataSource1" BorderStyle="Dotted">
</asp:SqlDataSource>
</fieldset>
</asp:Content>
Is there anything wrong with the code?
You should give float:left to float to the left of screen and get side by side. Also it is not a good practice to give width as px as screen sizes vary.
.tables
{
width:48%;
border-color:Black;
float:left;
display:block;
height:500px;
}
.mreg
{
width:48%;
border-color:Black;
float:left;
display:block
height:500px;
}
You have multiple css options that you could use. As one:
float:left;
...will allow the divs to effectively "float" to the left side of their container, which will solve your problem. However, floats are problematic for a number of reasons, and there are often better options. For example, you can consider taking advantage of the "display" css property, such as:
display: inline-block;
This would also display your divs in a horizontal fashion, and tends to behave more consistently and with fewer problems. There are more options for the "display" property, though, which is worth looking into -- a good overview of some of the options can be found here:
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Table border lines showing over panels ASP NET

I'm currently trying to figure out what the hell is happening, when I pop up a panel(date picker) when clicking a textbox, I get the table borders overlapping on the panel.
I'm pretty new to ASP NET / c# etc but from what I can see there is no 'show on top' or 'force top' option within the panel properties.
Thank you very much in advanced, pic of the issue and code for that section below as well.
EDIT: it also only seems to be the 'dates' that have the lines, as you can see Mon / tues and the month picker don't seem to be affected.
I've now set EVERY style to z-index: -1; other than the panel which is z-index 99999 but still not working :(
Issue still happening but using the following code now:
Head
<style type="text/css">
#txtresumedate_PopupControlExtender
{
z-index:99999;
}
Also tried and forced the cssstyle onto the panel:
<style type="text/css">
.panel
{
z-index:99999;
}
Body:
`<tr>
<td class="style9">
Likely resumption date?</td>
<td class="style12">
<asp:TextBox ID="txtresumedate" runat="server" Width="100%"></asp:TextBox>
<ajax:PopupControlExtender ID="txtresumedate_PopupControlExtender"
runat="server" DynamicServicePath="" Enabled="True" ExtenderControlID=""
PopupControlID="Panel1" Position="Bottom" TargetControlID="txtresumedate">
</ajax:PopupControlExtender>
<asp:Panel ID="Panel1" runat="server" Width="400px"
BorderStyle="Double" >
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server"
onselectionchanged="Calendar1_SelectionChanged" Width="200px">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</td>
</tr>`
The following should solve you problem:
#Panel1 {
background-color:#ffffff;
z-index:9999;
}
Try this - use z-index
<style type="text/css" />
#txtresumedate_PopupControlExtender
{
z-index:99999; // make sure this should be greater then table's z-index
}
</style>

set read only property to the ajax tab panel in asp.net

I have to set ajax tab panel as in read only property as so its controls also must be have read only property. How can i do that.
You can place the ajax tab panel inside a panel or div and you can disable that panel...
<asp:Panel ID="PnlContact" runat="server">
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" >
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Contacts">
<ContentTemplate>
<asp:Panel ID="InnerPanel" runat="server">
</asp:Panel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</asp:Panel>
Here you can make the Enabled property of TabPanel1 from code behind..
TabPanel1.Enabled= false;
Are you looking anything like this .
http://codeverge.com/asp.net.ajax_control_toolkit/how-to-enable-or-disable-asp.net/21378

How to use the telerik window to open a page with a constant panel at the bottom?

I have the following case :
I use RadWindow , to open a specific page (which) exist in my solution.
Now i want to put a panel with set of buttons in the bottom of this window (constant panel) seperate from the page.
but i don't know how to do this.
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server" ShowContentDuringLoad="false" Width="400px"
Height="400px" Title="Telerik RadWindow" Behaviors="Default" EnableShadow="true" KeepInScreenBounds="true" Modal="true" VisibleStatusbar="true">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<script type="text/javascript">
//<![CDATA[
function openRadWin() {
radopen("About.aspx", "RadWindow1");
}
function openPopUp() {
window.open("About.aspx", "WindowPopup", "width=400px, height=400px, resizable");
}
//]]>
</script>
You are using the ContentTemplate it seems, not an external page. Nevertheless, simple CSS with position: fixed (or absolute + a div wrapper with position: relative) and bottom: 0px for the wrapper of the buttons should get the job done, be it in a RadWindow or directly in the browser. There are many ways to position elements like that.
Other options are using richer controls like RadNotification (see this demo) or RadSplitter to put your static content in its bottom pane (see here and here).

Categories

Resources