I've got a left rounded corner box -> textbox -> right rounded corner box which all make up part of a search box. All's well in FF, Chrome, IE8 but not IE7.
I've checked it using the debug tool and and I have tried a number of options, none of which want to work at the moment, so I am hoping someone might know what this issue (bug) might be please?
Here's a snippet of my code:
<div class="roundBox4">
<img src="../App_Themes/MyChoice2010/Images/reality-box-top.gif" width="228" height="8" /><img
src="../App_Themes/MyChoice2010/Images/reality-box-locate.gif" width="228" height="49" />
<asp:ContentPlaceHolder ID="Box4Content" runat="server">
</asp:ContentPlaceHolder>
<div class="locateABroker">
<img src="../App_Themes/MyChoice2010/Images/locate-broker-left.gif" class="locateBrokerLeft"
height="19" width="3" /><asp:TextBox ID="TextBox1" CssClass="locateBrokerCenter"
runat="server"></asp:TextBox><img src="../App_Themes/MyChoice2010/Images/locate-broker-right.gif"
height="19" width="3" class="locateBrokerRight" />
Submit<img src="../App_Themes/MyChoice2010/Images/box-arrow.gif"
class="linkArrow" width="8" height="14" />
</div>
The only thing that I can say about IE7 is that you almost literally need to declare everything in your CSS. Inheiretance is abysmal in IE7. I would make sure that you are a) using a good reset.css and b) try declaring any padding, etc. directly on the element that is giving you issues.
Related
today I encountered a strange behavior in bootstrap v5:
<button class="btn btn-primary">
<img
v-svg-inline
src="#/assets/icons/printer.svg"
width="20"
height="20"
/>
</button>
leads to:
So far so good.
However,
<button class="btn btn-primary ms-1">
<img
v-svg-inline
src="#/assets/icons/printer.svg"
width="20"
height="20"
/>
</button>
leads to
As you can see, now three dots next to the image appear . This happens only when I scroll in (100% and more). Furthermore with the Selector (F12) I cannot click it, cannot even find the dots in the DOM.
Question:
Has anyone of you ever experienced something similar? And why does ms-1 lead to the "three dots"?
I could narrow it down to the fact, that comes and goes with the "ms-1" class. This, however, does not really help me.
Any information is highly appreciated :)
Thank you very much and have a great day!
We're working with Magento 2.2.8, we added product attribute using WYSIWYG editor in admin panel. Image is showing perfect with admin url.
<img src="{{media url=" wysiwyg="" u4888.png"}}"="" width="400" height="400">
But, in product detail page, it's not showing image. It seems like media is not rendering.
Please check below code, the media url is not changing to dynamic url as its doing in admin.
<div class="col-md-4 custom-accordion__col">
<img src="{{media url=" wysiwyg="" u4888.png"}}"="" width="400" height="400">
</div>
Your help is highly appreciated.
Thanks,
Saikat
Whenever I add an image using WYSIWYG, the output I usually see looks something like this:
<img src="{{media url="wysiwyg/folder/image.png"}}" alt="" />
In your case, if the image is uploaded using WYSIWYG, the URL should look like this:
<img src="{{media url="wysiwyg/u4888.png"}}" width="400" height="400">
Hope this helps!
I just found the solution. So, in display block section we have to put below codes:
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
<?=$_helper->productAttribute($_product, $product->getData('quality_n_materials'), 'quality_n_materials') ?>
Thanks,
Saikat
I'm trying to wrap text automatically since I won't know what the text is ahead of time.
I tried using the accepted answer in this question, but nothing shows up. Here is my sample code so far:
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<switch>
<g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">
<textArea width="200" height="300">whatever</textArea>
</g>
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</switch>
</svg>
I am rendering this SVG in FireFox (since its part of a web page).
Firefox implements some parts of SVG 2 and dropping support for requiredFeatures is one part of SVG 2 that it has implemented.
Previous versions of SVG included a third conditional processing attribute, requiredFeatures. This was intended to allow authors to provide fallback behavior for user agents that only implemented parts of the SVG specification. Unfortunately, poor specification and implementation of this attribute made it unreliable as a test of feature support.
That means that the first part of the switch now applies when at the time I wrote the answer to the other question, it didn't. The answer is to remove the switch and the first element as nobody implements SVG 1.2 textArea any more.
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</svg>
I'm making SVG effects by combining 2 identical photos with alternate slits. When you look closely, there are dotted lines 45 degree across the whole images. Referencing this question, I already tried the option shape-rendering="optimizeQuality", shape-rendering="geometricPrecision" and shape-rendering="auto" on <polygon> tags, but the dots still appears.
How do I remove the tiny dots?
Partial HTML codes (full code is too long to post here, see JSFiddle below for full CSS, JS and HTML codes):
<div class="image_wrapper">
<svg id="svg-1" class="clip-svg">
<image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
</svg>
</div>
<div class="image_wrapper2">
<svg id="svg-2" class="clip-svg">
<image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
</svg>
</div>
JSFiddle demo is here
The dots are caused by anti-aliasing of the polygons that you are using for the diagonal slit clipping paths.
IMO there isn't any way to prevent that. It may or may not get better if you turn anti-aliasing off with `shape-rendering="optimizeSpeed". And even if that works on one browser, it may not work on other ones.
My suggestion is to just have a complete ("un-slitted") version of the image on top. Make it invisible initially, then show it once the animation has finished.
I have sport schedules that I would like users to be able to print out on 2 or 4 pages. Tournaments with a large amount of teams would produce hard to read text because there isn't much space for it.
Not sure how to produce printable content with d3js, should I specify values for placement and size in pixels, centimetres, percentage? Percentage sounds good but would need to insert a page break element, maybe provide a separate svg for every page. Can't find a good article on how to do this and am wondering if I've missed something.
The code as is should produce lines with text labels, to fit it all on 2 pages the text in the labels would be very small so want to provide a 4 page version. So my question is: What would be the best way to do this?
I'm thinking of providing 4 or 2 svg elements with a page-break-after css style. The shape and dimensions would be roughly letter or a4 landscape and placement units are based on percentages.
[UPDATE]
Since pageSet and page elements seem to be ignored by Firefox (and inkscape) and wrongly interpreted by Chrome I've tried multiple svg's. This seems to print fine on my new but not latest Firefox and Chrome. Code I use is:
<html><head>
<title>Test tournament bracket</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
#media print {
.noPrint {display:none;}
}
</style>
</head>
<body>
<div class="noPrint">
<h1>Forms and non printable content</h1>
</div>
<svg width="70" height="55">
<text x="10"
y="10" font-family="sans-serif"
font-size="12px" fill="black">
Hello
</text>
</svg>
<div style="page-break-after: always;"></div>
<svg width="70" height="55">
<text x="10"
y="10" font-family="sans-serif"
font-size="12px" fill="black">
World
</text>
</svg>
</body></html>
Will give that a shot and see how it turns out.