This question already has answers here:
Bootstrap Nav Disappears on Resize
(2 answers)
Closed 3 years ago.
I've created a default (thus I took what visual studio 2017 created when I created the project) master and sub pages website.
In the masterpage I put in a menu using a combination of divs and tables.
It all works well EXCEPT if I reduce the window size so that the width of the window is about 1280 px. Then suddenly the menu items are no longer shown and also nothing clickable on the menu bar.
One thing that stands out to me is: The menu still would have had plenty of space, but the menu items are still not shown. Only the black bar of the menu (background color is set to black for the table).
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse ">
<asp:Table ID="MenuTable" runat="server">
<asp:TableRow>
<asp:TableCell>
<asp:HyperLink runat="server" ID="Contacts" NavigateUrl="~/Forms/Contacts?#DynamicLinkReplace">Kontakte</asp:HyperLink>
</asp:TableCell>
<asp:TableCell>
<asp:HyperLink runat="server" ID="PingLink" NavigateUrl='javascript:void(window.open("~/forms/ping.aspx", "Ping to XXXXX", "width=640, height=480"));' >Ping</asp:HyperLink>
</asp:TableCell>
<asp:TableCell>
<asp:HyperLink runat="server" ID="RemoteLink" Target="_blank">Remote</asp:HyperLink>
</asp:TableCell>
<asp:TableCell>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:HyperLink runat="server" NavigateUrl='~/Forms/JournalT.aspx?#DynamicLinkReplace' id="JournalT">Journal T</asp:HyperLink>
</asp:TableCell>
<asp:TableCell>
<asp:HyperLink runat="server" NavigateUrl='~/Forms/JournalH.aspx?#DynamicLinkReplace' id="JournalH">Journal H</asp:HyperLink>
</asp:TableCell>
<asp:TableCell ID="MenuCellEnvelopeClearance">
<asp:HyperLink runat="server" NavigateUrl='~/Forms/Clearance.aspx?#DynamicLinkReplace' id="MenuEnvelopeClearance">Freigabe</asp:HyperLink>
</asp:TableCell>
<asp:TableCell>
<asp:HyperLink runat="server" ID="DetailsLink" NavigateUrl='~/Forms/Details.aspx?#DynamicLinkReplace'>Details</asp:HyperLink>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</div>
</div>
.CSS is not shown as it only is used for colouring and text size (font-size 14 px, line height 1.4285).
Now my question is twofold. 1.) What is the exact cause of such a phenomenon (so that I don't stumble upon it again) and 2.) What can I do to correct this behaviour?
In your Default Style sheet Consider this code
#media only screen and (min-width: 1000px) {
#Container{
style:block;
}
}
May be your any css or bootstrap contain the Code of min-width or max-width properties
In future check the style sheet
Related
I am using a custom pager for some data on a website that I am building. The pager works perfectly but the page numbers overlap each other. I am wondering how could I style them to make them look better.
Source Code
<ItemTemplate>
<asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
style="padding:8px; margin:2px; background:#ac9e94; border:solid 1px #666; font:8pt; color:#594334;"
CssClass='<%# Convert.ToBoolean(Eval("Enabled")) ? "page_enabled" : "page_disabled" %>'
OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'>
</asp:LinkButton>
</ItemTemplate>
I tried giving it a margin but that didn't work.
Add display: inline-block; to the style attribute. This will automatically increase the line height to accommodate the extra vertical padding.
<li><span>Test:</span>
<asp:Label style="float:right;padding-right:5px"
runat="server"
ID="lblTest">
</asp:Label></li>
I have a span and a label(I am aware its also rendered as span), somehow the static span's text is fine but the label's text falls down in the Li element....down to the bottom.
I have tried vertical align and text align, top:0, but no luck to have them in a straight line
Try this it works for me
<li>
<span>Test:</span>
<asp:Label style="padding-right:5px;display:inline;" runat="server" ID="lblTest"></asp:Label>
</li>
<li>
<span>Test:</span>
<asp:Label style="display:inline-block;" runat="server" ID="lblTest">hi</asp:Label>
</li>
Change your style to this:
style="display:inline-block;"
It displays the block as below
Working Fiddle
I am trying to have an icon display right after the textbox, left edge of image abutting right edge of textbox. I cant get it to happen. The image is always low and offset to the right. Im certain bootstrap is having something to do with this but Ive tried turning off almost all the css in dev tools but it still wont display right after the texbox.
Here is the code, I even wrapped it in a span hoping to force it in one line. The bootstrap classes start the textbox where I want it, I just simply want the icon directly next to the textbox.
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbCCNum" CssClass="col-md-2 control-label">Credit Card No.</asp:Label>
<div class="col-md-10">
<span class="imageinline">
<asp:TextBox runat="server" ID="tbCCNum" CssClass="form-control" Width="300" MaxLength="20" ClientIDMode="Static" /><asp:Image ID="ccImage" runat="server" ClientIDMode="Static" ImageUrl="~/Images/CC Icons/amex_small.png"/></span>
</div>
</div>
Here is the css
span.imageinline img {
display: inline !important;
margin-left: 2px;
}
In order for the controls to display horizontally in bootstrap, the form-inline class from bootstrap must be used, without any additional css of your own, as shown below
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbCCNum" CssClass="col-md-2 control-label">Credit Card No.</asp:Label>
**<div class="form-inline">**
<div class="col-md-10">
<asp:TextBox runat="server" ID="tbCCNum" CssClass="form-control"
Width="300" MaxLength="20" ClientIDMode="Static" TabIndex="8"/>
<asp:Image ID="ccImage" runat="server" ClientIDMode="Static"
ImageUrl="~/Images/CC Icons/amex_small.png"/>
</div>
</div>
</div>
I have a asp.net table, and I am trying to format the text so it is positioned central in the tablecell tag using CSS however I am having problems getting the text to format at all below is my table code and CSS code:
Table:
<nav>
<ul style ="tr" id="menu">
<asp:Table text-align ="center" runat ="server" CssClass="navbar">
<asp:TableRow runat ="server">
<asp:TableCell>
<li style = text-align ="center">Shipping</li>
</asp:TableCell>
<asp:TableCell >
<li>Rail & Stocks</li>
</asp:TableCell>
<asp:TableCell >
<li>Manning Records</li>
</asp:TableCell>
<asp:TableCell>
<li>Update Tables</li>
</asp:TableCell>
<asp:TableCell>
<li>Reports</li>
</asp:TableCell>
</asp:TableRow >
<asp:TableRow runat="server">
<asp:TableCell>
<li>Quality Problems</li>
</asp:TableCell>
<asp:TableCell>
<li>Working Time regulations</li>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ul>
</nav>
CSS:
.navbar
{
text-align: center;
}
Well for starters, part of your styling code is wrong, and as such will throw off your CSS styling. For example, this should be:
<li style="text-align:center">
However, as you are defining this in the CSS file, there should be no need (unless you have li tags defined elsewhere in your CSS).
Plus you are also trying to set the style of the ASP table within the markup of the control, you cannot do this to my knowledge.
It should be something along the lines of
<asp:Table ID="myTable" runat="server" CssClass="navbar">
I don't know the rendered width of DIV or any of the buttons. How do I change the markup such that the buttons are rendered with a uniform (or as close as can be) distance between each of them?
EDIT: Also, the buttons should consume the full width of the DIV.
<div>
<asp:Button ID="Button1" runat="server" Text="Action1" />
<!-- space between rendered buttons -->
<asp:Button ID="Button2" runat="server" Text="Action2" />
<!-- space between rendered buttons -->
<asp:Button ID="Button3" runat="server" Text="Action3" />
<!-- space between rendered buttons -->
<asp:Button ID="Button4" runat="server" Text="Action4" />
</div>
I am thinking this can't be done without a table, JavaScript or the use of at least some (relative) widths (if you can set percentages, it's easy.).
Or maybe putting each button into a div with display: table-cell, but I find that sick. Then rather be honest and use a table.
Feel free to prove me wrong, I'd be interested in alternative approaches myself.