Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

How can I create a truly transparent TextBox (no white fill)? #3119

Answered by rk250ky
rk250ky asked this question in Q&A
Discussion options

I’m new to docx.js and need to insert a floating TextBox in my document header that has no fill and no visible border just the text itself. Every approach I’ve tried still produces a white background or outlines around the box.

Is there a built-in way in docx.js to make a Textbox completely transparent and remove its borders? Any guidance or simple examples would be really helpful. Thanks!
I am using 9.3.0 version.

You must be logged in to vote

maybe not best solution but fixed it by fetching and patching object xml. Replaced parts that needed change with this logic:

` const patchedXml = documentXml.replace(/<v:shape([^>]*?)>/g, (match, existingAttrs) => {
let attrs = existingAttrs;

 if (!/filled="f"/.test(attrs)) attrs += ' filled="f"';
 if (!/stroked="f"/.test(attrs)) attrs += ' stroked="f"';
 if (/style="([^"]*)"/.test(attrs)) {
 attrs = attrs.replace(/style="([^"]*)"/, (m, styleContent) => {
 let updatedStyle = styleContent;
 if (!/mso-wrap-style:/.test(updatedStyle)) updatedStyle += ';mso-wrap-style:behind';
 return `style="${updatedStyle}"`;
 });
 } else {
 attrs += ' style="position:absolute;z...

Replies: 1 comment

Comment options

maybe not best solution but fixed it by fetching and patching object xml. Replaced parts that needed change with this logic:

` const patchedXml = documentXml.replace(/<v:shape([^>]*?)>/g, (match, existingAttrs) => {
let attrs = existingAttrs;

 if (!/filled="f"/.test(attrs)) attrs += ' filled="f"';
 if (!/stroked="f"/.test(attrs)) attrs += ' stroked="f"';
 if (/style="([^"]*)"/.test(attrs)) {
 attrs = attrs.replace(/style="([^"]*)"/, (m, styleContent) => {
 let updatedStyle = styleContent;
 if (!/mso-wrap-style:/.test(updatedStyle)) updatedStyle += ';mso-wrap-style:behind';
 return `style="${updatedStyle}"`;
 });
 } else {
 attrs += ' style="position:absolute;z-index:-251658240;mso-wrap-style:none"';
 }
 return `<v:shape${attrs}>`;
});`
You must be logged in to vote
0 replies
Answer selected by rk250ky
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
1 participant

AltStyle によって変換されたページ (->オリジナル) /