I'm trying to hide the buttons that add color, see the picture. I've tried playing with the CSS and all I have managed to do is break the page and hide everything.
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HTMLEditor/HTMLEditor.aspx
Details: The following should resolve your issue.
Solution without Masterpage:
<style type="text/css">
#MainContent_ctl00_ctl01_FixedForeColor {display:none;}
#MainContent_ctl00_ctl01_FixedBackColor {display:none;}
</style>
Solution with Masterpage:
<style type="text/css">
#MainContent_Editor1_ctl01_FixedForeColor {display:none;}
#MainContent_Editor1_ctl01_FixedBackColor {display:none;}
</style>
Other ways to customise it
Customise HTML Editor Control
Related
I'm having issues getting my CEWP to apply any of the code inside of it.
There are no errors, no problems whatsoever, it just doesn't do anything.
I've tried putting the code directly inside of the CEWP or linking to the file.
The link to the file works perfectly too.
Here are all combinations of code I have tried to add to the CEWP; perhaps someone can spot the mistake:
With the webpart id from webpage:
<script>
<style>
#WebPartTitleWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
</script>
With the webpart id from SPD:
<script>
<style>
#g_daea6bc5_92ba_4702_9956_55d5077c4440 .ms-viewheadertr
{display: none;}
</style>
</script>
I have also tried with and without the script tag, messing with the spacing, messing with lines, messing with indents and nothing changes whatsoever.
I just want to remove the header from WebPartTitleWPQ9.
The style works just fine on the custom listview page when I add it directly to the page source, but the style doesn't remain when I add the list to other pages. I need the style to apply wherever the list is being used.
You have the a style tag inside the script tag.
Try this:
<style type="text/css">
#WebPartTitleWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
or this:
<style type="text/css">
#g_daea6bc5_92ba_4702_9956_55d5077c4440 .ms-viewheadertr
{display: none;}
</style>
The name of the webpart needs to have "title" / "caption" omitted. The real name of the webpart is WebPartWPQ9 and not WebPartTitleWPQ9.
Changing the css to:
<style type="text/css">
#WebPartWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
fixed it.
Table bug fixed: I was missing thead and tbody tags!
I have a weird problem with Bootstrap. Everything works perfectly fine, but when I try to use table-hover class it just does not work. Also, the table has upper border: http://gyazo.com/796c5bb99058c0d07e8ece8f54790399.png
Also, when I resize the Chrome browser, the navigation bar looks like this:
http://gyazo.com/cb7842b71d7a6e63eb0d5ce3f0b52902.png
instead of normal 'mobile' look on getbootstrap.com site.
I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
Code:
<table id='keytable' class='table table-hover'>
<tr><th>sv_licensenum</th><th>Type</th><th>Key</th><th>Description</th></tr>
<tr><td>0</td><td>Ranked</td><td>alrCOdo8PsFUur6iZmIlESd7</td><td>test2</td></tr>
<tr><td>1</td><td>Ranked</td><td>VLnNg25kSZRB4IzNpufu0qIs</td><td>test456</td></tr>
</table>
id="keytable" is not specified in any external non-Bootstrap CSS file/code. it is only used for Javascript.
After inspecting the file carefully I have figured the reason for this weird behavior.
You need to remove the style you have defined in you html. This is the reason the navbar gets a padding when you reach 979px or less. You can consider defining this through #media or media-query
body {
padding-top: 60px;
background-color: #f5f5f5;
}
And then you have to remove the style
nav-collapse collapse
This will hide whatever you put inside this.
Read http://getbootstrap.com/2.3.2/components.html#navbar
Hope this solves your problem.
I hope you have also included the required bootstrap js files. I did not get any issues when I tested the code you provided.
I am printing one page from my web application from different browser. It contains some small images like tick mark, question mark on page.
Now my problem is that it is not printing images on print out. in IE it works fine and print images but in Google Chrome, Firefox it is not printing images.
Can any one have an idea what to do to print images in print out from Chrome and Firefox?
Thanks in advance.
below is my code for generating image in page.
I am preparing cell with class called 'tickmark'.
HtmlTableCell tc = new HtmlTableCell();
tc.InnerText = "";
if (Convert.ToInt64(result[h]) == 1)
{
tc.InnerHtml = "<b class='tickmark'></b>";
}
trContent.Cells.Add(tc);
and tickmark class having code:
b.tickmark { background:url(../images/tickmark.png) no-repeat; width:13px; height:10px; display:block; vertical-align:middle; margin:0 auto; }
Modern browsers do not print background images. These CSS images are meant for styling.
If that image is important, have it embeded on your page. images in a <img/> tag will work.
To avoid breaking your current layout, you can do this:
Have another css file print.css and link it as follows:
html:
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="print stylesheet" type="text/css" href="print.css" media="print" />
<div class="tick"><img src="images/tickmark.png" alt="tick" /></div>
main.css
.tick img {
display: none;
}
print.css
.tick img {
display: block;
}
I am trying to create a custom Facebook Tab using iframes. Anyways, it has a popup when it first loads. However, this popup doesn't display correctly when shown in Internet Explorer.
I tried the below code so I could attempt to hind the popup altogether, but it didn't work.
<!--[if !IE]>
-->
#hidepopup {
display: none;
}
<!--
<![endif]-->
With the popup code between <div id="hidepopup"> & </div>
Any suggestions on how to hide or resize it?
http://www.facebook.com/pages/GTD/104839016256119?sk=app_168848466497060
There are a few things going on here.
The conditional used is a IE conditional directive specifying: if not IE, these are IE only so it is a bit backwards
The conditional is incomplete the end comment happens immediately after the first condition.
Try This:
<!--[if IE]>
<style type="text/css">
#hidepopup {
display: none;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#hidepopup {
display: none;
}
</style>
<![endif]-->
Do not use ! because it means not IE and you have extra opening/closing tags for comments. Also you have not declared that it is style. Here is link to help you with conditional comments: http://www.quirksmode.org/css/condcom.html
Your second issue is that you are using jQuery for animating popup. Animations are changing display:none to display: block. So your special condition for IE is overwritten by script.
here:
//transition effect
$(id).fadeIn(2000);
I have a print page, and I want to put a div with some instructions on how to print the page in it. I don't want this section to appear when they actually print the page.
How would I achieve this using CSS or JavaScript?
A common method is to use a separate CSS for printing.
You can have a css for all media and one for print:
<link rel="stylesheet"
type="text/css"
media="print" href="print.css" />
In the print.css just put the display:none on the div.
Davide
Since it hasn't been stated here before, you don't necessarily need to have an external style sheet:
<style type="text/css" media="print">
.hideMeInPrint { display: none; }
</style>
The simplest solution is to add this in the main CSS file. Do note that, when you link the CSS file, you should not specify the media attribute (<link type="text/css" rel="stylesheet" href="/path/to/css.css" />):
#media print {
div.classname {
display:none;
}
}
You are looking for #media print.
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
Bit more info on Print Style Sheets
Insert a stylesheet just for print:
<link rel="stylesheet" href="/path/print.css" media="print" />
Then put css to hide the div in that stylesheet
<link type="text/css" rel="stylesheet" media="print" href="/css/print.css" />
in this css file style put display: none; for elements you don't want to be printed
In your html, indicate a stylesheet used for printing:
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
And in this CSS:
#mydiv {display: none;}
You can include a stylesheet that is only applied when printing.
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="print-specific-styles.css">
In that style sheet, you can hide your divs and make any other necessary changes.
Anyone working with div's inside php then take Divya's recommend. I spent hours on this until ran across this, put into external and all class in other code with php page, works great :) Also, works good with bootstraps whereas bootstrap can otherwise be ignored and still print.
#media print {
div.classname {
display:none;
}
}