Issue: I was applying HTML2Canvas on an element on button click. On rendering the canvas, the CSS styles applied on HTML elements with Class selectors were not getting applied.
Eg: Prior to the HTML2Canvas application on an element, the footer and other parts of the page looks good, but once HTML2Canvas is applied, the page breaks as the styles on the class selectors were not being applied.
Links: http://cyberbel.com/wishes/
Related
On my frontpage I have added the full-screen carousel content element of the bootstrap extension of Typo3. I would like to have both text and images on my slides so I added a 'Text and image' carousel item.
However, I would like the text to be layered on top of the image, instead of the image being placed below the text like shown in the image below.
I would also like for the text to be centered and am unsure why it is not, since I am using the same header classes as for other carousel items where the text-center class is added automatically and the text is centered.
you may have to override the Carousel template (or some of its partial), in order to change classes and html element positions.
so when i am right and you are talking about the bootstrap_package extension the main template you like to override is:
web/typo3conf/ext/bootstrap_package/Resources/Private/Templates/ContentElements/Carousel.html
How can i disable horizontal scroll bar in gwt-richtextarea
I applied overflow-x:hidden and is working fine on firefox but not working on IE
RichTextArea uses an iframe to embed the editable html document.
When you set styles to the rich area, you are setting them to the iframe element, but in your case you have to set styles to the body element of the iframe #document.
The problem here is how to get the content document of the iframe, you have to use jsni, or use a 3party library like gwt-query.
This works with qQuery:
import static com.google.gwt.query.client.GQuery.*;
RichTextArea area = new RichTextArea();
RootPanel.get().add(area);
$(area).contents().find("body").css($$("overflow-x: hidden"));
Another issue is that the creation of the editable document in the iframe is delayed in gwt. So it is safer if you delay the setting of styles, using a Timer.
With gquery you can use the delay() method
$(area).delay(100,
lazy().contents().find("body").css($$("overflow-x: hidden")).done()
);
I am having some trouble styling filepicker.io widgets for web, specifically filepicker-dragdrop.
Is there any way to disable the inline styling and replace them with classes?
Something like data-fp-disable-styles or perhaps when using data-fp-dropzone-class="..." the inline styling is automatically disabled.
Although you can add classes to the button with the attribute data-fp-button-class, I cannot get rid of the inline styling on the on the dropzone and container div.
You can set the data-fp-drag-class and data-fp-class options to set the styling of the dropzone and container div and use the !important flag for any styles that you want to use to override the inline styles.
If you're looking for a more fully customizable solution, we'd recommend using the raw javascript api's to create your own drag pane (https://developers.filepicker.io/docs/web/#widgets-droppane) and/or pick button
I'd like to add a class to fb:comment-count (without using a div). I noticed when using web inspector there appears to be a blank class assignment by default. I was wondering if anyone knew how to add a class into this field?
You don't have control over what classes Facebook renders when using their FBML tags. You should be able to apply styling to the fb_comments_count class though in your css file or wrap the tag in a div and style that div.
I have an application that opens HTML pages in a UIWebView. The pages have a specific color theme, which is disrupted by form elements on the page (I have few "select" fields), which have their own color theme (white font, light gray background). CSS can't seem to force it to display in other colors.
Does anyone know how to fix that?
Thanks!
Try using -webkit-appearance: none; to disable the browser's default styling, then apply your own styles. More info and examples at 37signals.
Try using !important in your external CSS styles. It could be that the style sheets for UIWebView are inline and are overriding your external styles.
For example, select { color:#000!important; } should override any inline style text color (unless it is set to !important as well) on <select> elements.