Im currently in the process of creating a legal document automation program for the company i work for, however i have run into one issue on possibly one the last step of completing this web app.
I am using the default angular Dashboard layout and set-up, as you can see below.
The document in the dashboard scrolls a little as it is a full document, however it only prints one page worth of the scrollable content. as shown below.
I can show code if any one thinks it will help however in terms of printing using angular and components i haven't found anything yet, so it's all based around window.print() currently with a lot of CSS changes to get it to look right.
I will however show the css code here(its a bit overkill with me trying to figure out how to accomplish this):
#media print{
.documentView{
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
overflow: visible !important;
z-index: 10;
display: block;
width: auto;
height: auto;
overflow: visible;
}}
if anyone has done something like this before or has any tips regarding this, would be much appreciated.
You can try this css property :
https://developer.mozilla.org/fr/docs/Web/CSS/break-inside[break-inside][1]
Related
This is my first ever question on stackoverflow so I apologize if I'm not following standard etiquette.
I'm working on a blog final project for a class that requires a custom theme and I'm using tumblr to host it for reasons independent of coding. This is the first time I've used css for more than extremely basic styling purposes, and I'm relatively new to html/css-related work in general.
For my main page, I have a sticky sidebar on the left 1/4 of the page, and then 3 columns for posts in a tiled gallery sort of like (similar to masonry but I used css grid because masonry confused me). Overall, I'm pretty satisfied with how this is turning out. Due to my inexperience, it's not where I would ideally have it designed, but my goal is to be able to work on it as I learn more html/css/js after this class is over.
main page layout
about page currently
However, I'm having trouble with fixing an individual post page and my about page: when you click on an individual post, it's also being shown as a 3 column post, which is not my intention at all. Same with the about page. I think this is due to my usage of css-grid on the main page, but I'm confused as to how I can fix this on individual posts.
a note on my html/css - my friend let me borrow most of the sidebar-specific code which is why it's much nicer than some of the stuff I've written and she's helped me a lot during this process but the page issue isn't something she's ever really encountered because she doesn't use css-grid or columned design often.
I've tried simply writing a completely new html for the about page, but my sidebar uses meta/variables (that I think are) built into the tumblr theme editing interface, so my sidebar wouldn't show up correctly when I tried to do that. And I haven't tried anything for the posts because I didn't even realize they had an issue until earlier today.
I can provide other code snippets if this would help, but I'm not sure what to include other than these:
#sidebar {
top: 35%;
position: -webkit-sticky;
position: sticky;
background: #ffffff;
height: 40vh;
width: 20%;
text-align: center;
padding: 25px 10px 10px 10px;
border: 2px solid;
border-radius: 70% 30% / 20% 40%;
margin: 2% 2%;
}
#container {
column-count: 3;
display:inline-block;
grid-template-columns: auto auto auto;
grid-area: container;
width: 100%;
column-gap: 20px;
}
#house {
display: flex;
flex-direction: row;
justify-content: right;
}
.content{
width: 90%;
background-color: #ffffff;
padding: 20px;
margin: auto;
margin-bottom: 10px;
float: left;
}
<body id="{select:background}">
<div id="house">
<div id="sidebar">
<a href="/">
<h1>{Title}</h1>
</a>
<div id=“description”>
{Description}
</div>
<br />
<div class="sidebarlink">{text:link 1}</div>
<div class="sidebarlink">{text:link 2}</div>
<div class="sidebarlink">{text:link 3}</div>
<div class="sidebarlink">{text:link 4}</div>
</div>
<div id="container">
{block:Posts}
<div class="content">
[I've omitted the post types and their meta info for clarity]
</div>
{/block:Posts}
</div>
</div>
Any help at all would be greatly appreciated! If this has already been answered please direct me there as well, I'm not too well-versed in navigating stackoverflow yet.
I am trying to move the ion-tab-button a bit up putting position absolute, top -30px and overflow visible but none of this works. I tried already putting contain none on ion-tabs (a solution for a user here in stack overflow) and didnt work either.
PS1. Even if I try to create a new Ionic 4 project an implement this doesnt work.
PS2. I had success on Ionic 3
Can anyone help me please?
I could solve the issue by simply putting ion-tab-button elements outside ion-tab-bar and adding below css.
ion-tab-button{
position: absolute !important;
bottom: 0.5vh;
z-index: 999;
height: auto;
}
.tab-1 {
left: 5%;
}
.tab-2 {
left: 31%;
}
.tab-3 {
left: 54%;
}
.tab-4 {
left: 79%;
}
Thanks
You can not do it simply by just updating CSS because Ionic provides web component.
Ionic web components base a lot of their styles on the values of CSS4 variables, we can change the values of those variables to modify the internal styling of the web component only.
Please read this article :
https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components/
you can make changes into below css variables:
-padding-top: -30px;
--padding-bottom: 6px;
--padding-start: 0px;
on Ionic 5 we need to manipulate de shadow DOM...
I put my solution in this post:
https://stackoverflow.com/a/63301631/4320596
I'm trying to create an HTML scheduling app that sizes the created tables to fit the the screen while maintaining its same size ratio. It looks fine when I have it fullscreen: . But when I resize the window or someone with a different screen resolution runs it, the positioning of the tables messes up like so: .
I was wondering if there was something I could do in my CSS or JavaScript files that would ensure that the ratio and relative positioning of each table remained the same no matter what screen size or resolution it is ran on. I'll include a JSFiddle for further understanding here:
CSS for Tables and Positioning:
/* To control the style of the overall table class */
table {
border: 0.0625em solid black;
text-align: center;
table-layout: fixed;
}
th, td {
border: 0.0625em solid black;
width: 8.75em;
height: 2.1875em;
}
/* Settings for Days row */
.tableDays {
width: 8.75em;
}
/* Settings for Employee column */
.tableEmployees {
line-height: 2.1875em;
}
/* Settings for Tasks table */
.tableTasks {
width:100%;
margin-top:0.3125em;
empty-cells: show;
height:62.5em;
line-height: 2.1875em;
width: 6.25em;
}
.empTaskCont {
height: 31.25em;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
padding-bottom: 1.875em;
}
#table-wrapper-days {
position: relative;
width: 66.5em;
margin-left: 15.8125em;
/*float:right;*/
}
#table-scroll-days {
height: auto;
overflow-x: hidden;
}
#table-wrapper-employees {
position: relative;
float:left;
width:18%;
margin-top:0.5em;
}
#table-scroll-employees {
width: auto;
overflow-y: hidden;
max-height: 31.25em;
}
#table-wrapper-tasks {
position: relative;
width:81%;
float:right;
}
#table-scroll-tasks {
overflow-x: scroll;
overflow-y: scroll;
max-height: 32.625em;
}
.employee-mod-btn{
float:left;
}
JSFiddle: https://jsfiddle.net/hs5sz8kb/#&togetherjs=x3LUnVhmMp
I'm still very new to HTML, CSS, and JavaScript so any additional advice on my code is greatly appreciated. Thank you for your time!
Reviewing the content of your fiddle, the issue is less related to CSS, and more related to your HTML layout. The first problem is that you are building multiple tables when they should just be 1 table. Your top "row" should be part of the table with all the content, instead of a separate table. Your left column is also a separate table. Combine them all into 1 table and that will help a lot.
I hate to redirect your efforts toward a total rewrite because you are learning HTML and CSS, but you may find that a very effective way to implement "responsive" design is with a helper library. I would suggest considering the use of Bootstrap, although there are many others. Bootstrap adds a lot of "helper classes" that will take some of the effort of achieving what you are trying to achieve out of the equation. Consider tables for example, what I think you might be looking for is "breakpoint specific" tables.
https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific
Another option is to have always responsive tables, where as the screen resizes you will get a horizontal scrolling frame.
There are a lot of options to choose from, so try it out. You can easily add the Bootstrap library to your JS Fiddle in the "resources" section.
Additionally, you might consider storing your data as JSON or in a database. As you progress with this project, you may find Datatables to be a very useful javascript library. It allows you to work with the raw data and build the tables more dynamically.
https://datatables.net/
Instead of using custom css to style your tables which could take some time for it to be looking good at all screen widths, consider using bootstrap which is a responsive framework for html, css etc. It will be worth while you reading about bootstrap as they provide responsive tables that will help you based on the screen size of the monitor or other device. Check out this link that will help you with building the html structure and adding bootstrap to your workflow. All you will have to do is modify the table to suit your needs.
References:
https://getbootstrap.com/
https://getbootstrap.com/docs/4.0/content/tables/
I switched over last year from cargocollective to squarespace. I'm happy with a lot of the things sqaurespace allows for. But not having access to the actual code makes customization so much more confusing for me as a novice. I tired inserting a bunch of different things into the custom CSS with no luck.
I've been playing around in the inspector element and was able stretch the gallery across the screen however I've had no luck actually accomplishing it through squarespace!
Any help in achieving this would be greatly appreciated! http://www.vernacularstudio.com/work/
I ended up fixing it by inserting this into the custom CSS in the Design section
The difficult part was just isolating out what the actual div element I wanted changed was I suppose.
#block-yui_3_17_2_17_1431527054679_7625 .sqs-gallery-block-grid element.style {
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
max-width: 100%;
}
.content-inner {
background-color: #fff;
max-width: 100%;
margin: 0 auto;
padding: 100px 8%;
padding-left: 0px;
padding-right: 0px;
}
I'm trying to make a simple browser game without relying on anything fancy like flash or html5. I was doing pretty well in getting everything set up, but when I got to the ground I ran into trouble as I'm not very good at setting up html pages. I want to have a tiled ground that I can put objects on, then click on the objects to take the user to another page. I'm not sure how to go about something like this and am looking for some direction.
I have a fairly good grasp on PHP, understand basic html, very limited css and am starting to learn javascript and am planning on picking up jQuery.
I don't really understand what you want, but this might help:
Live Demo
To understand how the positioning works, see:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
HTML:
<div id="gameContainer">
</div>
CSS:
#gameContainer {
width: 320px;
height: 320px;
border: 1px solid #000;
background: url(http://i.stack.imgur.com/sFV9k.png);
position: relative
}
.wall {
background: url(http://i.stack.imgur.com/IFjyp.png);
width: 32px;
height: 32px;
position: absolute
}