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>
Related
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>
I created jqueryui dialog $('#mydialog').dialog({...});
I want to set titlebar attributes. I know I can do this with CSS and works fine:
.ui-dialog-titlebar {
font-size: 10pt;
}
What if I want to do it for a specific dialog? I have tried below but it doesn't work. Thanks!
#mydialog.ui-dialog-titlebar {
font-size: 10pt;
}
So here is how to do it:
http://jsfiddle.net/7VW4V/
Basically add an id to the dialog widget (http://api.jqueryui.com/dialog/#method-widget) as follows:
$('#dialog').dialog('widget').attr('id', 'dialogId');
Then the CSS is straightforward
#dialogId .ui-dialog-titlebar {
background:red;
}
I am having trouble resizing a SVG to fit inside a jQuery Mobile page.
This should work on mobile devices and also in a normal browser.
Please see this example.
<div data-role="content">
<object type="image/svg+xml" data="http://simonamby.dk/wdhtest/img/A_0.svg?id=1"></object>
CSS:
#map .ui-content {
position : absolute;
top : 40px;
right : 0;
bottom : 30px;
left : 0;
}
Bonus: How do I get the fading animation to work in Internet Explorer? Only works in Chrome right now.
You just need to apply the CSS to the object tag:
#map-page object {
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
}
Updated FIDDLE
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