so I want to show like button but it doesn't show that element when I run the emulator. and only show like blank space at that field. the code like this,
HTML:
<p><strong>Click Here</strong></p>
but when I removed the style inside, it will work like hyperlink text. the code below
<p><strong>Click Here</strong></p>
I used flutter_html: ^2.2.1
I tried your code & found few issues in it.
You height is conflicting with padding. You have set height as 20px and padding as 8px. In this padding is applying within this height leaving you only 4px to view. I think its because the height is not a valid inline style supported by flutter_html. Read here. To support padding in the design I suggest try removing removing height, changing it to some bigger value or using line-height.
You are using background which is again not a supported inline style as per docs here. Try changing it to background-color.
Let me know if are you still facing any issue.
Related
I've a problem with a customized font used in an input field.
As you can see is cutted on top and on bottom.
There is no padding or margin. What could be the error?
I think is related to this div that doesn't appear in entire code.
It seems like the height is too small, but I could be wrong. Try setting the 'height' parameter to 50px and let me know if that fixes it.
The span surrounding the <input> is an inline element. I suspect this is what is causing the issue. Try to change the <span> to display: block
I have a problem with my appended div's inside a link. I want them to be all connected without empty space at the bottom. I figured out that this is an <a> tag issue.
Here is the link to my codepen and an image presenting the issue:
http://codepen.io/Felnyr/pen/WRGRyQ
Image from Inspector:
There are two issues I see with your pen.
In the JS, you're missing a double quote after href=\"#\ on line 9.
To fix the bottom margin issue, you could just change the line-height to 0 for the channel boxes parent.
Like this:
.channelBoxes
line-height: 0
This fixes issues at all responsive breakpoints.
To keep the text formatted correctly. You can use a negative bottom margin but this may not be complete cross-browser compatible (especially some Android browsers seem to have trouble). You could add margin-bottom: -10px to your .Box css.
I'm very new to html and I was wondering if there is anything I can use other than a div element. The code that I want to use displays a hover. For example: <div id="cartpopup">.
Well this makes it so whatever I put in between these tags gets lowered. Everything is working fine I just don't want my image to be lowered because of div. Help would be appreciated.
To prevent line wrapping, try using a span element, which is inline.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You could also set a div to display inline or inline-block (which allows CSS sizing, for example) using CSS:
#cartpopup {display: inline-block;}
See My Fiddle:
http://jsfiddle.net/5BEsZ/
I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.
You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?
Why I Need This (what I've tried):
I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes.
Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and overflow:hidden. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a padding-top:20%. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).
Then I try and position the star image inside the container with margin-top. I tried using position:relative and a top:-X%, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).
So I assumed negative margin would work, but then discovered this strange issue!
NOTE: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?
I've updated your fiddle. img tags are "inline" elements by default, which impacts the way margin is calculated relative to the containing element. By forcing the image element to be rendered like a block (display: block), you're able to achieve the results you were expecting. A div element is a block by default.
As a side note, you'll want to avoid using inline styles (a different sort of "inline"!) wherever possible. Typically your styles would be included in a stylesheet instead of in a style attribute directly on the element. I included the fix (display: block) in the attribute to match the code style of your html.
I don't know why, but if you float the image the problem goes away.
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
So, the answer to fix your problem: http://jsfiddle.net/5BEsZ/2/
If anyone could explain why this happens?
I'm attempting to finalize on of the pages that I am fixing for a client, and it seems that one of the div's within the page that I am attempting to add padding to won't work for vertical padding. I checked the element using chrome's dev tools, and it stated the element had "NaN x NaN" for dimensions.
The element is clearly being displayed, but I cannot add padding to it as a result. To see what I am talking about, click here and look at .accordion-heading > .accordion-toggle. It's a bit frustrating because it's preventing me from finishing this tiny bit of the page. How can an element have supposedly no dimensions, and how can I fix it? I've tried adding manual width and height, to no avail.
This is because it's an inline element. Change its display to inline-block and you'll be able to add padding.
a.accordion-toggle {
display:inline-block;
}