I tried to override a few css properties of the gwt-DisclosurePanel and gwt-DisclosurePanel-open rules to try and remove the vertical line but failed to do so. Here is the image:
How do I remove this vertical line?
The border line in the DisclosurePanel content comes from this rule (in Clean theme as an example):
.gwt-DisclosurePanel .content {
border-left: 3px solid #e7e7e7; // Here is your border
padding: 4px 0px 4px 8px;
margin-left: 6px;
}
Always use Firebug for Firefox or Chrome's built in Developer Tools to debug issues like that. You would get the required CSS rule to override in just a few seconds.
Related
I'm using the eslint extension, and its producing errors in my code. However is there a way to show a error-indicating gutter on the lines with a error? Currently I just have this red underline:
Is there a way to show a high-contrast gutter next to the line number for errors and warnings?
I spent a lot of time and managed to make errors in vs code more visible. Still not in the gutter, but better then nothing. I replaced vs code squiggly error and warning underlines with background and thick underline:
(offtop: also on screenshot you can see how "Bracket Pair Colorizer" extension works :)
Install CSS and JS Loader and carefully follow all instructions (i had problem with link to css, which in windows must be like file:///C:/myfolder/myfile.css ... better read whole extension instructions)
Create a css file with contents:
.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
/* background */
background: #f2e3b3;
/* underline */
border-bottom: 3px solid #ffc000;
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
/* background */
background: #ffc7c7;
/* underline */
border-bottom: 4px solid #ff0000;
}
And place link to it in settings.json like said in CSS and JS Loader extension instructions
"vscode_custom_css.imports": ["file:///C:/yourfolder/youfilewithcustom.css"],
"vscode_custom_css.policy": true,
, then reload...
You can get color box around error (instead of underline, not simultaniously) if you use for example (border: instead of border-bottom: ):
border: 1px solid #ff0000;
Or you can get custom border from any side (right border alone seems to look great, tried this while writing this post)
.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
background: #f2e3b3;
border-right: 5px solid #ffc000;
border-bottom: 5px solid #ffc000;
border-top: 3px solid #ffc000;
border-left: 1px solid #ffc000;
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
background: #ffc7c7;
border-right: 5px solid #ff0000;
border-bottom: 3px solid #ff0000;
border-top: 3px solid #ff0000;
border-left: 1px solid #ff0000;
}
This css will only replace squiggle color from green to yellow:
.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
/* yellow squiggly */
background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' height='3' width='6'><g fill='#FF0'><path d='M5.5 0l-3 3H1.1l3-3z'/><path d='M4 0l2 2V.6L5.4 0zM0 2l1 1h1.4L0 .6z'/></g></svg>") repeat-x 0 100%;
}
As you can see the name of class changed from .greensquiggly to .squiggly-warning, that's why css from previous answer doesn't work.
To find out new error css class i used Help -> Toggle Developer Tools, where after deleting bunch of blocks, i could find the error and warning classes.
Not sure if it helps. If you change all levels of errors in ESLint to warnings and then install extention Custom CSS and JS you will be able to transform green underline to something else.
.monaco-editor.vs .greensquiggly,
.monaco-editor.vs-dark .greensquiggly {
background: rgba(239, 83, 80, 0.2);
border: 1px solid #1976d2;
}
It can appear (greensquiggly) in some other places, but for me this is working.
based on #last-on-space here is a full override + a small enhancement to make sure the styles dont overlap each other on consecutive lines
.monaco-editor .squiggly-warning,
.monaco-editor .squiggly-error,
.monaco-editor .squiggly-info,
.monaco-editor .squiggly-hint {
border-bottom-width: 4px;
border-bottom-style: solid;
box-sizing: border-box !important;
}
.monaco-editor .squiggly-warning {
background: #ffc00030;
border-bottom-color: #ffc000;
}
.monaco-editor .squiggly-error {
background: #ff000030;
border-bottom-color: #ff0000;
}
.monaco-editor .squiggly-info {
background: #0e7fff30;
border-bottom-color: #0e7fff;
}
.monaco-editor .squiggly-hint {
background: #a2eeef30;
border-bottom-color: #a2eeef;
}
also dont forget to add
"editorError.foreground": "#00000000",
"editorWarning.foreground": "#00000000",
"editorInfo.foreground": "#00000000"
"editorHint.foreground": "#00000000"
under workbench.colorCustomizations to hide the original styles
As the title says, I have a weird css error on my hands. I've built a rails app using bootstrap and some custom css, testing the whole thing in chrome initially. I started checking it out in firefox and my user sign in form-fields don't seem to respond to clicking on them or typing. You can't see the placeholder value nor what you're typing. Has anyone heard of this before? Any ideas what causes it?
To illustrate I made a jsfiddle (my first). I was kind of heavy handed and just copied the css right out of my inspector so it's a little bit of a mess. Open it in firefox and the form cannot be typed into. In chrome it's fine. The offending line on this fiddle appears to be 28, the -mox-box-sizing rule.
http://jsfiddle.net/vRF3F/
.row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: left;
margin-left: 2.12766%;
min-height: 30px;
width: 100%;
}
Ok, I think I have found the cause:
If you remove this line:
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
border-radius: 4px 4px 4px 4px;
color: #555555;
display: inline-block;
font-size: 14px;
/* height: 20px;*/
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
}
it will work. Setting the height property will cause the parent div to collapse so you won't see the input box anymore, hence it appear to not work. The padding alone should be fine to give it a height.
See updated fiddle here:
http://jsfiddle.net/AbdiasSoftware/vRF3F/3/
Bootstrap CSS does include the box-sizing property with all vendor prefixes in that selector, I don't know why you are only getting the -moz
.row-fluid [class*="span"] {
...
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
...
}
Try updating your CSS with that and you will note that your inputs are now smaller in height so just set a specific value for height and I think you'll be good to go
.new-user input[type="text"],.new-user input[type="password"]{
height: 60px;
}
I'm using fancybox 2 and I can get rid of the padding around the outside of the frame, but then I lose the border-radius that it comes with.
What I want is a border-radius around the main content inside the frame. So I tried going into the css and adding a border-radius to the fancy-box inner selector and it won't work. How can I give the frame a rounded corner without a border?
If anyone can help me with this that would be great!
Try this code it worked for me
Add custom classes after fancy box on complete method.
Ex.
HTML
Login
JS
$(document).ready(function(e) {
$(".signin-ovr").fancybox({
afterLoad : function(){
$("#fancybox-content").addClass('fancybox-content-cust');
$(".fancybox-bg").addClass('fancybox-bg-cust');
$("#fancybox-outer").addClass('fancybox-outer-cust');
}
});
});
CSS
.fancybox-content-cust {
overflow: visible !important;
border: 10px solid #FFFFFF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.fancybox-bg-cust{
display: none;
}
.fancybox-outer-cust {
background: transparent !important;
}
Then you will get border radius to the overlay box.
for fancybox v2 round borders
.fancybox-outer, .fancybox-inner, .fancybox-skin {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px!important;
}
CSS3 has a border radius property ironically enough entitled border-radius there are a few specific variations ie, Firefoxes moz-border-radius.
It is used like so:
#div-id .specific-class {
border-radius: 10px;
}
If you only want one rounded it has the ability to be modified like so
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
I hope this answers your question.
I have a Telerik tree and drag & drop node move is in action. But then I applied a theme (bought from somewhere) to the overall design of my site, and now, the hint are gone.
When you drag a node, some horizontal hint lines appear, so that you can understand that if you release your node (drop it) where it would be dropped.
Try adding the following CSS to the page. It will force the styles upon the TreeView drop hint.
.rtDropAbove, .rtDropBelow {
border: 1px dotted black !important;
font-size: 3px !important;
height: 3px !important;
line-height: 3px !important;
margin-top: -1px !important;
}
.rtDropAbove {
border-bottom: 0 !important;
}
.rtDropBelow {
border-top: 0 !important;
}
Something's z-index property is messing up with Telerik's RadTree. It's all z-index stuff.
I am working on FB Send button and implementing it on a new site. The problem is the flyout that FB display on the click of Send button is below the Send button. Can anyone let me know how can we set the "flyout" (dialog that appears on clicking the send button) can be customized to be displayed above the send button and not below it.
Thanks in advance!
I too wanted to add this button to the right of the page, had problems moving the iframe so that is was visible so instead decided to open the send button in a dialog window. http://developers.facebook.com/blog/post/514/
You will need to use the JS SDK to do this, and also provide a button or a link that will trigger the send dialog to open. Here is some example code to make a link look like a send button
HTML
<a class="fb-send-button"><i></i><span>Send</span></a>
CSS
.fb-send-button {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
color: #3b5998;
-moz-outline-style: none;
text-decoration: none;
background: #eceef5;
border: 1px solid #cad4e7;
display: inline-block;
padding: 4px 5px;
white-space: nowrap;
padding: 2px 5px;
font-family: 'trebuchet ms', sans-serif;
font-size: 11px;
}
.fb-send-button:hover {
border-color: #9dacce;
text-decoration: none;
color: #3b5998;
}
.fb-send-button span {
line-height: 14px;
line-height: 13px;
}
.fb-send-button i, .fb-send-button img {
float: left;
height: 14px;
margin-right: 3px;
width: 14px;
}
.fb-send-button i {
background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/z7/r/ql9vukDCc4R.png);
background-position: -1px -47px;
}
Javascript
FB.ui({
method: 'send',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/reference/dialogs/'
});
You will need to already have the Javascript SDK loaded on your page, and will need to either put the above JS in the anchor tag in an on click attribute, or preferably adding it using your own Javascript.
The best solution I've tried so far is this:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -45px !important;
}
This temporary solution moves the pop-up box to a somewhat centered position under the Send button, which makes it accessible on the mobile.
This is how it looks like on an iPhone (notice it's still too a bit too wide for mobile):
http://s16.postimage.org/3xeep2uo5/foto_1.png
Same page viewed in a PC browser:
http://s16.postimage.org/nukby1dj9/xotc_browser.png
Notice the small arrow on top of the popup is now no longer aligned with the Send button (due to my css). Notice how it switches position to be on the left or right side of the popup, depending on where it's viewed (mobile or PC browser).
(I tried it on a Lumina 920 as well, but gave the same issue as iPhone)
This Facebook plugin doesn't allow you to specify a custom css file like some of the older ones do so it will be pretty tough to change the appearance aside from messing with the iFrame style/size. Your css changes won't apply to the iframe content Facebook renders because it is hosted on a different site so cross-domain restrictions will apply.
I had the same problem and used the following to solve this problem:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -290px !important;
}
Try to play with left, top, right, bottom values as you want it to be placed.