I have a table set to width=100%, with 2 columns.
How do I make the first table data to take the size of a menu control (inside td1), then make td2 take the size of the remaining space.
If I set td2's width to 100%, my menu collapses/wraps-up.
Here is my code below:
<table border="1" width="100%">
<tr>
<td>
<asp:Menu ID="Menu" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem Text="ContactUs" Value="ContactUs"></asp:MenuItem>
<asp:MenuItem Text="About Us" Value="About Us"></asp:MenuItem>
</Items>
</asp:Menu>
</td>
<td>TD2</td>
</tr>
</table>
Try the following:
<div class="row">
<div class="col-md-4"> Your menu here</div>
<div class="col-md-8">Content here </div>
</div>
You will need bootstrap.
Related
I've got an AdRotator set up in the typical way (I think), with an xml file like so:
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>Images\Space3.jpg</ImageUrl>
<NavigateUrl>https://www.amazon.com</NavigateUrl>
</Ad>
<Ad>
<ImageUrl>Images\eatAtJoes.jpg</ImageUrl>
<NavigateUrl>https://www.gutenberg.org</NavigateUrl>
</Ad>
. . .
<Ad>
<ImageUrl>Images\thisSpace4Rent.png</ImageUrl>
<NavigateUrl>https://www.wikipedia.org</NavigateUrl>
</Ad>
</Advertisements>
...and am adding it to my html like so:
<div class="container">
<div class="row">
<div class="col">
<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/AdRotatorLeft.xml" />
</div>
. . .
I'm thinking this should keep the AdRotator images within that column, but they spill out over the whole page - into the middle column and the right column, also:
The images/ads should remain within the black rectangle. Why is the image/"ad" overflowing the div it's placed in, and how can I force it to remain within bounds?
UPDATE
I have the same exact problem when I change out the AdRotator for a Hyperlink:
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="https://www.amazon.com/Still- Casting-Shadows-Shared-History/dp/0595397247/">
<asp:image runat="server" ImageUrl="images/EatAtJoesCaptioned.png" /><br />
<asp:Label runat="server" Text="Some Text"></asp:Label>
</asp:HyperLink>
</div>
</div>
. . .
Please share more html wand try to what you try to acheive. But like what you made row > col > row is useless, based on what I see. Just staop by what you made first. Then to fix img width, you need to add classes like: mh-100 mw-100 or:
style="max-width:100%; max-height:100%;"
This way your image will respect your container.
So based on your last update, I would recommand that you try this:
<div class="container">
<div class="row">
<div class="col">
<div class="row mx-0">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="https://www.amazon.com/Still- Casting-Shadows-Shared-History/dp/0595397247/">
<asp:image style="max-width:100%; max-height:100%;" runat="server" ImageUrl="images/EatAtJoesCaptioned.png" /><br />
<asp:Label runat="server" Text="Some Text"></asp:Label>
</asp:HyperLink>
</div>
</div>
...............
I am revamping my old asp.net web application and making it responsive. I used ace-master template which uses bootstrap. I have a gridview in my page. I changed my gridview code like this
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div>
<div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
<asp:GridView ID="dgTradename" runat="server" Width="100%" DataKeyNames="TradeNameId" CssClass="table table-striped table-bordered table-hover dataTable no-footer"
AutoGenerateColumns="False" OnRowDataBound="dgTradename_RowDataBound" AlternatingRowStyle-CssClass="even" RowStyle-CssClass="odd"
AllowPaging="True" OnPageIndexChanging="dgTradename_PageIndexChanging" OnRowCommand="dgTradename_RowCommand"
UseAccessibleHeader="true" GridLines="Both">
<Columns>
<asp:BoundField DataField="TradeNameNo" HeaderText="Trade Name No" ItemStyle-HorizontalAlign="Left">
<ItemStyle HorizontalAlign="Left"></ItemStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="Owner Name" ItemStyle-HorizontalAlign="Left">
<ItemTemplate><%#DataBinder.Eval(Container.DataItem, "dtoOwner.NameEn")%></ItemTemplate>
<ItemStyle HorizontalAlign="Left"></ItemStyle>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
<!-- PAGE CONTENT ENDS -->
</div>
</div>
But while rendering the code, html code for table is showing a css class 'GridView' and the required bootstrap css is not rendered
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div>
<div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
<div>
<table class="GridView" id="ctl00_PageBody_ctlSearchTradeName1_dgTradename" style="border-style:None;width:100%;border-collapse:collapse;" cellspacing="0" border="0">
<thead>
<tr class="Header">
<th scope="col">Trade Name No</th><th scope="col">Owner Name</th>
</tr>
</thead><tbody>
<tr class="Row">
<td align="left">114</td><td align="left">Honj</td>
</tr><tr class="AlternatingRow">
<td align="left">909</td><td align="left"> Internet Cafe Tr</td>
</tr><tr class="Pager">
<td colspan="6"><table border="0">
<tbody><tr>
<td><span class="editBox" style="display:inline-block;border-style:Solid;width:200px;">1</span></td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
</tr>
</tbody></table></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- PAGE CONTENT ENDS -->
</div>
</div>
I tried
Removing all other css class from the application
Removing all cache from the browser
Clean and rebuild the solution
Please don't consider this as a duplicate question as i have tried all answers from different stackoverflow questions
After spending a week, I found the issue.
I have some skins added in my solution. Even if it is not referred anywhere, its using from back. I removed that skins from my solution and now the bootstrap styles are rendered
I have a table, inside the table I have an asp:TextBox and an asp:Literal inside of the same data cell. Is there a way to place the Literal underneath the Textbox instead of beside the Textbox?
<td align="center">
<asp:TextBox ID="txtTons" CssClass="tonnage" runat="server"
OnChange="txtTons_TextChanged(this)"MaxLength="6"
Width="40" pattern="^\d{1,3}(?:\.\d{1,2})?$"></asp:TextBox>
<asp:Literal ID="litMaxTons" runat="server"></asp:Literal>
</td>
I solved this by placing both the asp:Textbox and asp:Literal inside of a div and then applying a style to each div.
<div style="position:relative; height:100%;">
<asp:TextBox ID="txtTons" CssClass="tonnage" runat="server"
OnChange="txtTons_TextChanged(this)"
MaxLength="6" Width="40" pattern="^\d{1,3}(?:\.\d{1,2})?$">
</asp:TextBox>
</div>
<div style="position:relative; bottom:0; color:red">
<asp:Literal ID="litMaxTons" runat="server"></asp:Literal>
</div>
I have an asp menu, I want to float it to left so the element after it can come to its right side (beside) it. I've set a CssClass for the Menu and added float: leftto it, but it is not working. I've even changed the float:left to float:right to see if it will work or not, but nothing worked.
Here is my code:
<form id="form1" runat="server">
<div class="wrapper">
<div class="navbar">
/*some code*/
</div>
<div class="middle">
<asp:Menu ID="MenuRec" runat="server" CssClass="recFriends">
<Items>
<asp:MenuItem Text="People you may know:" Selectable="false" Enabled="false"></asp:MenuItem>
<asp:MenuItem Text="<br/>" Selectable="false" Enabled="false"></asp:MenuItem>
</Items>
<Items>
<asp:MenuItem Text=" Item1" Selectable="false"></asp:MenuItem>
<asp:MenuItem Text=" Item2" Selectable="false"></asp:MenuItem>
<asp:MenuItem Text=" Item3" Selectable="false"></asp:MenuItem>
</Items>
</asp:Menu>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<!--here goes the customized content-->
</asp:ContentPlaceHolder>
</div>
<div class="footer">
</div>
</div>
</form>
</body>
My CSS:
.recFriends {
float:left;
padding-top:1em;
color:#003366;
font-weight:normal;
font-style:italic;
}
controls inside the ContentPlaceHolder (which will be in a page that inherits from this master page) must come to the right of the menu, but these are coming below it instead.
I've searched a lot, but nothing worked, I've even checked the solutions available here:
CssClass is not working for my asp menu - all code attached
asp Menu control not floating properly
Can anyone tell me how to solve this problem?
Thank you.
Wrap your menu in a div and close the div before the content place holder. Move your CSS class from the menu to the container div.
HTML
<div class="recFriends">
<asp:Menu ID="MenuRec" runat="server">
<Items>
<asp:MenuItem Text="People you may know:" Selectable="false" Enabled="false"></asp:MenuItem>
<asp:MenuItem Text="<br/>" Selectable="false" Enabled="false"></asp:MenuItem>
</Items>
<Items>
<asp:MenuItem Text=" Item1" Selectable="false"></asp:MenuItem>
<asp:MenuItem Text=" Item2" Selectable="false"></asp:MenuItem>
<asp:MenuItem Text=" Item3" Selectable="false"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<!--here goes the customized content-->
</asp:ContentPlaceHolder>
CSS
.recFriends {
float: left;
padding-top: 1em;
color: #003366;
font-weight: normal;
font-style: italic;
width: 20%;
padding-left: 2em;
}
I have a CssClass that I want to set to the StaticMenuItemStyle-CssClass attribute. In the design view the menu has all of the style attributes. But when I run it, none of the attributes are displaying. The background is white and text is blue.
This is the CssClass:
.StaticMenuStyle
{
font-family:Times New Roman;
color: White;
background-color: #006a54;
border: thin outset #A9A9A9;
font-weight: bold;
font-size: medium;
padding-top:5px;
padding-bottom:5px;
padding-left: 10px;
padding-right: 20px;
}
This is the menu that I want to attribute to the CssClass:
<table class="style1" cellpadding="0px" align="left">
<tr valign="top">
<td id="cell_menu" valign="top">
<asp:Panel ID="pnlMenu" runat="server" CssClass="panelMenu" ScrollBars="None" >
<asp:Menu ID="MainMenu" runat="server" StaticMenuItemStyle-CssClass="StaticMenuStyle">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Create Message"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Edit Profile"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Edit Group"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Message Report"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Admin"/>
</Items>
</asp:Menu>
</asp:Panel>
</td>
<td id="cell_content" class="panelContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</td>
</tr>
</table>
Please ignore the multiple About.aspx pages they are placeholders.
If I add all of the individual style elements to the it displays fine. But I would rather put them all in a CssClass.
I also tried using
but that does not work either.
What am I doing wrong?
Thanks,
OK. Now, it is picking up the CssClass and displaying the correct style. I guess I just needed to clean out the cache.