https://netsuiteprofessionals.com logo
Join Slack
Powered by
I'm running into a CSS issue I was curious if anyo...
# suitescript
s
I'm running into a CSS issue I was curious if anyone else has figured a workaround for. I'm using bootstrap & telerik to style my html. So when I write 
context.response.write({output: html});
my html/css works great. However, if I enter the below code, my html//css is off. Has anyone figured a fix so that the html/css is not affected?
Copy code
let form = serverWidget.createForm({
    title: 'Angular Suitelet Demo'
});

let field = form.addField({
    id: 'custom_inline',
    type: serverWidget.FieldType.INLINEHTML,
    label: 'Inline'
});

field.defaultValue = html;

context.response.writePage(form);
j
what CSS isn’t working?
some stuff you have to use 
!important
for
s
I'm using bootstrap & Telerik 3rd party css platforms
j
Try using Chrome Devtools to debug
Is it an external CSS file?
or inline CSS
s
As you can see, the date picker looks all funky
It's external, but the styles.css file is a file that exists in netsuite and used via 
<link rel="stylesheet" href="${appInfo.cssFile}">
j
I would right-click and inspect, and compare with what’s going on when you do it the way that “works”
see what’s different between teh two
s
I did. They are so similar. If I uncheck everything but the telerik/bootstrap it stays the same. So weird
j
must be some sort of conflict between the CSS that the NetSuite 
form
uses and your Telerik stuff. I haven’t worked with bootstrap or telerik so can’t help 😞
b
take a look at the warning/errors in the source using your console
the html generated by the suitelet already has things like the document declaration and head
s
Nothing in the console that is of usefulness
b
what is the html page you write
s
Copy code
const html = `<!DOCTYPE html><html lang="en"><head>
          <meta charset="utf-8">
          <title>SalesOrderSplit</title>
          <base href="/">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="icon" type="image/x-icon" href="favicon.ico">
          <link rel="stylesheet" href="${appInfo.cssFile}"></head>
          <link href="${appInfo.config}"></head>
        <body>
          <app-root></app-root>
        <script src="${appInfo.runtimeFile}" type="module"></script><script src="${appInfo.pollyFillsFile}" type="module">
        </script><script src="${appInfo.mainFile}" type="module"></script>
message has been deleted
b
the actual source of the page
you should have a 
View Page Source
menu option somewhere
s
Found where it's happening at least. 
transform: translateY(40926px);
. The translate is off for some reason
oh man, the page source is huge when wrapping it inside the form
b
wont really matter, paste the source into something like https://validator.w3.org/#validate_by_input
👍🏼 1
the likely cause here is that your meta element no longer works since it isnt in a head element anymore
j
I fairly regularly add my own CSS to Suitelet forms by dumping JS in an 
INLINEHTML
field something like this:
// JavaScript to load the CSS onto the page. html = ` <script> var css_link = document.createElement(“link”); css_link.rel = “stylesheet”; css_link.href = “path/to/my/css/file”; document.head.appendChild(css_link); </script>`;
not sure if something like that would work for you
m
I usually use an iframe to get around NetSuite's CSS stuffing up things
❤️ 1
s
@michoel that sounds very promising. Would you be able to provide an example for me please?
@jen The css is there, it's just off. Whatever telerik uses to make it's calc's and transforms, is being throw off slightly
@michoel If you have a better way, I'd love to hear it, but this is what I did and it's working!
Copy code
suiteletUrl = `${suiteletUrl}&salesOrderId=${salesOrderId}`;

const appWrapper = `<iframe style="position: absolute; height: 100%; width:100%; border: none" src="${suiteletUrl}&${_getAppHtmlProperty}=true"></iframe>`
This calls back to the suitelet, in which I then return the html when the "loadApp" is true.
2 Views
Open in Slack
PreviousNext
Powered by