We are running Domino 8.5.3 (planning to go to 9 asap). I have an application that consists of viewpanels with searches. My viewpanel displays a lot of columns and I would like to have some control over the size of the individual columns. I have been everywhere and tried setting several different column styles using a variety of inline and css techniques, but I can't seem to override whatever the "xspTextViewColumn" is doing.
Here are some of the website pages that I have consulted:
http://blog.hughesconnect.com/?p=138
Issue with CSS width and views columns and headers
http://iswwwup.com/t/df2dfb59c014/how-can-i-left-align-the-extra-columns-in-an-xpages-data-view.html
I do not have access to dojo or extension libraries.
Thanks.
---Lisa&
You can add width:100px; to the style property of the view column you want to adjust. By using the style property it will render as a style attribute in the HTML which takes precedence over any CSS rules contained in classes.
Related
I am working on an existing code base that uses bootstrap. The existing code base has a single large CSS file (apart from bootstrap) that overrides many attributes from bootstrap.
I just want to disable all the CSS values from that large CSS file for a particular element.
largecss.css
<div disableCSSfromLargeCSS.css> </div>
Is this possible? Without manually checking the attributes and overriding them?
Try $('#element *').removeAttr('style') or $('#element').children().removeAttr('style') to remove all applied css to that div.
I'm using phantom-html2pdf to generate pdfs dynamically in a Node app. The conversion works but the layout is completely off. For example the html document is a form that consists of sections sometimes with two columns side-by-side.
I am using MUI css for some styling and layout which has been in-lined into the HTML before the PDF conversion. After the PDF conversion everything is in one column, despite the fact that I have divs with class="mui-col-md-6" which render fine in the browser.
I've tried adding custom CSS and adding pageSize values but no matter what I do it's not producing the result I'm after.
Here is what I have in options at the moment. Note I've passed through some css where I try to "reshape" the document to make it more like the original HTML but it seems to have limited effect on the final layout. Also I set a negative border which helps a bit but doesn't remove PDF border completely as I'd like.
var pdfOptions = {
html: html, // html with in-lined MUI styles - columns not rendering
css: pdfCss, // This CSS seems to have has limited control over final layout
paperSize: {format: 'A4', orientation: 'portrait', border: '-2cm'}
}
If anyone has any advice on how to get more control over the layout to make it look more like my HTML I'd be very grateful. Cheers!
UPDATE
It appears that phantom-html2pdf ignores any inline css and only applies css passed in as part of the options. Again, I'm open to any pointers so correct me if I'm wrong or missing some steps to have more control over the final layout.
Is it good practice to use multiple .container and .container-fluids? (not nested)
I'd like to create some segments of my page with max-width and some without any.
You can use any number of '.containers' and '.container-fluid''s in a page. Beware when you are using nested '.container' since its having fixed widths at breakpoints. The examples in the bootstrap site itself have used multiple containers. So you can use..
This is well answered here: Multiple and/or nested Bootstrap containers?
Usually, with Bootstrap I use more than one container: one for the main content itself, the normal one; one inside the .header; and one inside the .footer.
You can use both, and also nested if required in your layout web page.
I'm currently using a .container for each section on my website. It's based on this template: http://blackrockdigital.github.io/startbootstrap-stylish-portfolio/.
As long as you don't nest them you'll be good!
I am trying to send an email with html content but I am observing displaying issues.
The following does not get displayed properly in width by Microsoft Office Outlook, any hint?
<div style="width: 650px; border: 1px solid blue">hello</div>
use tables, and on <td> use width="" propery and also style="width:" ... for some clients are reading the width property and others reads the style property
You must reconsider to change the email template to be tables within table and with inline styling
here is a sub link to problem which you may encounter
How to align several tables in td in center
HTML divs and spans don't work particuarly well in office outlook. You are better off using tables for this display.
Reference: "...The best way to combat these issues would be to use a table-based layout." https://litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients
Here is some further information taken from another answer:
"- JavaScript - completely off limits. If you try, you'll probably go straight to email hell (a.k.a. spam folder). This means that LESS is also out of bounds, although you can obviously use the resulting CSS styles if you want to.
- Inline CSS is much safer to use than any other type of CSS (embedded is possible, linked is a definite no). Media queries are possible, so you can have some kind of responsive design. However, there is a long list of CSS attributes that don't work - essentially, the box model is largely unsupported in email clients. You need to structure everything with tables.
There are loads of answers on SO, and lots of other links on the internet at large.
http://www.emailology.org/
http://www.email-standards.org/
http://www.campaignmonitor.com/css/
http://www.getfractal.com/ [DISCLOSURE - I used to work at Fractal.]"
Reference:
Has anyone gotten HTML emails working with Twitter Bootstrap?
I want to get 4 columns, with the text floating in all of them. I don't want to make 4 separate divs, because when the first column if full of text, the text should continue in the next column.
I also want to set the width of each column and the padding between. Additionally, the height should be flexible, depending on how much text there is.
Do you have any ideas?
This is very difficult to achieve, and is not how HTML is designed. The recommend approach would be to render all the text in a single HTML element (div or p, etc) and in the browser, dynamically alter the content and markup with respect to a pre-determined "preferred height" and number of columns. You can use the height() methods of jQuery to assist you in this.
Here is a script with some of the groundwork.
An article explaining future support available in CSS3.
This article (11 Classic CSS Techniques Mad Simple With CSS3) shows how to do this using Mozilla- and WebKit-specific properties. Columns like these are item number 9 on the list.
For IE you'll need to wait for CSS3 support or use a script, such as the Columnize jQuery plugin mentioned in the article.