I'm trying to change the MPart tab background when an MPart is activated and selected. When another MPart from another MPartStack is selected, the style of the first MPart need to be changed back to its default.
When the MPart is selected is should looks like:
But when the MPart is not in focus is should looks like:
I tried different css styling but non of them works. Now all the MParts are always highlighted. My CSS looks like the following:
.MPartStack.active {
swt-selected-tabs-background: #E5EDFC #99BAF3 100%;
swt-unselected-tabs-background: #F0F0F0;
}
.MPartStack
{
swt-selected-tabs-background: #E5EDFC #99BAF3 100%;
swt-selected-tabs-background: #F0F0F0;
}
.MPartStack.active.noFocus {
swt-selected-tabs-background: #F0F0F0;
swt-unselected-tabs-background: #F0F0F0;
}
.MPartStack > CTabItem {
color : black;
swt-selected-tabs-background: #E5EDFC #99BAF3 100%;
swt-selected-tabs-background: #F0F0F0;
}
CTabItem:selected { font-weight: bold; }
I tried everything from another StackOverFlow post but it doesn't work.
Can someone help me with this? My customer asks this feature to make the UI more user friendly.
You must set the swt-tab-renderer to make the swt-* properties work:
.MPartStack {
swt-tab-renderer: url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering');
}
These are the basic settings used by the standard Eclipse rendering:
.MPartStack {
swt-tab-renderer: url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering');
swt-selected-tab-fill: INACTIVE_TAB_BG_START INACTIVE_TAB_BG_END 100% 100%;
swt-unselected-tabs-color: INACTIVE_UNSELECTED_TABS_COLOR_START INACTIVE_UNSELECTED_TABS_COLOR_END 100% 100%;
swt-outer-keyline-color: INACTIVE_TAB_OUTER_KEYLINE_COLOR;
swt-inner-keyline-color: INACTIVE_TAB_INNER_KEYLINE_COLOR;
swt-tab-outline: INACTIVE_TAB_OUTLINE_COLOR;
padding: 0px 2px 2px;
swt-shadow-visible: false;
swt-mru-visible: false;
color: INACTIVE_TAB_TEXT_COLOR;
}
.MPartStack.active {
swt-selected-tab-fill: ACTIVE_TAB_BG_START ACTIVE_TAB_BG_END 100% 100%;
swt-unselected-tabs-color: ACTIVE_UNSELECTED_TABS_COLOR_START ACTIVE_UNSELECTED_TABS_COLOR_END 100% 100%;
swt-outer-keyline-color: ACTIVE_TAB_OUTER_KEYLINE_COLOR;
swt-inner-keyline-color: ACTIVE_TAB_INNER_KEYLINE_COLOR;
swt-tab-outline: ACTIVE_TAB_OUTLINE_COLOR;
swt-shadow-visible: false;
}
Replace values like INACTIVE_TAB_BG_START with the colors you want.
Related
I am trying to convert a HTML page to a PDF with the help of iText library. I do not have a lot experience and I am failing to get my image added in the PDF.
First I read a HTML template (that I use for the basis). The image is placed with the <img> tag as follows <img src="http://clipartmag.com/image/iron-man-face-drawing-6.png" class="avatar-image">. I retrieve a Document class from that template. I add the wanted content to the Document instance. Once that is done, I retrieve the html and use it to generate the PDF.
String resumeFilePath = String.format(RESUME_FILE_PATH, userProfileBean.getFirstname(), userProfileBean.getLastname());
Document resumeAsHtml = createHtmlDocument(userProfileBean);
HtmlConverter.convertToPdf(resumeAsHtml.html(), new FileOutputStream(resumeFilePath));
File newResume = new File(resumeFilePath);
In the testing phase, I even created the HTML page separately to see everything is in place - resumeAsHtml.html(). The web page had the image in the page. But when I call
HtmlConverter.convertToPdf(
resumeAsHtml.html(), new FileOutputStream(resumeFilePath));
the created PDF is missing the image. I also get 3 errors in the logs:
2019-09-29 10:06:22,678 ERROR c.i.s.c.p.s.CssParserStateController:495 - The rule #keyframes is unsupported. All selectors in this rule will be ignored.
2019-09-29 10:06:22,944 ERROR c.i.s.r.r.ResourceResolver:146 - Unable to retrieve image with given base URI (file:/Users/jklancic/dev/custom/resume/) and image source path (http://clipartmag.com/image/iron-man-face-drawing-6.png)
2019-09-29 10:06:22,947 ERROR c.i.h.a.i.DefaultHtmlProcessor:356 - Worker of type com.itextpdf.html2pdf.attach.impl.tags.DivTagWorker unable to process com.itextpdf.html2pdf.attach.impl.tags.ImgTagWorker
Any idea what could be wrong? Here is the template that contains the image already:
<!DOCTYPE html>
<html>
<head>
<style>
#resume-header {
margin-bottom: 25px;
}
#resume-body {
}
#clear {
clear: both;
}
.header-left {
width: 29%;
height: 160px;
float: left;
}
.header-right {
padding-top: 10px;
width: 70%;
height: 160px;
float: right;
}
.header-right h1,h2,h3 {
text-align: left;
font-family: verdana;
}
.header-right h1 {
color: #4065a3;
font-size: 34px;
margin: 5px 0px 15px 0px;
}
.header-right h2 {
font-size: 22px;
margin: 5px 0px 5px 0px;
}
.header-right h3 {
font-size: 10px
}
.avatar-image {
display: block;
margin-left: auto;
margin-right: auto;
height: 160px;
}
.info {
margin: 0px 20px 0px 0px;
font-family: verdana;
font-size: 10px
}
span.section-header {
color: #507fcc;
font-family: verdana;
font-size: 16px;
margin: 0px 0px 0px 10px;
}
p.section-title {
color: #000000;
font-family: verdana;
font-size: 12px;
}
p.section-subtitle {
color: #9aa3b3;
font-family: verdana;
font-size: 12px;
margin-left: 10px;
}
p.text {
color: #000000;
font-family: verdana;
font-size: 10px;
}
ul.list {
color: #000000;
font-family: verdana;
font-size: 10px;
padding-left: 25px
}
div.web-profile {
margin-top: 10px;
}
div.section-content {
margin-bottom: 20px;
}
div.bottom-border {
border-bottom: 1px solid #507fcc;
}
.primary {
color: #507fcc;
}
.small-top-margin {
margin: 2px 0px 0px 0px;
}
.small-bottom-margin {
margin: 15px 0px 2px 0px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
</head>
<body>
<div id="resume-header">
<div class="header-left">
<img src="http://clipartmag.com/image/iron-man-face-drawing-6.png" class="avatar-image">
</div>
<div class="header-right" id="basic-info">
</div>
<div id="clear"></div>
</div>
<div id="resume-body">
<div class="bottom-border" id="education-section">
<i class="fas fa-graduation-cap primary"></i><span class="section-header">Education</span>
</div>
<div class="bottom-border" id="job-section">
<i class="fas fa-briefcase primary"></i><span class="section-header">Work</span>
</div>
<div class="bottom-border" id="skill-section">
<i class="fas fa-pencil-ruler primary"></i><span class="section-header">Skills</span>
</div>
</div>
</body>
</html>
iText has a very high number of bugs. Don't comment on the version you are using, but the resource loader has several problems that must be corrected by overloading it (it doesn't know how to load images from base64, it doesn't know how to load resources with 302 redirection, ...).
In your specific case, the error indicated is:
Unable to retrieve image with given base URI (file:/Users/jklancic/dev/custom/resume/) and image source path (http://clipartmag.com/image/iron-man-face-drawing-6.png)
This suggests that iText is trying to access the address "file:/Users/jklancic/dev/custom/resume/http://clipartmag.com/image/iron-man-face-drawing-6.png". Debug at c.i.s.r.r.ResourceResolver:146 to confirm.
If you are able to upgrade to a new version, try to do so, otherwise you should overload the resource loader to fix it.
Remember, you should determine first the exact problem (currently like a bad base+path combination problem), anyway, I fixed a lot of related problems implementing our custom ITextUserAgent as follows:
final ITextRenderer renderer = new ITextRenderer();
{
final TextUserAgent userAgent = new TextUserAgent(renderer.getOutputDevice());
renderer.getSharedContext().setUserAgentCallback(userAgent);
userAgent.setSharedContext(renderer.getSharedContext());
}
You must to implement your custom TextUserAgent to fix your specific problem (iText is not free now):
public class TextUserAgent extends ITextUserAgent {
public TextUserAgent(ITextOutputDevice outputDevice) {
super(outputDevice);
}
#Override
public ImageResource getImageResource(final String uri) {
final ImageResource legacy = super.getImageResource(uri);
if (legacy != null && legacy.getImage() != null) {
return legacy;
}
return alternativeImageResource(uri);
}
...
I use this code for my web view
#font-face {
font-family: IRANSans;
src: url("\file:///android_asset/fonts/IRANSansWeb.ttf\")
}
body {
text-align: justify;
direction: rtl;
font-family: IRANSans;
}
img {
max-width: 100%;
height: auto;
}
figure {
max-width: 100%;
height: auto;
}
iframe {
width: 100%;
}
everything work for me with this code except font family.
I mean text is justify and rtl very well, but my font is not what I want
I put my ttf file in assets > fonts
You don't need to set the linking to the font like that. How do you load the css in your html? Not like : file:///android_asset/css/someCSSFile.css
I think you linked like this: css/someCSSFile.css.
So will you try to link to the font use this: fonts/IRANSansWeb.ttf
#font-face {
font-family: IRANSans;
src: url("fonts/IRANSansWeb.ttf")
}
if that doesn't worked can show a screenshot of structure of your maps?
Make sure you have put your font file in right path i.e. app/src/main/assets/fonts
I know how to add styles in Vaadin and I've done multiple stylings in my css and added the style in the code succesfully, but this one eludes me.
I tried the following:
in the css I have the following style:
.v-caption-mystyle .v-captiontext {
font-size: 13px !important;
font-weight: bold;
color: $dark-grey;
}
In the code I try to set it in two following ways and nothing happens:
postalCodeLabel= new Label(currentAddress.getPostalCode());
postalCodeLabel.setCaption("Postal code"));
postalCodeLabel.addStyleName("v-caption-mystyle");
postOfficeLabel = new Label(currentAddress.getPostOffice());
postOfficeLabel.addStyleName("v-caption-mystyle");
postOfficeLabel.setCaption("Post office"));
EDIT: Vikrant Thakur's answer works.
In my case also this worked:
.v-caption-invoiceaddress-label-caption .v-captiontext {
font-size: 13px !important;
font-weight: bold;
color: $dark-grey;
}
And in the Java:
postalCodeLabel = new Label(currentAddress.getPostalCode());
postalCodeLabel.setCaption("myCaption"));
postalCodeLabel.addStyleName("invoiceaddress-label-caption");
Here is the code for theme scss file:
#import "../valo/valo.scss";
#mixin mytheme {
// Insert your own theme rules here
.v-caption-mystyle {
.v-captiontext {
font-size: 13px;
font-weight: bold;
color: red;
}
}
#include valo;
}
And, here is the Java code:
Label label = new Label("This is the label text");
label.setCaption("This is the label caption");
label.addStyleName("mystyle");
I'm assuming PLabel is either a typo or a custom implementation of the Label class. If that is the case, it's simply that even though you're setting the caption on the Label class, it's CSS class is v-label. So your CSS should look like this.
.v-caption-mystyle {
font-size: 13px !important;
font-weight: bold;
color: $dark-grey;
}
I am using login form(in vaadin). I used CSS style to get the background color. The problem is that its not showing the effect to 100% of the page.
I did "inspect" on chrome and found that "v-verticallayout v-layout v-vertical v-widget v-has-width" has no height at element.style. If I add height to element.style to 100%( on the inspect tool of chrome), the effect can be seen to full page. How can I fix this in CSS
following is my CSS
.dmr{
#include valo;
background-image: url(sciome-vector-logo.png);
background-position: left top;
background-repeat: no-repeat;
background-size: 120px 80px;
/* Applies to every page */
html {
height:100%;
margin-bottom:1px ;
color:black;
}
body {
overflow-y: scroll;
}
.v-slot {
overflow: hidden;
height:100%;
}
.entire_div {
text-align: center;
height: 100%;
}
.v-verticallayout-entire_content_div {
text-align: center;
height:100%;
width:100%;
}
.div{
height: 100%;
}
.entire_content_div {
margin: auto;
height: 100%;
}
/* Main view properties */
.v-slot-page_content_div {
height: calc( 100% - 55px );
overflow-y: auto;
}
.page_content_div {
text-align: center;
min-height: 80vh;
height: 100%;
}
.v-slot-login {
height: 100%;
}
}
Based on the CSS you've provided, none of those selectors are selecting the element you added height: 100%; to the element.style in the browser. Something like this might select it:
.v-verticallayout {
height: 100%;
}
I also noticed you have a .div selector in your CSS but I'm thinking you meant the selector div, not a class called div.
EDIT:
Changed the selector suggested to be more specific so it doesn't override the other elements with the same classes that OP was running into issues with.
This on solution of many where you'd just trickle down till you get specific enough that it won't affect your other elements.
div.v-verticallayout.v-layout.v-vertical.v-widget.v-has-width {
height: 100%;
}
I have sorted columns in displaytag using "sortable=true"....But I want to display the sorting icons at the extreme right of the column...How can I do this?
Here I have mentioned only one column for your reference...
<display:column property="issuerName" scope="col" sortable="true" title="${issuerName}" headerClass="hixTableHeader" class="displayTagtd" />
CSS code :
th.sortable a {
background-image: url(../images/common/header/arrow_off.png);
background-repeat: no-repeat;
background-position:right;
text-decoration: none;
padding-right:25px;
padding-left: 25px;
}
th.order1 a{
background-image: url(../images/common/header/arrow_down.png);
background-position:right;
background-repeat: no-repeat;
text-decoration: none;
padding-right:25px;
padding-left: 25px;
}
th.order2 a{
background-image: url(../images/common/header/arrow_up.png);
background-repeat: no-repeat;
text-decoration: none;
background-position:right;
padding-right:25px;
padding-left: 25px;
}
Try putting it on <th> instead of <a>. <a> is a display:inline element so it isn't stretching the whole size of the <th>.
th.sortable {
background-image: url(../images/common/header/arrow_off.png);
background-repeat: no-repeat;
background-position:right;
}
th.order1 {
background-image: url(../images/common/header/arrow_down.png);
background-position:right;
background-repeat: no-repeat;
}
th.order2 {
background-image: url(../images/common/header/arrow_up.png);
background-repeat: no-repeat;
background-position:right;
}
Alternatively you could apply the following, this will have the <a> fill the <th> which is probably preferable as you will be able to click anywhere on the <th> to activate sorting.
th a {
display:block;
width:100%;
height:100%;
}
Update
Make sure you keep your current styles as well, to keep underlines you need to make sure it still targets your <a> tags. You can add this to target all <a> tags within <th> tags.
th a {
text-underline:none;
}
you might have to change the template file that contains the html code for <display:column>