Is it possible to set a margin around fields.
For example in image :
If I want to set lower (separated) checkBox in line with above once, is there a way to do it?
Marko
Start by inspecting the HTML code (with Chrome).
The code corresponding to the Checkbox Field is something like that:
<div class="form-field check-box-field"
data-modelclass="org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm$MainBox$ConfigurationBox$CheckboxField"
data-classid="CheckboxField_org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm"
id="scout.CheckBoxField[1-49]"
style="left: 0px; top: 14px; width: 1598px; height: 30px;"
>
<div class="field has-inner-alignment halign-left valign-top" style=
"left: 148px; top: 0px; width: 1420px; height: 30px;">
<div class="check-box" tabindex="0"></div>
<div class="label">
Checkbox
</div>
</div>
</div>
With CSS you can do anything possible:
.check-box-field {
background-color: red;
}
Now because you do not want to add some custom CSS style for all CheckBox Fields, you can define a custom Css-Class in your CheckBox:
#Order(4)
public class UnknownCheckBox extends AbstractBooleanField {
#Override
protected String getConfiguredCssClass() {
return "checkbox-under-listbox";
}
// ... Some Code ...
}
And now you add this CSS code:
.checkbox-under-listbox {
margin-left: 20px;
}
I have realized this example with the Widgets Demo Application (org.eclipse.scout.docs repository, releases/5.2.x branch). I added my css code in this file: org.eclipse.scout.widgets.ui.html/src/main/js/widgets/main.css (It is probably not the best approach to have everything in main.css).
You can deduce from this example how you can add an additional CSS/LESS module and macro to your application. This post: Inclusion of additional icons from font-awesome might also be usefull. You will have a main.css instead of a font.css.
WARNING: this is not state of the art.
At the end this is normal HTML development (single page application of course), so you can do what you want...
If you do not want to use the LESS compiler and the File preprocessor, you can simpelly add a normal CSS file in the folder:
<your_project>.ui.html/src/main/resources/WebContent
Let say:
<your_project>.ui.html/src/main/resources/WebContent/my_custom.css
Do not forget to include your CSS File between the <head> and </head> tags in the HTML index file:
<your_project>.ui.html/src/main/resources/WebContent/index.html
Something like:
<head>
<!-- some code -->
<link rel="stylesheet" type="text/css" href="my_custom.css">
<scout:stylesheet src="res/scout-module.css" />
<!-- some code -->
</head>
You can always use custom CSS: Let your field implement IStyleable and use setCssClass() to apply an appropriate CSS class. I'd try to avoid using such pixel pushing approaches as much as possible.
Related
Following the MDN documentation here: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/options_ui
I have setup the following manifest.json:
{
...
"options_ui": {
"page": "options.html",
"browser_style": true
}
...
}
Along with an options.html which contains this HTML:
<div class="switch">
<input checked id="switch1" type="checkbox" class="visually-hidden">
<label for="switch1"></label>
</div>
I expected my HTML to be decorated with styles similar to the Firefox style guide: http://design.firefox.com/StyleGuide/#/userselections
But there are none. No extra CSS file appears to be loaded.
There is a similar question here but the question is asking for documentation for styles. All I have found is that the styles simply aren't applied.
Does anyone know if I have this setup correctly? I can't tell if it's a bug.
Styles are correctly applied, you are probably just using the wrong classes.
Note that the old style guide is now deprecated in favor of the new Photon Design System.
These are the used stylesheets, just go to these URLs in Firefox to see the full source:
On Windows: chrome://browser/content/extension.css
On Mac: chrome://browser/content/extension-mac.css
Most of the styles assume you use the browser-style class. For example, here are some of the styles for the button element (on Windows):
/* stylelint-disable property-no-vendor-prefix */
/* Buttons */
button.browser-style,
select.browser-style {
background-color: #fbfbfb;
border: 1px solid #b1b1b1;
box-shadow: 0 0 0 0 transparent;
font: caption;
height: 24px;
outline: 0 !important;
padding: 0 8px 0;
transition-duration: 250ms;
transition-property: box-shadow, border;
}
Let's verify if the styles are actually applied.
Example, given an extension with the following manifest.json:
{
"name": "Options page",
"manifest_version": 2,
"version": "0.0.1",
"description": "Sample options page",
"options_ui": {
"page": "options.html",
"browser_style": true
}
}
And the following options.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>Just a text example page</div>
<div>
<input checked id="switch1" type="checkbox" class="visually-hidden">
<label for="switch1"></label>
<button class="browser-style">Test button</button>
</div>
</body>
</html>
This is the rendered options page:
Inspect the options page to verify the applied styles:
Paste about:debugging into the address bar
Select "Enable add-on debugging" on top
Click on the Debug link
Click "Ok" when prompted for allowing incoming connection
Now switch back to the Options page and inspect the "Test button" we added
As you can see, the button is correctly styled with the browser stylesheet.
I need to export a web page as pdf it's html content that I display in the browser, I want to give the user the capability to download it as pdf, I tried jsPDF but it doesn't support arabic
I need pdf not word, and I need to do it in the client side. please help
Thanks in advance,
Demo: http://jsfiddle.net/kumarrishikesh12/rwdL0rxh/
<script async src="//jsfiddle.net/kumarrishikesh12/rwdL0rxh/embed/"></script>
OR
function doit(){
if (!window.print){
alert("You need NS4.x to use this print button!")
return
}
window.print()
}
color:#C03;
font-size:18px; font-family:"Courier New", Courier, monospace;
}
p{ font-family:"Comic Sans MS", cursive;
font-size:15px; color:#066; text-align:justify;}
a{
text-decoration:none;
font-size:20px; }
<body>
<div style="float:right;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- sidebar300X600 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-1456458421931279"
data-ad-slot="1562820743"></ins>
</div>
<div style="width:500px; height:600px; border:2px #093 dashed; margin:0 auto; padding:10px;">
<h2>What is PHP?</h2>
<p>PHP is a server side scripting language commonly used for web applications</p>
<h2>How to include a file to a php page?</h2>
<p>we can include a file using "include() " or "require()" function with as its parameter..</p>
<h2>What's the difference between include and require?</h2>
<p>If the file is not found by require(), it will cause a fatal error and halt the execution of the script. If the file is not found by include(), a warning will be issued, but execution will continue.</p>
<h2>What Is a Session?</h2>
<p>It can be used to store information on the server for future use</p>
<h2>How to set cookies in PHP?</h2>
<p>Cookies are often used to track user information Syntax: Setcookie(name, value, expire, path, domain); eg:Setcookie("sample", "ram", time()+3600);</p>
<div align="center"><img align="middle" border="0" src="http://demos.2my4edge.com/2my4edge-print-page/icon-48-print.png" /> Click here to Print the Page</div>
</div>
</body>
I am trying to create an app with App Inventor which allows you to see files from a server and also download and share them.
I created 3 listviewers one that opens the file, the second allows to share it and the last allows you to download it. And It looks like this:
But I am looking to put all of this in the same column like this app do:
Does any one know what I have to do create a format like that?
Thanks.
Finally thanks to www.jquerymobile.com and some Taifun's tutorials I could create an interface similar to what I was looking for. I also achive how to recover he index selected by the user. Here I post the jquery code:
<!DOCTYPE html>
<html>
<head>
<title>0</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
.split-custom-wrapper {
/* position wrapper on the right of the listitem */
position: absolute;
right: 0;
top: 0;
height: 100%;
}
.split-custom-button {
position: relative;
float: right; /* allow multiple links stacked on the right */
height: 100%;
margin:0;
min-width:3em;
/* remove boxshadow and border */
border:none;
moz-border-radius: 0;
webkit-border-radius: 0;
border-radius: 0;
moz-box-shadow: none;
webkit-box-shadow: none;
box-shadow: none;
}
.split-custom-button span.ui-btn-inner {
/* position icons in center of listitem*/
position: relative;
margin-top:50%;
margin-left:50%;
/* compensation for icon dimensions */
top:11px;
left:-12px;
height:40%; /* stay within boundaries of list item */
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div id="searchPickPlace">
<script>
// get the table to display from the window.AppInventor object and split at new line
var urlArray = window.AppInventor.getWebViewString().split("\n");
// split at comma
var doc = document;
var fragment = doc.createDocumentFragment();
document.write('<ul data-role="listview" data-filter="true">');
for(i=0;i<(urlArray.length-1);i++){
j = i + 1; //+1 because app invetor array start at position 1
var rowArray = urlArray[i].split(",");
html = '<li> \
<a id="R_'+j+'" onClick="reply_click(this.id)" href="#">\
<h3>'+rowArray[1]+" "+j+'</h3>\
<p>description</p>\
</a>\
<div class="split-custom-wrapper">\
<a id="D_'+j+'" onClick="reply_click(this.id)" href="#" data-role="button" class="split-custom-button" data-icon="arrow-d" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>\
<a id="S_'+j+'" onClick="reply_click(this.id)" href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>\
</div>\
</li>';
document.write(html);
}
document.write('</ul>');
function reply_click(clicked_id)
{
//alert(clicked_id);
window.document.title = clicked_id;
setTimeout(function(){window.document.title = "0";}, 500);
}
</script>
</div>
</div><!-- content -->
</div><!-- /page -->
</body>
</html>
With this code I get this interface:
When you click a button the text label change to the number of the index you have clicked with a prefix depending if you have clicked the main area or the other buttons. The text label only change during less than a secon so if during this time you click again the interface wont recive the click. I think this is work perfect for what I want to do becaus I don't want any one that spam the button but If want an app where you can spam a button you will have to figure it out an other solution.
To do that you will need a clock. In thsi example I have obtained the table from my web site but you can create your own table with a text variable separeting the columns by comas and each line by "\n". I post the app invetor blocks down here:
I am aware that maybe there is a better solution if any one can find it out, I am open to listen new sugestions.
Thanks
I've tried to center vertically and horizontally my image while using image map with ImageMapster, but it didn't work.
http://eternidad.home.pl/index_proba.html
I've added :
#mapster_wrap_0 img{margin: 0 auto; align: center; vertical-valign: middle;}
But still image is on the bottom.
I also need to make onMousveOver effect, definied in the imageMapster's script,but I simply don't know how to do it - I have 4 areas, so I need sth like this, but it doesn't work.
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var ImgAry= ['str_glowna5.png','str_glowna5pl.png','str_glowna5en.png','str_glowna5es.png','str_glowna5ru.png']
var MapAry=[];
for (var zxc0=0;zxc0<ImgAry.length;zxc0++){
MapAry[zxc0]=new Image();
MapAry[zxc0].src=ImgAry[zxc0];
}
function Swap(id,nu){
document.getElementById(id).src=MapAry[nu].src;
}
/*]]>*/
</script>
//
<AREA SHAPE="RECT" coords="24,509,85,566" HREF="opis_ru.htm" TITLE="Russian" onmouseover="Swap('img',4);" onmouseout="Swap('img',0);" >
Please, help
Generally speaking to use CSS on an image that is bound with imagemapster you should apply styles to a wrapper, and not the image itself e.g.
-- CSS
.mapster-wrapper {
style="margin: 0 auto; align: center; vertical-valign: middle;"
}
-- HTML
<div class="mapster-wrapper">
<img usemap="..." src="...">
<div>
ImageMapster has to tightly control the CSS on the image itself in order for its layered effects to work. Just apply all your styling to your own wrapper around of the image.
It's possible to add a custom class to the wrapper that imagemapster creates:
$('#my_img').mapster({
(...)
wrapClass: 'imageMapster_wrapper'
});
then you just do
.imageMapster_wrapper {
margin:0px auto;
}
in your CSS, as Jamie Treworgy already suggested.
Sorry, total Juice UI newbie, and really a web app newbie as well. Having trouble getting the simple example working from the Juice UI website. It is supposed to illustrate how easy it is to make a drag-drop example, but I get a lot of errors which makes me think I'm missing something really basic. I'm trying to use the Droppable control, documented here:
http://juiceui.com/controls/droppable
The draggable example worked fine, so I've gotten that far, but when I paste the droppable example text into my C# web application, I get errors that the style needs to be outside the form, outside the body, etc - I keep moving it up the chain. Eventually it says "element style needs to be in a parent element" - not sure where to put it if I can't put it on the page. I suppose in a .css file? Also, it says the tag is missing a required attribute 'type'.
Any help would be much appreciated!
<style>
.draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
.droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function(){
$( "#_Default" ).droppable( "option", "drop", function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
);
});
</script>
<asp:panel ID="_Draggable" CssClass="draggable ui-widget-content" runat="server">
<p>Drag me to my target</p>
</asp:panel>
<juice:draggable TargetControlID="_Draggable" runat="server"/>
<asp:panel ID="_Default" CssClass="droppable ui-widget-header" runat="server" ClientIDMode="Static">
<p>Drop here</p>
</asp:panel>
<juice:droppable TargetControlID="_Default" runat="server"/>
The document you're reviewing is a partial document. I believe it assumes you have the rest of the document already authored:
<!DOCTYPE html>
<html>
<head>
<title>Droppable Example</title>
</head>
<body>
<!-- Your Code Here -->
</body>
</html>
Okay, a little research revealed:
element always goes inside the section - duh
the type attribute for always needs to be type="text/css",
so I added that
Added the type attribute for the (type="text/javascript")
Another error popped up, conflict with the _Default id in the
example, same as the Default class name when you create a new web
application. Bad choice of element ID for an example in which the
user will likely be doing exactly what I was doing, creating a
default web app and pasting in the code and expecting it to run.
Don't know why none of these errors were caught when this example was written, but kind of frustrating first experience with Juice UI. Thanks all for your time and responses.