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).
Related
I was wondering if anyone knew of a way to inject CSS into the head of a website so that it is inline.
I have my CSS file bundled up and minified as below
BundleTable.Bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/css/stylesheet.css"
));
I then add it to my master template like below
#Styles.Render("~/bundles/css")
Which then links out to a CSS file. But what i would like to do is render it inline within the header so i can reduce my initial load times and help eliminate render blocking CSS.
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;
}
If I'm writing an ASCX control, and that control has markup that requires CSS, and that CSS will only be used by the control itself, is there an elegant way (besides just sticking it in the ASCX file itself) to include the .css file with it?
Ideally, I'd have control.ascx, control.ascx.cs, control.js, and control.css all as a little "package".
It brings up one problem and one concern so far:
Problem: Since the control is in a subdirectory, I don't want to use a tag hardcoded with the knoweldge that the css is in a subfolder. I'd like to write it so that it's relative to the control code (ie: same folder) but still be found at runtime.
Concern: If I did this for ten controls, it's ten more server hits I suppose. Maybe ScriptManager or the RadScriptManager or RadStyleSheet manager will magically aggregate them, but its not a showstopper for me either way.
Any ideas on how to solve the relative-path issue?
To get the correct path of your stylesheet relative to the page, call the ResolveClientUrl method of your user control, passing it the path of the stylesheet relative to the control:
HtmlLink link = new HtmlLink();
link.Href = this.ResolveClientUrl("control.css"); // same directory as the control
link.Attributes["type"] = "text/css";
link.Attributes["rel"] = "stylesheet";
this.Page.Header.Controls.Add(link);
Although each stylesheet will result in a separate request, you can mitigate the issue by enabling content expiration for them.
My issue is that I have a designer that will create a custom aspx page bu without any .net controls. I need a way of adding the controls dynamically. So far the only types of controls will be textboxes and a button, but there are 30 variations of what the textboxes can be (name, phone #, email, etc). Also the textboxes may or may not need to be required. Once the textboxes are added the form will be submitted to a db.
My first thought was to have the designer place something like [name] and then replace that with a user control that has a name textbox and a required field validator. In order to determine if the validator should be enabled I was thinking that the place holder could look like this, [name;val] or [name;noval]. I could either do replace the place holders in code dynamically or set up a tool that the user pastes their html into a textbox and clicks a button which then spits out the necessary code to create the aspx page.
I'm sure there must be a better way to do this but its a fairly unique problem so I haven't been able to find any alternatives. Does anyone have any ideas?
Thanks,
Kirk
IF your designer gives you html pages, just create a new website. copy and pages all the HTML pages with the Image folders and everything to your project. then for every HTML page create an aspx page, (with the same name) copy and pages the html's tags which are between to the aspx page's and for the body copy and paste HTML page's tags which are between into the of the aspx page.
Now you have your aspx page, exactly the same as html page.
Sounds like an attempt to over-engineer a solution to what should be a non-issue.
As #Alessandro mentioned in a comment above, why can't the designer provide you with pages that have the control markup? As it stands right now, the designer isn't providing you with "a custom aspx" so much as "a custom html page." If the designer is promising ASPX but delivering only HTML, that's a misinterpretation somewhere in the business requirements.
However, even if the designer is rightfully providing only HTML, there shouldn't be a problem with that. At worst, you can set each element you need on the server to runat="server" to access them on the server-side. Or, probably better, would be to simply replace them with the ASPX control markup for the relevant controls.
Write a simple parser that will recognize the [...] tags and replace them with corresponding controls. Its pretty easy to do and i've often done this... the tag i use is usually $$(..); though, but that doesn't matter as long as your parser knows your tags.
Such a parser will consist of a simple state-machine that can be in two states; text-mode or tag-mode. Loop through the whole page-text, char for char. As long as you're in text-mode you keep appending each char into a temporary buffer. As soon as you get into tag-mode you create a LiteralControl with the content of the temporary buffer and add it to the bottom of your Control-tree, and emtpy the buffer.
Now, you still keep adding each char into the buffer, but when you hit text-mode again, you analyze the content of the buffer and create the correct control - could be a simple switch case statement. Add the control to the bottom of your control tree and keep looping through the rest of the chars unto you read the end and keep switching back and forth between text-mode and tag-mode adding LiteralControls and concrete controls.
Simple example of such a parser... written in notepad in 4 minutes, but you should get the idea.
foreach (var c in text)
{
buffer.Append(c);
if (c== '[' && mode == Text)
{
mode = Tag;
Controls.Add(new LiteralControl(buffer));
buffer.Clear();
}
if (c == ']' && mode == Tag)
{
mode = Text;
switch (buffer)
{
case "[name]": Controls.Add(new NameControl());
... the rest of possible tags
}
buffer.Clear();
}
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.