I have a main menu in which each menu category drops down. It reads the drop down data from a database and there are times when a particular menu option will contain nothing when it is dropped down. I therefore wish to remove that menu option if the drop down list is empty. Here is my code..
<li><a style="color:#fff";">
<asp:DropDownList ID="ddl1" runat="server" style="font-weight: bold; color:#fff;background:#444444; border:0; text-indent: 5%; text-align-last:center; z-index:-1;" class="fixDDLCategorySize" Height="29px" AutoPostBack="True" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" >
</asp:DropDownList></a>
</li>
<li><a style="color:#fff";">
<asp:DropDownList ID="ddl2" runat="server" style="font-weight: bold; color:#fff;background:#444444; border:0; text-indent: 5%; text-align-last:center; z-index:-1;" class="fixDDLCategorySize" Height="29px" AutoPostBack="True" OnSelectedIndexChanged="ddl2_SelectedIndexChanged" >
</asp:DropDownList></a>
</li>
...ETC
In VB, when a menu option is empty I try ddl1.visible=false but it still leaves a block on the screen which the css is causing. I therefore tried this..
<asp:Panel ID="pnl1" runat="server" Visible="true">
<li><a style="color:#fff";">
<asp:DropDownList ID="ddl1" runat="server" style="font-weight: bold; color:#fff;background:#444444; border:0; text-indent: 5%; text-align-last:center; z-index:-1;" class="fixDDLCategorySize" Height="29px" AutoPostBack="True" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" >
</asp:DropDownList></a>
</li>
</asp:Panel>
and then used pnl1.visible=false to remove an empty menu category but all the other menu options then lose all their css.
Is there a way to do this?
Related
I have problem adding spaces between CheckBoxes and text next to them. I want to have them intended a little bit, not next to each other without some space.
▓car▓wash▓next and have it like ▓ car ▓ wash ▓ next
CheckBoxes aren't fixed at size, they are gathered from database.
I have CheckBoxList like:
<asp:CheckBoxList ID="chBoxListManufacturer" runat="server" BackColor="LightBlue" BorderColor="Red" CellPadding="5" CssClas="mycheckbox"
TextAlign="Right" RepeatDirection="Horizontal" RepeatLayout="Flow" OnSelectedIndexChanged="BoxListManufacturer_OnSelectedIndexChanged" AutoPostBack="True" />
Css:.mycheckbox {margin-right: 15px;}
I was reading docs, but nothing works.
you can try with css class:
your checkboxlist here.
<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="test">
<asp:ListItem Text="Yes" Value="Yes" Selected="True"></asp:ListItem>
<asp:ListItem Text="No" Value="No"></asp:ListItem>
</asp:CheckBoxList>
css here.
.test td
{
border:1px solid red;
margin-right:10px;
padding-right:20px;
}
output.
Maybe a trivial answer: put a after each checkbox, this will allow you some space between the control and the following label
I have created a user control that generates list item , how can i make the whole field clickable rather than just a text ( now the hyperlink is wrapped around the merchants name) , wrapping the list in a hyperlink will mess up the entire flow of the table and ive already run out of ideas.
<li>
<div ID="divmech" class = "hint--top" data-hint="" runat="server">
<asp:HyperLink ID="hypTrendingMerchant" CssClass="merchantName-width" runat="server" >
<asp:Label ID="lblMerchantName" runat="server" />
</asp:HyperLink>
<asp:Label ID ="lblMerchantDifference" class="gecko-right gecko-trend-arrow pad gecko-col-secondary" font-bold="true" runat="server" />
</div>
</li>
Wrap your div in the link, and make sure it takes up the whole space of your li:
<li>
<asp:HyperLink ID="hypTrendingMerchant" CssClass="merchantName-width" runat="server" >
<div ID="divmech" class = "hint--top" data-hint="" runat="server">
<asp:Label ID="lblMerchantName" runat="server" />
<asp:Label ID ="lblMerchantDifference" class="gecko-right gecko-trend-arrow pad gecko-col-secondary" font-bold="true" runat="server" />
</div>
</asp:HyperLink>
</li>
What you actually wind up doing here will depend on your layout, but something like this.
<li>
<asp:HyperLink ID="hypTrendingMerchant" CssClass="merchantName-width" runat="server" >
<span ID="divmech" class = "hint--top" data-hint="" runat="server">
<asp:Label ID="lblMerchantName" runat="server" />
<asp:Label ID ="lblMerchantDifference" class="gecko-right gecko-trend-arrow pad gecko-col-secondary" font-bold="true" runat="server" />
</span>
</asp:HyperLink>
</li>
don't put block elements like DIV inside inline elements like A. instead wrap all li content in the link.
then from CSS, make A as block, and if you need the span #divmech as block element, then do that from CSS too. Don't forget to set LI padding to 0 so A element would take most of the space
li{
display:block;
padding:0;
}
a.merchantName-width{
display:block;
}
#divmech{
display:block;
}
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.modalPopup
{
background-color: #ddffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
margin-top: 60px;
padding: 2px;
width: 400px;
font-size: 10pt;
}
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="Button3"
OkControlID="btnOk" TargetControlID="LinkButtonDummy" PopupControlID="PanelPopUp"
BackgroundCssClass="modalBackground" />
<asp:Panel ID="PanelPopUp" runat="server" CssClass="modalPopup" Style="display: none">
<div>
<asp:Label ID="lblMsg" runat="server" />
<asp:Button ID="Button2" runat="server" Text="Add New Organisation" OnClick="Button2_Click" />
<asp:Button ID="Button3" runat="server" Text="Cancel" />
</div>
</asp:Panel>
I have also included the AJAX reference and a ScriptManager on the master page.
I have to add an enhancement to an existing page and I'm quite new with ASP.NET, the page in question is a 'content page' and is linked to a master page (containing the scriptmanager).
This code all looks completely fine and I have been reading on this for over three hours now but to no avail - my modal doesn't 'pop-up' and grey the background out, it simply appears where I have placed it on the page (right at the top, or right at the bottom e.t.c.) as if I was just showing/hiding a div.
Can anyone help, I'm going crazy?
What other routes can I go down for adding a confirmation box on a page that takes a string built in the code-behind and also runs code-behind functions on OK/Cancel?
Keep your css as it it and try this code :
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:ModalPopupExtender ID="MyPopup" runat="server" CancelControlID="Button3" OkControlID="btnOk" PopupControlID="PanelPopUp" BackgroundCssClass="modalBackground" DynamicServicePath="" Enabled="True"
TargetControlID="HiddenField1"></asp:ModalPopupExtender>
and on Button2_Click event add
MyPopup.Show();
I have two ASP.NET 4.0 Menu controls for tabs and sub-tabs & one tree control for left side navigation on a page.
I'm using the selected CSS class to ensure that the selected tab/sub-tab/navigation is in different color.
Whenever i select one of these control's item, selected CSS applied on it but parent selection state lose.
How can I ensure that the top level menu item has a CSS class of selected when viewing a sub page?
Main Menu:
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
<asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal"
MaximumDynamicDisplayLevels="0" RenderingMode="Table"
DataSourceID="SiteMapDataSource1"
ViewStateMode="Enabled">
<StaticMenuStyle CssClass="menu"/>
<StaticMenuItemStyle CssClass="menuItem"/>
<StaticSelectedStyle CssClass="menuSelectedItem"/>
</asp:Menu>
Sub Menu:
<asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" StartingNodeOffset="1"/>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
MaximumDynamicDisplayLevels="0" RenderingMode="Table"
DataSourceID="SiteMapDataSource2"
ViewStateMode="Enabled">
<StaticMenuStyle CssClass="menu"/>
<StaticMenuItemStyle CssClass="menuItem"/>
<StaticSelectedStyle CssClass="menuSelectedItem"/>
</asp:Menu>
Left Navigation:
<asp:SiteMapDataSource ID="SiteMapDataSource3" runat="server" ShowStartingNode="false"
StartingNodeOffset="2" />
<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="SiteMapDataSource3"
ExpandDepth="2" NodeIndent="0">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle ForeColor="#5555DD" />
<SelectedNodeStyle BackColor="GhostWhite"/>
<NodeStyle BackColor="LightSteelBlue"/>
</asp:TreeView>
CSS:
.menu
{
background-color: black;
font-size: 12px;
font-family: Arial;
font-weight: bold;
}
.menuItem td
{
height: 24px;
width: 120px;
background: url(Images/unselectedTab.jpg) no-repeat;
text-align: center;
vertical-align: middle;
}
.menuSelectedItem td
{
height: 24px;
width: 120px;
background: url(Images/selectedTab.jpg) no-repeat;
text-align:center;
vertical-align:middle;
}
Did not read your code but according to me if you want to preserve parent menu item selected then you will have to check in your code that it is not getting removed. In your scripts there may be some code like -
$(this).parent().removeClass("selected");
Comment this line if it is present and check whether it works or not. If there is no such thing then you will have to apply class as below -
$(this).parent().addClass("selected");
Both of the above code line, you will find inside the function which is called on click of a menu.
I want to show items in my gridview as a 5 across and a 5 down display - i already have the
query pulling only 25 records per a page but cant seem to make the gridview do what i want - any suggestions?
example------------------------------
record 1 : record 2 : record 3 : record 4 : record 5
record 6 : record 7 : record 8 : record 9 : record 10
etc ...........................................
My suggestion would be to switch to a ListView instead of a GridView. ListView is new in .Net 3.5, and has worked wonders for me for exactly the scenario you are talking about. Scott Guthrie has a good example of it on his blog.
Here's an example for a 3x4 grid of pictures from my personal website...
<ul id="thumbnails">
<asp:ListView runat="server" ID="PicturesListView" ItemPlaceholderID="PicturesListItemPlaceholder"
DataSourceID="PicturesDataSource">
<LayoutTemplate>
<li runat="server" id="PicturesListItemPlaceholder"></li>
</LayoutTemplate>
<ItemTemplate>
<li>
<a href='Photos/<%# Eval("WebImageId") %>.jpg' class="thickbox" rel="gallery-test"
title='<%# Eval("Caption") %>'>
<img src="Photos/<%# Eval("ThumbnailId") %>.jpg" alt='<%# Eval("Caption") %>' />
</a></li>
</ItemTemplate>
</asp:ListView>
</ul>
and my CSS to line things up is...
/* Picture Thumbnails */
#thumbnails ul
{
width: 800px;
list-style: none;
}
#thumbnails li
{
text-align: center;
display: inline;
width: 200px;
height: 130px;
float: left;
margin-bottom: 20px;
}