If I write html to a Jquery UI dialog box it is naturally centred. I add a DIV and use some CSS ...
#printReport {
text-align: left;
font-family: Tahoma;
font-size: 12px;
width: 880px;
}
... and then
$("#printReport").empty().append(results);
to put text on the page - and it does what I want in FF/Chrome etc (left justified) ... but in IE (V7 and V8) the text is still centred.
Am I missing something?
Thanks
I am assuming some of the parent div's are set to be centered,
eiter by using the deprecated tag or by doing something like:
margin: 0 auto
in order to make it work you should do something like this:
body {
text-align: center
}
#printReport {
width: 880px;
margin: 0 auto;
text-align: left
}
hope that helps.
As per the comment, it was a problem in the CSS and nothing to do with dialog .. sorry
Related
I am simply showing a button like this:
<el-button plain circle icon="el-icon-refresh"></el-button>
But the icon inside the button is too small. Is there a way to enlarge the icon only? I am using Vue.js for my project.
Element-ui doesn't support this by it's API. However the icon attribute places a class on i-element within a button. you are able to add a second class and add you own styling.
<el-button plain circle icon="custom-icon el-icon-refresh"></el-button>
CSS:
.custom-icon {
font-size: 2rem;
}
This works for me:
HTML
<el-button plain circle icon="el-icon-refresh" class="custom-icon"></el-button>
CSS
.custom-icon {
font-size: 2rem;
}
This worked for me.
HTML:
<el-button icon="el-icon-circle-plus-outline">Add</el-button>
CSS:
<style lang="less" scoped>
/deep/ .el-icon-circle-plus-outline {
font-size: 15px;
}
</style>
I was playing around with the SCSS and Variable Classes in order too customize my Progress bar the same as my theme.
The progress bar styling is Blue and White and when adding styling it changes to Green & Grey no matter what styling I use.
I used these two Webkit Pseudo classes:
-webkit-progress-bar
-webkit-progress-value
"It worked in the browser but not on the device."
Is there any special way to do this or am I just missing it.
EDIT
HTML
<ion-item class="item-stable" ng-click="navtoPhases()">
<div class="row">
<div class="col"><h2>Chassis Prep</h2></div>
<div class="col"><progress class="progress" max="100" value="{{ ph[0].Chassis }}"></progress></div>
</div>
</ion-item>
SCSS
progress.progress{
// -webkit-progress-bar: #ffc900 !important ;
// -webkit-progress-value:#ef473a !important ;
color:#33cd5f;
background-color:#3299E6;
width: 50;
}
The changes can be seen on this jsfiddle page I am using Google, other browsers may defer like fox and opera.
There is a nice article here, that explains how you can override styling of progress bars in CSS. In the article, several ways of overriding the default styling of progress bars are discussed, but the only one you really need is the one for Chrome/Webkit, which I have posted below for your convenience.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
progress[value]::-webkit-progress-bar {
background-color: #33cd5f;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-color: #3299E6;
border-radius: 2px;
}
I have created a select menu next to a button. I wonder how can I get the select menu be at the same Y of the button? (Ideally I would like it to be of the same height too but that is another thing I guess...)
As the shown code I have no configuration other than the select width:
HTML:
<div>
<button>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
jqueryui JS
$('button').button();
$('select').selectmenu({
width: 120 // Needed to show see options
});
Current Result:
Fiddle that show the problem: https://jsfiddle.net/9xv7jqn4/2/
Is this a bug or a setting I am missing? Any help is appreciated
EDIT:
Thank you for the answers, I am still testing them in my code... I am also interested in know why this happens? Why the selectemenu is taking more space than it looks? Is this a bug of selectmenu widget?
Maybe with this css:
display: inline-flex;
vertical-align: middle;
Your fiddle with the changes: https://jsfiddle.net/9xv7jqn4/3/
Based on thread: "jQuery ui selectmenu vertical position offset (relatively to buttons in this line) " and suggestions here too I ended up adding a couple of rules that fix my case.
I don't know why but ui-selectmenu-button is not vertical-aligned as other buttons. Also decreased the padding of inner text so it looks almost (not exactly) the same height as other buttons.
.ui-selectmenu-button {
vertical-align: middle;
}
.ui-selectmenu-button .ui-selectmenu-text {
padding-top: 0.3em; padding-bottom: 0.3em;
}
You can use
vertical-align: top;
for your button like here: https://jsfiddle.net/9xv7jqn4/4/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.one{
vertical-align: top;
}
<div>
<button class='one'>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
Another good option is to add wrappers like here: https://jsfiddle.net/9xv7jqn4/6/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.w{
display:inline-block;
vertical-align: middle;
}
<div>
<div class='w'>
<button>button</button>
</div>
<div class='w'>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
</div>
Is there any way to auto resize the chart to auto fit the page when printing?
It does not fit the page when I'm printing, check the image, can you see the right side of the page? It's cut. It's a common A4 page.
Btw, I'm using the print button from the chart.
Thanks :)
It looks like a bug, reported: https://github.com/highslide-software/highcharts.com/issues/2088
#page {
size: A4;
margin-top: 9mm;
margin-bottom: 8mm;
margin-left: 2mm;
margin-right: 2mm;
}
#media print {
body {
width: 780px;
overflow: hidden;
}
#container {
max-width: 780px;
}
}
paste this in css file.
I'm trying to implement the latest sIFR. But I can't get even the simplest of tests to work. My test page is at http://www.kellymitchelljewelry.com/testsifr.asp. There should be an sIFR-generated line that says "2nd line" between the first and third lines. I'm using the examples provided on the sIFR page exactly.
My html looks like this:
<html>
<head>
<title>Kelly Mitchell Fine Jewelry</title>
<link rel="stylesheet" href="sifr.css" type="text/css">
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>
</head>
<body>
First Line<br><br>
<h1>Second Line</h1>
<br>Third Line<br><br>
</body>
</html>
My sifr-config.js looks like this:
var cgoth = { src: 'cgoth.swf' };
sIFR.activate(cgoth);
sIFR.replace(cgoth, {
selector: 'h1'
});
My sifr.css file looks like this:
#media screen {
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt;
padding: 0pt;
overflow: auto;
letter-spacing: 0px;
float: none;
}
}
#media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
#media screen {
.sIFR-active h1 {
font-family: Verdana;
visibility: hidden;
line-height: 1em;
}
*/
I've tried recreating my swf file just in case I did something wrong, and closely followed the instructions to make sure I didn't leave anything out.
Can someone help me figure what I'm doing wrong?
Tom
I don't think your Flash movie is correct, opening it directly should show "Rendered with sIFR 3" text. Make sure it was exported correctly.
I have never been able to get a .swf file exported from Flash to work with sIFR. I've always ended up having to use the online sIFR generator: http://www.sifrgenerator.com/wizard.html
I don't know if my version of Flash (CS3) is just not compatible with sIFR or what... I do always save as version 8 like it says to, and make sure every setting is as it should be, but no luck. However, using that generator always seems to solve it. So if your Flash is jinxed to, you might want to give it a try.