I have an app where suddenly all of my buttons in Vaadin do not show their icon/text. When I use the element inspector in Chrome I see that the class .v-button-wrap has been set in the tag of my page (not in the .css theme file) and has its display set to block. if I turn off display:block I can see my text again. I cannot figure out however where this incorrect css style is being generated in my app.
Any ideas?
The problem was I had Vaadin Touchkit registered in my widgetset config file (.gwt.xml file). Once I removed this everything works fine. It appears Touchkit injects a tag into your element.
Related
I want to modify so that the text in my box is displayed in white and not in black.
[Screenshot][1]
It works in the google console so I'm sure it's this attribute that needs to be changed.
I tried to modify the CSS code in the wordpress editor as well as in the gridbuilder editor, but nothing works...
[1]: https://i.stack.imgur.com/WfuPY.png
"element.style{}" isn't an element inside your code. You need to find the correct element in your code and apply it to that specific element.
See this link Chrome Docs
I have a tinyMCE implementation where the style_formats are not using the CSS imported font as a preview in the format selector. Oddly, it does display the font in the editor portion (see screenshot)
I have added the stylesheet containing the #font-face specifications in content_css property for tinyMCE.
If I load the page on a system with that font installed, it uses the font in the formats menu as expected.
The issue here is that the content window for TinyMCE is an iFrame so its separate from the containing page where you are loading TinyMCE. The Menubar, Toolbar(s) etc are not in that iFrame but are part of your main containing page that includes TinyMCE.
As such for both to have access to a font both need to load the font. Loading it in the CSS that you pass to the editor (via content_css) solves that for the content window but does not address the containing page. If you load that same font in the containing page things will work as expected. Based on your description I believe this is working as designed.
This isn't a tinyMCE issue at all.
I was adding an #import for the font CSS in the tinyMCE custom CSS. It could be that I'm dynamically loading the view containing the tinyMCE implementation, but including the font CSS using a <link> tag in the wrapper template solved the issue.
I am watching asp.net tutorial in visual studio but I cannot find the Add Style Rule option
it occurs from right click on css
also I cannot drag and drop the stylesheet on my html document.
Open the CSS style sheet in the editor.
In the Styles menu, click Add Style Rule.
The Add Style Rule dialog box is displayed.
Note: The Styles menu appears when you open an external CSS style sheet for editing. On the Styles menu, the Build Style option becomes available when you put the cursor inside the braces for a style rule.
Select the style options that you want, and then click OK.
The style rule is added to the CSS style sheet.
Reference: https://msdn.microsoft.com/en-us/library/bb907572(v=vs.100).aspx
The Stylesheet Toolbar for VS 2015 was not included. According to Microsoft, they are planning on bringing a more powerful experience back at sometime in the future. That is what I found when I was looking for the same thing.
I'm writing a rails app and in one of my views, I have a signup form. I'm using a bootstrap theme and in the textfields, when something is typed in, it is grey and hard to read. Without the theme the text is black and looks fine.
I've tried to edit the colors in the textarea classes of the theme but that hasn't worked.
What do I need to change to make the text a different color?
You need to apply a css style to the textfield to make the text black. Try something like...
input {
color:black;
}
Put that code in a css file in your assets/css directory. Make sure this css is getting loaded after bootstrap so that it overwrites it. I find Google Chrome's inspector tool handy for see what styles are being applied.
I'm working on a cross-browser bookmarklet where I need to inject my own style sheet into the page as well as various divs, etc. I've got it working everywhere but IE so am now attempting to debug some of the styling issues there.
I'm adding my css to the document after a user clicks my bookmarklet as follows:
if (document.createStyleSheet){
document.createStyleSheet("http://mydomain.com/css/mystyle.css");
} else {
$('head').append('<link rel="stylesheet" href="http://mydomain.com/css/mystyle.css" type="text/css" />');
}
The file is being fetched and applied to divs, etc. I create on the page, however when I inspect the element in IE 9 Developer Tools it does not show me ANY properties from the stylesheet I added dynamically, only those in the style="{}" attr.
Also, mystyle.css does not show up in the dropdown on the CSS tab, yet it does have a corresponding element in the head and styles in it are being applied to the dom correctly.
Any thoughts on how to force the dev tools to recognize my new sheet? It is infuriating to attempt to debug css w/o being able to manipulate it in-browser directly.
Did you click the refresh button in developer tools? It doesn't refresh the page, it reloads the dom from the current page.