Last post Jun 18, 2019 11:59 AM by Bluenose
May 09, 2019 11:06 AM|Bluenose|LINK
I have commented out the nav-bar in Microsoft's WebFormsIdentity template which holds over 10 CSS style sheets (plus a couple of my own). It is not possible to keep the nav-bar as part of my Web forms project. The nav-bar, which stretched right along the
top of each of its aspx pages, holds links called Application, Log-in, etc and, when it is present, it results in pushing the rest of the site content down 50px because that is how deep it is.
Consequently, now that it does not exist on my pages, there is a gap of 50px along the top and the date I have, for example, which should be about 20px from the top, is now about an inch from the top and the pages need to be 'pulled up'. I have gone through
the CSS files which I thought would allow me to close this 'gap' and found this which comes with the template: Site.css.
At the top of that Site.css stylesheet there is this (the commented out line at the top is Microsoft's own):
/* Move down content because we have a fixed navbar that is 50px tall */
I thought that by commenting out 'padding-top' it would close the 'gap', but it makes no difference and the 'gap' of about an inch deep remains. Is that because I have kept these lines in Site.master:
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
I am quite sure that I have to keep those lines in because the ID of MainContent allows the pages to function.
What might be the best way to solve this, please?
May 09, 2019 03:25 PM|bruce (sqlwork.com)|LINK
use the browser debug tools to find the CSS responsible.
May 13, 2019 09:26 AM|Bluenose|LINK
Thank you for your reply.
I have tried removing the body-content code I pasted above and it makes no difference: the space left by the removed nav-bar still remains and so my pages look too low down on screen. Yes, Inspect may be a good place to start. Since this project has 14 external
style sheets, one of which has almost 7,000 lines of code, which CSS attributes should I begin to look for in Inspect Element? Padding, margin, etc?
May 14, 2019 06:39 AM|Jenifer Jiang|LINK
According to your description, I'm sorry that I could not reprodcue your issue successfully.
I've built a webform default master page and have a test.
After I comment out the body css of Site.css and the class="container body-content" div,
you could see from the screenshot that there is no any gap around the test text( testing if have gap).
If possible, please provide more details like a simple demo code with your running screenshot,
this will be easier for us to help with you.
Jun 10, 2019 10:01 AM|Bluenose|LINK
Sorry for the delay in replying.
I will comment out the body css of Site.css and the class="container body-content" div, as you have done and see what the result is.
In terms of a simple demo code, I am simply trying to modify Microsoft's existing code. I don't think I can upload screenshots here, but will look around the Net and post a link.
Thanks again for your help.
Jun 10, 2019 11:22 AM|PatriceSc|LINK
Use F12 in your browser to inspect styles and see what happens. A common issue is to load a cached version of the CSS file (try Ctrl+F5)
Jun 18, 2019 11:59 AM|Bluenose|LINK
Many thanks for your code - that's done the trick.
I wasn't sure if I could get away with removing the asp:PlaceHolder, but the pages look much better now that they have been 'pulled up'.