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;
}
Related
I have been converting HTML to PDF using the Syncfusion.HtmlConverter.HtmlToPdfConverter class, which produces great results as long as you use the Webkit rendering engine, but I have not been able to get it to properly honor page breaks. Syncfusion documents an older class, HtmlConverter, and suggests utilizing <p style="page-break-before: always;"> which requires you to set the AutoDetectPageBreak property to true.
The problem is that the newer class does not contain this property. Does anyone know the proper way to enforce page breaks using HtmlToPdfConverter?
As it turns out, the documentation is almost correct. If you pass <p style="page-break-before: always;"> as they suggest it will page break, but add a huge space after the break. However if you use:
<p style="page-break-before: always;"></p>
It honors the break properly (and automatically) without the need for setting any properties on the conversion object. This is as of version 14.2450.
I have a web app that has a form on just about every page. In order to make sure each form renders the same, as to make changes easier, I want to render all of my form controls in c# in a central place so if I need to add a class to the input or change something, I only have to do it once.
At the moment, I am just using a load of static classes like TextInputHelper, CheckboxInputHelper etc that use StringBuilder to build up the HTML and returns a string to my view.
For example, all of my forms controls are of the basic form:
<section>
<label class="label">Label Text</label>
<label class="input">
...Input Element...
</label>
</section>
What I would like to do is improve this situation as I still have a lot of duplication between the different helper classes, particularly for the wrappers to the form elements. My initial thoughts are to have a class called something like BaseFormControl that has a virtual Render method that has the outer wrapper for the control, then create other classes that implement this to do specific things like a TextFormControl that puts
<input type="text".....
inside the wrapper.
Am I on the right path for this, and/or is there a design pattern that is appropriate for what I want to do?
From my POV what I read is that you over complicating your server side just because of a CSS/HTML standardization that be easily solved from the client side.
If you still want to go for the server side approach the pattern that seems to apply to your approach is the Adapter(Wrapper) pattern meaning that you probably would want to create control wrapper clases to meet your needs for each control that renders a different html from what is offered by ASP.NET built-in controls.
If what you want to do instead is to format a group of controls then a UserControl is way much better approach.
Remember that ASP.NET was build with the spirit of trying to keep layers separated the View from the Code therefore any attempt to generate html from the server side has to be an exception and not a rule.
I am dynamically creating controls, one of which is a multiline textbox. I have seen links about how to do it when it is hard coded into my aspx page, however I can't do that since the control is dynamically generated. I would like to avoid having to modify my .css files if possible. If anyone has any ideas on how to do this, any advice would be great thanks!
In general "resize:none" (there are funs of "overflow:auto") is the solution, therefore the typical option is to include it in your .css textarea definition and use the relative class name (if needed) in your aspx code. If needed means that by adding "textarea { resize: none; ... }" to your .css files there is no need to use CssClass in your asp:TextBox.
If you insist to not change your .css files, then you have to add a new css rule by JavaScript code somewhere (i.e. header control) on the server or add a new global .css file and serve it within your html header from aspx (this is better because you avoid checking existing css rules).
I have a user control which when added to the markup via the Toolbox or manually typing
<myNameSpc:myCtrl ... I would like to spit out:
<myNameSpc:myCtrl>
<template></template>
</myNameSpc:myCtrl>
I remember doing this for windows workflows and it involved implementing something like a TypeConverter and WorkflowXmlSerializer so it maybe possible for user controls as well I'd guess ? the only thing is that I don't have time to research this matter now, so I was wondering if anyone would be kind enough to point me in the right direction so that I don't have to dig deep into the designer serialization of VS (which I remember was a big pain).
For your custom control, you can specify a ToolboxDataAttribute which defines the default html that will be generated when you drag a control onto the design service. E.g.:
[ToolboxData("<{0}:myCtrl runat="server"><template></template></{0}:myCtrl>")]
public class myCtrl : System.Web.UI.Control
{
}
For the manual generation you can create a Code Snippet. The best way to do that is find existing ASPX snippet and modify it to gen your control. I'm assuming you are using VS 2010.
I'm trying to inject some CSS that accompanies some other HTML into a C# managed WebBrowser control. I am trying to do this via the underlying MSHTML (DomDocument property) control, as this code is serving as a prototype of sorts for a full IE8 BHO.
The problem is, while I can inject HTML (via mydomdocument.body.insertAdjacentHTML) and Javascript (via mydomdocument.parentWindow.execScript), it is flat-out rejecting my CSS code.
If I compare the string containing the HTML I want to insert with the destination page source after injection, the MSHTML's source will literally contain everything except for the <style> element and its underlying source.
The CSS passes W3C validation for CSS 2.1. It doesn't do anything too tricky, with the exception that some background-image properties have the image directly embedded into the CSS (e.g. background-image: url("data:image/png;base64 ...), and commenting out those lines doesn't change the result.
More strangely (and I am not sure if this is relevant), was that I was having no problems with this last week. I came back to it this week and, after switching around some of the code that handles the to-be-injected HTML before actual injection, it no longer worked. Naturally I thought that one of my changes might somehow be the problem, but after commenting all that logic out and feeding it a straight string the HTML is still appearing unformatted.
At the moment I'm injecting into the <body> tag, though I've attempted to inject into <head> and that's met with similar results.
Thanks in advance for your help!
tom
Ended up solving this myself:
mshtml.HTMLDocument test = (mshtml.HTMLDocument)webBrowser1.Document.DomDocument;
//inject CSS
if (test.styleSheets.length < 31) { // createStyleSheet throws "Invalid Argument if >31 stylesheets on page
mshtml.IHTMLStyleSheet css = (mshtml.IHTMLStyleSheet)test.createStyleSheet("", 0);
css.cssText = myDataClass.returnInjectionCSS(); // String containing CSS to inject into the page
// CSS should now affect page
} else {
System.Console.WriteLine("Could not inject CSS due to styleSheets.length > 31");
return;
}
What I didn't realize is that createStyleSheet creates a pointer that is still 'live' in the document's DOM... therefore you don't need to append your created stylesheet back to its parent. I ended up figuring this out by studying dynamic CSS code for Javascript as the implementations are pretty much identical.