novantiqua.net/very-new/e62.html
I want to hide some images and texts of certain popups if the screen height is too small, but it's not working on Macbook Air (with Safari as Web Browser). I don't know why.
Safari ignoring css max-width media queries below a certain point didn't help me.
css:
#media screen and ( max-height: 800px ){
.nasconditi-se-schermo-piccolo {display:none;}
h1{font-size:14px;}
}
html:
<h1>2 CD | Tuscania</h1>
<h2 class="nasconditi-se-schermo-piccolo">NA17</h2>
<img
src="cd-grafiche-400px/NA17-tuscania.jpg"
width="200" class="nasconditi-se-schermo-piccolo">
<p>
<b>Prima registrazione mondiale</b> dei Quartetti op.21 di Cambini.
<br>Libretto con un articolo storiografico sulla conquista dei diritti civili in Corsica e in Toscana nella seconda metá del Settecento.
<br>Cambini | 6 Quatuors Concertant op.21
<br>Boccherini | Duo per viola e violoncello
<br>
<br><b>Ensemble Alraune</b></p>
screenshot from a not working "display:none" rule
Related
For now, there doesn't seem to be a documented way to easily change Hangfire's Dashboard layout and styling to accomplish tasks like:
Use the full browser width (annoying when you have long Job Ids and Names)
Can't tweak the styling to better match a parent's site look, adjust grid column widths, etc
There have been Hangfire pull requests to add this type of feature, but nothing that's been integrated into Hangfire.Core, nor a plugin that I could find. After looking at the core source myself, I figured it would be too much of a pain to maintain my own fork just to add this customization.
So, what's a dev to do?
Here's one way to re-style the Hangfire Dashboard that is fairly lightweight, but requires same origin.
High-level:
Setup Hangfire per usual, setup the Dashboard, make sure things are working
Instead your linking directly to your configured Hangfire Dashboard link (e.g. /Admin/Hangfire), create an page on your site with an iframe that points to the Hangfire Dashboard.
Use a combo of js and css to tweak the dashboard iframe from the parent page.
Quick example:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="iframeTest.aspx.cs" Inherits="WebApp.iframeTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.hf {
border: none;
width: 100%;
height: 500px;
}
</style>
<script type="text/javascript">
function FixHangFireStyling() {
//Set page/container to full width
$("#wrap .container", frames['hf'].document).css("margin-left", "10px"); //adjust the px value as your parent layout requires
$("#wrap .container", frames['hf'].document).css("margin-right", "250px"); //adjust the px value as your parent layout requires
$("#wrap .container", frames['hf'].document).css("width", "100%");
//Remove the word breaking and predefined column (td) widths on the grids
$(".js-jobs-list-row td", frames['hf'].document).css("width", "auto");
$(".js-jobs-list-row td", frames['hf'].document).css("word-break", "normal");
};
function FixHeight(obj) {
//Auto adjust the height of the iframe based on the height of the Hangfire page (adds an extra 250 to account for my page parent page's height/layout)
obj.style.height = (obj.contentWindow.document.documentElement.scrollHeight + 250) + 'px';
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="right_col" role="main">
<div class="col-md-12">
<iframe class="hf" name="hf" id="hf" src="/Admin/Hangfire" onload="FixHangFireStyling(); FixHeight(this)" scrolling="no"></iframe>
</div>
</div>
</asp:Content>
And the result (full width, styling reapplied when navigating within the iframe, grid column adjustments to get rid of annoying text wrapping, and a quick iframe height auto-adjustment):
(24"W Monitor, 1920px resolution)
I currently use Stylus, and create some css for hangfire dashboard.
Here very simple css. Paste into Stylus editor
.container,
.navbar > .container {
width: 90%
}
Before Stylus
After Stylus
I need to rotate text by 90º (to display it vertically) in a custom QWeb PDF report.
Could someone paste an specific CSS and HTML example to do so?
(Odoo 10)
Thanks
Here is an example that works in Odoo 11:
<div style="transform: rotate(90deg); -webkit-transform: rotate(90deg);">Rotated Text</div>
I had much trouble with it myself, because transform: rotate(90deg); rotated the text in the preview, but it did not print so. The version of wkhtmltopdf used in Odoo 11 does not support this CSS property unless prefixed (and wkthmltopdf uses a Webkit rendering engine).
If this does not work in Odoo 10 or previous, you will need to see if you can update, or at least update wkhtmltopdf to a version that supports that property.
Hello usk70,
Definition and Usage
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
Syntax
transform: none|transform-functions|initial|inherit;
Property Values
rotate(angle) : Defines a 2D rotation, the angle is specified in the parameter
For Example,
I give the example using html and css3 and try this code in your odoo 10 qweb pdf report.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
</style>
</head>
<body>
<div>Hello </div>
<br>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the transform property.</p>
<p><b>Note:</b> Internet Explorer 9 supports an alternative, the -ms-transform property. Newer versions of IE support the transform property (do not need the ms prefix).</p>
<p><b>Note:</b> Chrome, Safari and Opera supports an alternative, the -webkit-transform property.</p>
</body>
</html>
I hope my answer is helpfull.
If any query so comment please.
How can I internationalize the button text of the file picker? For example, what this code presents to the user:
<input type="file" .../>
It is normally provided by the browser and hard to change, so the only way around it will be a CSS/JavaScript hack,
See the following links for some approaches:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://www.quirksmode.org/dom/inputfile.html
http://www.dreamincode.net/forums/showtopic15621.htm
Pure CSS solution:
.inputfile {
/* visibility: hidden etc. wont work */
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile:focus + label {
/* keyboard navigation */
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
pointer-events: none;
}
<input type="file" name="file" id="file" class="inputfile">
<label for="file">Choose a file (Click me)</label>
source: http://tympanus.net/codrops
Take a step back! Firstly, you're assuming the user is using a foreign locale on their device, which is not a sound assumption for justifying taking over the button text of the file picker, and making it say what you want it to.
It is reasonable that you want to control every item of language visible on your page. The content of the File Upload control is not part of the HTML though. There is more content behind this control, for example, in WebKit, it also says "No file chosen" next to the button.
There are very hacky workarounds that attempt this (e.g. like those mentioned in #ChristopheD's answer), but none of them truly succeed:
To a screen reader, the file control will still say "Browse..." or "Choose File", and a custom file upload will not be announced as a file upload control, but just a button or a text input.
Many of them fail to display the chosen file, or to show that the user has no longer chosen a file
Many of them look nothing like the native control, so might look strange on non-standard devices.
Keyboard support is typically poor.
An author-created UI component can never be as fully functional as its native equivalent (and the closer you get it to behave to suppose IE10 on Windows 7, the more it will deviate from other Browser and Operating System combinations).
Modern browsers support drag & drop into the native file upload control.
Some techniques may trigger heuristics in security software as a potential ‘click-jacking’ attempt to trick the user into uploading file.
Deviating from the native controls is always a risky thing, there is a whole host of different devices your users could be using, and whatever workaround you choose, you will not have tested it in every one of those devices.
However, there is an even bigger reason why all attempts fail from a User Experience perspective: there is even more non-localized content behind this control, the file selection dialog itself. Once the user is subject to traversing their file system or what not to select a file to upload, they will be subjected to the host Operating System locale.
Are you sure you're doing your user any justice by deviating from the native control, just to localize the text, when as soon as they click it, they're just going to get the Operating System locale anyway?
The best you can do for your users is to ensure you have adequate localised guidance surrounding your file input control. (e.g. Form field label, hint text, tooltip text).
Sorry. :-(
--
This answer is for those looking for any justification not to localise the file upload control.
You get your browser's language for your button. There's no way to change it programmatically.
much easier use it
<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
I could achieve a button using jQueryMobile with following code:
<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label>
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/>
Above code creates a "Upload" button (custom text). On click of upload button, file browse is launched. Tested with Chrome 25 & IE9.
To make a custom "browse button" solution simply try making a hidden browse button, a custom button or element and some Jquery. This way I'm not modifying the actual "browse button" which is dependent on each browser/version. Here's an example.
HTML:
<div id="import" type="file">My Custom Button</div>
<input id="browser" class="hideMe" type="file"></input>
CSS:
#import {
margin: 0em 0em 0em .2em;
content: 'Import Settings';
display: inline-block;
border: 1px solid;
border-color: #ddd #bbb #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font: bold 12px/1.2 Arial,sans-serif !important;
/* fallback */
background-color: #f9f9f9;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727));
}
.hideMe{
display: none;
}
JS:
$("#import").click(function() {
$("#browser").trigger("click");
$('#browser').change(function() {
alert($("#browser").val());
});
});
Actually, it is possible to customize the Upload File button with its pseudo selector: ::file-selector-button.
Check this for more info: MDN ::file-selector-button - CSS
Ok, this will probably be simple to resolve, but I am a graphic designer & not a developer so wondering if someone can help me out. I have played around with positions but not such luck.
So I have a header div with a backgroud image within it, but when I preview the html/css on ebay the background image within this div appears at the top of the browser (conflicting with the ebay standard header) & not being positioned relative to the container div it is placed in. So basically the bg image is outside the div. I need it to be contained with the div I want it in.
Any help would be appreciated. (This may be a repetitive topic, so sorry about that)
Code:
<div id="HeaderContainer">
<div id="BGHeader"></div>
</div>
#HeaderContainer{
position:relative;
}
#BGHeader {
position:absolute;
top:0;
height:420px;
width:100%;
background-image:url(imagehere.jpg);
background-repeat:repeat-x;
}
You should post your html and css. At least the relevant parts. But having not seen them I would say my best guess is you're using absolute positioning on the header.
You need to wrap that in another element that's relative positioned.
<div id="container">
<header>header here</header>
</div>
where your css is like so:
#container{
position:relative;
}
header{
position:absolute;
top:0;
left:0;
}
If I'm wrong about your needs or situation let me know and I can update.
There is manual Test case. We need to check the following.
Action
Check Promo Links.
Expected Results
Up to four links are displayed at the bottom of the app.
The links are divided by bars "|"
HTML Code ..
< html>
< div class="xxx-module-content">
< div class="xxx-content-block">
< div style="float: left; margin: 0pt 10px 15px 0pt; padding: 0px;"> <a from="hp_xxx" href="" >< img alt="South Miami" style="border: 0px none;" src="" title="South Miami" height="97" width="130" >< /a> </ div>< !-- BR -->< img src="" title="xxx Weather" height="16" width="125" >< br>< !-- BR -->< br>< !-- BR -->< a title="South Miami" href="" from="hp_xxx" >South Miami< /a>< br>< !-- BR -->Photo shot from Key Biscayne looking at Miami< br>By: Jimperdue21< br>< div style="clear: both; width: 100%; margin-bottom: 15px;">< a title="Submit Photo" from="hp_xxx" href="" >Submit Your Photo< /a> | < a title="Submit Video" from="hp_xxx" href="" >Submit Your Video< /a>< /div>
< /div>
< /div>
</html>
Please suggest what logic should be used here through JAVA+selenium RC.
Thanks a lot.
you can do this in number of ways. [ you did not give enough info.]
do you want to check the no. of Links ? or the links with particular Text ?
according to my understanding, you just wanted to count whether minimum of 4 links displayed at the bottom or not(text doesn't matter)
you should not depend on "|" devider. this comes under styling/formatting (if you want do the testing based on "|" character, you can do. but it is not usual)
you should find out
a) are all the links you want to check have ant Id's / names declared
: if so you can look for it straight. if not,
b) all of the links have the same parent with ID or Name or Any Particular Tag: if so,
make use of
String numberOfLinks = selenium.getEval("var parent = window.getElementsById('parent tag Id');parent.getElementsByTagName('a').length");// gives no.of links in that particular parent (usually a tage) element.
selenium.getEval("window.getElementsByTagName('parent tag name');") //use this also same as above.
another approach :
1) for(String link : selenium.getAllLinks() ) { //returns all the links on the current page
//here you could do according to your app. requirement. ex...
}
---if you want to check the links(not the number of links), better use that with Text as you know that text.
selenium.isElementPresent() or selenium.isTextPresent();
above you can use Locator either ID if not "link=text"
i hope one of these will help you . if not post your code (HTML)
Use isElementPresent with appropriate locators on all four links.