I am trying to convert a <div> to an image using html2canvas. However, there's an issue. The text inside the <div> marked with the red circle in Figure 1 has no padding or any kind of offset introducing parameters. But when converted to an image, there's an error gap above the text as shown by the red circle in Figure 2. I have used <h3> (marked with black background) and a <span> (marked with a green background).
Figure 1
Figure 2
Why is it behaving this way and is there a way to fix this ?
Tailwind CSS sets the display property of the img tag to display: block; during preflight. This introduces a line-break below the element which is not seen in the UI render. But, when you convert the same HTML to Image using html2canvas, the line-break gets rendered thus adding an unnecessary space in the resulting image. To solve this, we can add the following code to the tailwind.css file.
#layer base {
img {
#apply inline-block;
}
}
The above piece of code should be added after the #tailwind base; line. This solved the issue for me.
Related
I'm working with Angular material 1.1.0 and Angular 1.5. I'm trying to put an auto complete next to a multi-select input withing a row which defines an alignment as layout-align="start center"but the elements are not align. Here is a pen where the yellow div shows the issue.
At the bottom of the pen's css there is a commented style that can fix the problem by removing the extra space that the elements create to show error output. But this makes the autocomplete loading bar to be out of place.
I could simply align the elements as the white div as layout-align="start start" but this will left too much space between components as shown in the example.
Is there a workaround?
Use the CSS below - CodePen
CSS
#myAutocomplete {
height: 85px;
}
Markup
<md-autocomplete ... id="myAutocomplete">
I am using the carousel component from the new Bootstrap 3 RC2. However, I noticed that in practice the caption is often not readable because my pictures very a lot in color. The previous Bootstrap 2.3 used a black gradient for captions but that seems to have been removed.
What would be a way to style my caption with CSS to make them readable against arbitrary images? I have tried to play with shadow and background-color, but that just gets incredibly ugly.
Here some example code: http://bit.ly/1eX8Tz9
In order to get the content displayed on the gray semi-transparent background
Just Add the following code to your css
.carousel-caption{
background: rgba(0,0,0,0.5);
}
See the Demo Here
I am playing with the Bootstrap accordion & can't seem to be able to remove the underline/border which is displayed when the heading is open.
The accordion-heading style doesn't seem to specify a border and I can't locate where it's coming from using an element inspector.
The yellow highlighted line is what I am interested in (I have no trouble overriding the other borders.
Any tips?
.accordion-inner (below the header, encapsulates the accordion content) has a border-top property specified. This is probably what you're looking to modify/remove. The following CSS snippet will remove the border you're referencing.
.accordion-inner { border-top: 0 none; }
I know how to display an icon as such:
<span class='icon-remove'></span>
But If I add padding to the span, extra icon shows up. How to fix it?
span {
padding-right:60px;
}
fiddle
The glyphs are presented using one large image map (or so called CSS sprites), so if you leave enough space on in either side of the element it will show other glyphs as well. Two solutions comes to mind:
1) Put the icon in a containing element:
<span><i class='icon-remove'></i></span>
2) Or use margin:
span { margin-right: 60px }
I figure you just want to have some whitespace to the right of the icon? Have you tried margin:
<span class='icon-remove' style='margin-right:60px'></span>
The reason extra padding displays more icons is that Bootstrap uses CSS sprites to display icons. What you're actually seeing is a background image, more specifically a section of a large background image that includes many available icons. The definition of the class "icon-remove" specifies the background-position property to select the particular icon. If you add padding, you will reveal more of the background image, which will show additional icons.
The solution, then, is to either add margin, as Rid Iculous suggested, or couch your within another element and add padding to that. I'd go with the margin.
I have a system similar to BB code whereby text within two tags is converted into a link which when hovered over produces an line image.
The problem is that sometimes if the phrase is long the text wraps onto the next line. When this occur the image is displayed above the text on the preceeding line and doesn't look right. Because of this I want to ensure that if the text is going to wrap, it instead breaks to a new line.
I'm happy with any CSS3 only solutions to this.
Thanks
give your a css display: inline-block. Inline block doesn't allow breaking within the block and therefore moves to the next line.
a {
display: inline-block;
}