I am working on a legacy application which works in ie but not in Safari.
The image in the code will not render in Safari.
<section class="feature pointer clickableSection tooltipContainer" id="SearchSection"
data-scd-nextScreen="#Url.Action("FullSearch", "Company")"data-placement="bottom"
data-toggle="tooltip" data-title="Click here to SEARCH Addresses">
<img src="#Url.Content("~/images/phonebook.png")" alt="Click here to SEARCH Addresses" />
<h3><span style="text-decoration: underline">Search Addresses</span><span id="searchHeading"></span></h3>
<div class="loadMessage"></div>
</section>
I have got the Safari Web Inspector up and running, but I cannot see where I can find out where the problem is. I am new to using this tool.
I found where the problem is.
In my CSS which I did not publish, it has;
section.feature img {
color: #999;
/*content: attr(alt);*/
font-size: 1.5em;
font-weight: 600;
height: 140px;
width: 200px;
}
I have commented out the line that is not compatable with Safari, ie content: attr(alt);
Related
I am using Angular Material. I have a form with various fields and list items. I have changed the size of mat-form-field inputs using below
mat-form-field.mat-form-field {
font-size: 14px;
}
However since list are not a part of mat-form-field they are still their default 16px. How can I change the size of the <mat-list-item>?
<mat-list-item *ngFor="let file of files">{{file.name}}<mat-list-item>
Try the following CSS definition:
:host /deep/ .mat-list-item-content {
font-size: 18px;
}
I was actually doing this yesterday for my mat-list-items. h6 turned out to be an appropriate size for me.
<mat-list-item *ngFor="let file of files">
<span style="font-size:12px">
{{file.name}}
</span>
<mat-list-item>
or
<mat-list-item *ngFor="let file of files">
<h6>
{{file.name}}
</h6>
<mat-list-item>
You can add the styling directly to the markup. If you use class to reference CSS file, sometimes it won't work.
<mat-list-item style="font-size: 14px; height: 25px" >Test</mat-list-item>
WordPress Widget Area Links Only Work From Home Page
Below is the code in wootique theme footer 1 widget area. The links works fine from the home page but when any of the links is click again from the page that it landed on the homepage url is repeated in the url section of the page and it says page not found. This happens when you click any of the links.
Here is the code that I placed in the widget footer 1 area:
<div id="parent-footer">
<div id="first">Product Gallery</div>
<div id="second">Blog</div>
<a href ="XXXXXXXXXX.com/returns/"> <div id="third">Return Policy</div>
</div></a>
<style>
#parent-footer {
width: 200%;
white-space: nowrap;
}
#parent-footer div{
display: inline-block;
width: 33.3%;
color: #5BB191;
margin-left: 105px;
padding: -60px;
}
#first{
margin-right: 20px;
}
</style>
if the url is repeated like www.xxx.com/something/www.xxx.com/something the problem could be that it is interpreting the url as relative. Add http:// (or https if you are running on a secure link) to the url.
This is the first time I saw this... I have text in my code and it says Passport and Visa Requirements. This is my markup
<div class="rectangle"><span>Passport and Visa Requirements</span></div>
Crazy thing happens on the live server, somehow a link is injected on the word "visa". This is the markup I see in firebug.
<div class="rectangle">
<span>
Passport and
<a id="_GPLITA_0" title="Click to Continue > by CouponDropDown" style="text-decoration:underline" href="http://i.txtsrving.info/click?v=" in_rurl="http://i.txtsrving.info/click?v=" in_hdr="">
Visa
<img src="http://cdncache1-a.akamaihd.net/items/it/img/arrow-10x10.png" style="display: inline; vertical-align: super; margin: 0px 0px 0px 3px; padding: 0px; border: 0px none; height: 10px;">
</a>
Requirements
</span>
</div>
Is my htaccess file not configured properly? How do I deal with this? Is this a security issue?
http://www.bleepingcomputer.com/virus-removal/remove-coupondropdown
This is probably adware on your computer, affecting your browser. Your website is probably fine.
My problem:
I have a css div with a table (jquery-mobile 1.0), - If I add too much rows in the div (overflow) the touch event isnt't fireing the javascript functions...any idea?
it,s not fireing the functions and " overflow, before it's working fine !)
$('#mytable').append('<tr><td width=20%>
<a href=add.html onclick=setId('+row.UserId+');>
<img src=./icons/patientendaten.png width=48px height=48px></a></td>
<td width=20%>'+row.Datum+'</td><td width=20%>'+row.Patient+'</td>
<td width=20%><center><a href=# onclick=delete_entry('+row.UserId+');>
<img src=./icons/delete.png></a></center></td><td width=20%><center>
<img src=./icons/edit.png></center>
</td></tr>');
More Details:
<div data-role="content">
<div id="twitter">
<div class="ui-grid-d">
<div class="ui-block-a"><div class="ui-bar ui-bar-d">Akte</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-d">Datum</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-d">Patient/in</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-d">Löschen</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-d">Fallbeisp. erstellen</div></div>
<br>
<table id=mytable>
</table>
</div>
</div>
</div>
I am using jquery mobile 1.0 and the newest phonegap 1.7 on android 3.2
In addition the logcat gives me (when I am adding row nr. 6)
05-24 23:59:18.030: E/libEGL(16161): call to OpenGL ES API with no current context (logged once per thread)
05-24 23:59:18.030: D/ShaderProgram(16161): couldn't load the vertex shader!
Here is my div:
Logcat:
05-23 17:05:51.800: V/webview(30492): singleCursorHandlerTouchEvent -getEditableSupport FASLE
I came up with the solution that the blue div is the problem...jquery-mobile/phonegap have a problem with that overflow which leads to the error !
05-24 23:59:18.030: E/libEGL(16161): call to OpenGL ES API with no current context (logged once per thread)
05-24 23:59:18.030: D/ShaderProgram(16161): couldn't load the vertex shader!
#twitter {
position:absolute;
top:140px;
left:40px;
width: 880px;
height: 400px;
border: 5px solid;
border-color: #458d91;
-moz-border-radius:16px;
-khtml-border-radius:16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding-top: 10px;
padding-left:10px;
padding-right:10px;
padding-bottom: 10px;
overflow: auto;
}
If I am deleting the overflow and height, then there isn't any problem.
Using lists in that case is maybe a better way to go.
I also tried different jquery-mobile, jquery - in combination with different phonegap versions - this was tested on the samsung galaxy 10.1 tablet - android 3.2
Hope this helps.
I have a Grails application with a form in it. Once the user has entered the data and submitted it, and it's been validated etc.. I need a message to popup in a little window to give the user some feedback - it needs to popup, rather than be displayed on the page. Can anyone advise me on the best way to do this?
I have implemented the same mechanism for my application, and I am using the jQuery plugin 'smartmodal' (used by the Nimble plugin originally). See here
You simply have to redirect the request in the controller validation code to a GSP page containing the following code:
<script type="text/javascript" src="${resource(file: 'jquery-1.3.2.js')}"></script>
<script type="text/javascript" src="${resource(file:'jquery.smartmodal.js')}"></script>
<LINK rel="stylesheet" href="./css/smartmodal.css">
...
<body>
...
<g:javascript>
$(function() {
$("#msg").hide();
$("#msg").modal({hide_on_overlay_click:false});
$("#msg").modal_show();});
</g:javascript>
<div id="msg">
My feedback message is here
</div>
<g:link controller="..." action="...">Close</g:link>
I hope it helps,
Fabien
EDIT:
An extract of the smartmodal.css file that will render the 'modal effect' is:
#modal_content {
display: none;
position: fixed;
left: 50%;
padding: 0px;
top: 10%;
background: #FFF;
border: 0px solid #d2d2d2;
width: 400px;
margin-left: -200px;
text-align: left;
}
#modal_overlay {
background-color: #000;
}
However if you want the complete file, it is available inside the great Nimble grails plugin