Develop Reference

Setting focus on textbox causes CSS overflow

I have a textbox that I set the focus to depending on some operations by the user. After do so the CSS for the page is thrown off; page shifts to the left. Below is the CSS involved:
width: 960px;
overflow:hidden;
margin-top: 20px;
background: transparent url(../images/pattern.png) repeat;
Any clues as to what is happening and how I could resolve this issue?

I have to do more investigation into why, but the following resolved my issue. Adding a meta tag http-equiv="X-UA-Compatible".
There was a similar issue discussed here as well
http://forums.asp.net/t/1485816.aspx?Scriptmanager+SetFocus+set+s+focus+but+I+can+t+type
Hope this helps anyone running into this issue. Additionally, the using the meta tag works no matter if you are utilizing the ScriptManager's SetFocus method or the Page/Control focus method.

inheritance/overwriting existing CSS rules from different external files

I got an existing project, which used to be without Bootstrap(3), but now I have to change that and keep the old css stuff.
My current CSS order:
var bundleCSS = new StyleBundle("~/Views/bundle/newBundle").Include(
"~/Views/Shared/normalize.css",
"~/Scripts/jquery.ui/jquery-ui-latest.custom.css",
"~/Scripts/jquery.jqGrid/ui.jqgrid.css",
"~/Scripts/sweetalert/sweet-alert.css",
"~/Content/bootstrap.css",
"~/Views/Shared/OldButNeededLayout.css",
"~/Content/custom.css"); //will be rendered in that order
The custom.css is used to fix all errors that come from adding bootstrap.css to the project.
The problem here is, that OldButNeededLayout.css has roundabout 3000 lines of css-code and by the way the current project is quite big.
So when overwriting bootstrap with that old css and than fixing the errors, which came by adding bootstrap, than I get an unpredictable results.(because I dont't know where it will change something)
What to do or how to solve integrating bootstrap css/js into (my) existing project(s) ?

This sounds like a messy way to integrate Bootstrap whilst trying to avoid making any changes to the OldButNeededLayout file...
In my experience, integrating Bootstrap into an existing project is quite an undertaking and requires extensive modification of your HTML (adding classes and modifying markup structures) as well as extensive modification of your existing CSS, in order to make it play nice with Bootstrap.
Your approach will make maintenance difficult and will also deliver a lot of unnecessary CSS code to the client.
I would suggest:
Remove the OldButNeededLayout css from your project and clear the
contents of custom so that the vast majority of css is from
Bootstrap.
Obviously, this will look nothing like your site should, so
Methodically fix each bit of layout or styling that needs to change,
in your custom css until you have a site which resembles your
pre-Bootstrap site. Use bits from OldButNeededLayout that are
necessary, but make sure each and every style property is necessary.
This is a lot of work, of course, but it will result in a project which is more maintainable, predictable and concise for the client.
I don't see it as a reasonable expectation that you can just throw Bootstrap onto a large project and not expect to make major changes to your existing HTML and CSS.

The following suggestion isn't ideal and there's certainly better ways of implementing what you need, but I've kept my suggestion in line with your requirement...
In your new custom.css file, you could try being more specific when declaring an element. So if in OldButNeededLayout.css you overrode Bootstrap's style such as:
.divclass .jumbotron h1 {
color: red;
}
You could be declare a higher level of specificity in your custom.css file to ensure it will override what you in OldButNeededLayout.css:
.parent .divclass .jumbotron h1 {
color: blue;
}

Adding a Textbox destroys Menu-Layout

I'm working on a little project with ASP and C#.
In my project I'm using a masterpage for the navigationbar on the top of my pages, looking like that:
The navigationbar contains some normal navigation-points and one to log out with float: right;
On all of my diffenrent pages this works excepted for one.
The only difference is, that on this special page I have some textbox-elements like this:
<asp:TextBox ID="tbTOP1sum" runat="server"></asp:TextBox>
As soon as I only enter one of this textboxes my navigationbar looks like that:
It doesn't matter what sort of element im adding, everything is okay, excepted with this textboxes.
I noticed that this only happens in Google-chrome, not with Firefox and not with Internet-Explorer or Edge. Another thing i found out is, that disabling and enabling the CSS-rule in Chrome-Page-Inspector fixes the problem.
I have no idea what to do...
Thanks in advance for your help!

I have the same issue sometimes. When you change it in the inspector go into your code and make the same change and save/build, go to the web browser and do a hard refresh with "ctrl+F5". If it still does not work, wrap your logout a link in a div and then call it in CSS. Set the position to relative, and then put the top: -55px;

It finally turned out, that adding display: inline; to the of the navigationbars <ul> is all to do.
Another way is to do it with table columns. One for the normal content and one for the logout.
Thanks for the other answers!

Can't change position of buttons in C# ASP.net

I use VS 2010 . I add button to webfrom that created, but I can't change his position.
I read in previous questions that I need to change the layout to absolute , but it didn't work. when I drag the button to the center it's back automatically to left-center..
you can see that in the picture:
how can I fix that?
Thank you!!
solution:
Tools -> Options, and set HTML Designer -> CSS Styling to "Change positioning to absolute.."

Changing the position to absolute seems more like a workaround which would introduce further problems after "solving" this one. Unless you really know what you're doing for styling, don't do that.
Centering an element on a webpage is really a matter for the CSS styling. Take a look at the markup (HTML) view and find where that button is. You can add a class to that button for the CSS styling:
<asp:Button runat="server" ID="Button1" CssClass="centeredButton" ...
Then in your site's CSS file (Site.css might be the standard in the ASP.NET template? I don't remember) you can apply the styling you're looking for. There's a lot you can do at that point. Not knowing how the rest of the page is laid out, I can only offer very random suggestions. Something like this for example:
.centeredButton {
display: block;
margin: auto;
}
That's one way to center that particular element. There are definitely more, depending on how the rest of the markup/layout is structured.

First of all i recommend not to use this drag options. Because what happens behind this whenever you drag a button or anything, will make you more confused. You can do it using div or table.

bootstrap menu is hiding main text

I'm going crazy with this. I got the twitter-bootstrap menu running in my c# code and it looks and works great. However, the menu is overwriting my text of the site I've built. It seems no matter what I do the body of the site appears under the menu.... I'm thinking it's a CSS issue because if I resize the page to mobile size the body is then placed under the menu.
I'm not even sure what code I should cut and paste...?
I've tried various or row, ... etc...
How do I get my body text to show below the menu vs. underneath it?
Thanks

I had this problem too, I had to do a padding in my _layout.cshtml. This solved it for me.
<body style="padding-top: 40px;">