I'm not able to change the height of the div when showing the error messages after submitting the form so that there is no overflow. I can set the height property to 1100px so that there is no overflow anymore but it looks quite ugly having so much white space.
I created a JSFiddle because it is a lot of code and since most of the code is relevant for the problem it is quite difficult to reduce it.
<div class="contact-form-wrap">
<div class="contact-form-wrap-left">
<div class="col full-width"><ul class="error-message"></ul></div>
</div>
<div class="contact-form-wrap-right ">
</div>
</div>
I tried to set the height to auto with a min-height of 760px. The div still does not grow. I changed the display property of contact-form-wrap-left to display: inline-block but since float is used this seems not to work.
https://jsfiddle.net/ArisMartinAccola/ud8x5e9o/
I hope someone can help me.
Change place of divs like this
<div class="col full-width"><ul class="error-message"></ul></div>
<form action="config.php" method="post" class="contact-form">
After that set col full-width with position relative and contact-form to relative as well. Of course, use create ID's for both of those
Related
I'm trying to make the div not expand over user visibility, but when I dock multiple items in this div, it expands off screen.
Here is an example.
I know, it sounds long, but I was trying to reproduce the entire layout to find the problem.
<body>
<div class="container">
<div class="head"></div>
<div class="main">
<div class="painel"></div>
<div class="dash">
<div class="head-dash"></div>
<div class="content-dash">
<div class="email-list">
<div class="head-content"></div>
<div class="content">
<div class="item"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
https://jsfiddle.net/ricardosc12/rb2kjtfh/12/
change the variable quant -> 50 and you will see the problem
Probably its height setting to 100% ignores its adjacent element, but how can I make it take up the remaining space without expanding later.
As you can see in the example, the email-list class has expanded over content, pushing all the main ones down.
I'm looking for a solution to this using flex, but can you suggest other possibilities.
I looked around but it didn't work.
Make a div fill the height of the remaining screen space
It's not the perfect answer but will solve your problem.
change your height of content-dash to this
.content-dash{
height: calc(100vh - 140px) ;
padding: 25px;
background: #EEEEEE;
}
We will make the content-dash's height to 100vh and subtract the height of head-dash and head from it.
I have an Angular 8 project, which receives list of products from the server. Since the number of products per user might be very large, I'm making request and displaying to user only first 20 items, but when he reaches the bottom of the container, I'm uploading 20 more items. For scroll detection I'm using infinite-scroll library. Everything worked fine until I've added another library, that autoresizes product title to fit container width. After adding it, scroll started automatically jump to the end of the container (to the latest uploaded item) and because of that it triggers uploading of another bunch of additional items. Before adding autoresize, users were staying on the same place (at the end of the first 20 items).
I have already tried next steps:
Removed infinite-scroll and wrote my own method to detect when user
reaches end of container to upload new items. Result: same behavior
with scroll drop.
Removed fittext library and wrote my own directive to resize text
label. Result: same behavior with scroll jump.
Tried to switch overflow on container to hidden to prevent scroll,
tried to change scrollTop value.
Nothing helps. Scroll is still jumping to the end each time new items are loaded. But when I'm removing autoresize feature - everything works fine, except I don't have autoresize..
Maybe someone had similar issue or have any ideas about how to prevent that scroll jump?
Thanks!
This is my html:
<div class="prizes__wrapper" *ngIf="viewModel.prizes.items.length > 0" infinite-scroll [scrollWindow]="false"
(scrolled)="scrollDown(this.viewModel.prizes, 0)">
<div class="content-wrapper">
<div class="outer__wrapper" *ngFor="let prize of viewModel.prizes.items; let i=index; first as isFirst">
<div class="inner__wrapper">
<div class="prize">
<div class="image-wrapper">
<div class="prize__date">
{{'claim_page_won_title' | translate:(prize.created | date:'mediumDate')}}
</div>
<div class="prize__image" [ngStyle]="{ 'background-image': 'url(' + prize.machineImage + ')' }">
</div>
</div>
<div class="prize-controls">
<div class="title-container">
<p class="title" appTextFit>{{prize.prizeShortName}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Styles for container with overflow:
.prizes__wrapper
height: 100%
overflow-y: scroll
scrollbar-width: none
-ms-overflow-style: none
Adding trackBy on ngFor element helped to fix that issue.
<div class="machine" *ngFor="let machine of viewModel.machines; let i = index; trackBy: trackByFn">
So I have an episerver block for form. On desktop and large screens, the form is displayed with an image to its right. On smaller screens the image is hidden.
When the image is hidden, I would like to make the form wider to fill up the missing space. The image does not have its own div class. It is the background image of the containing div.
<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(#Url.ContentUrl(Model.CurrentBlock.Image))">
<div class="row">
<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(#Url.ContentUrl(Model.CurrentBlock.Image))">
<div class="row">
<div class="#(!ContentReference.IsNullOrEmpty(Model.CurrentBlock.Image) ? "col-sm-7 col-md-8" : "col-sm-12 col-md-12")">
<div class="whitepaper">
</div>
</div>
</div>
</div>
</div>
</div>
I have also modified the above so that when a form is not included in the page through the EPIserver editor that the row should be full width by default.
My css for .gatedbg
#media (max-width: 960px) {
.gatedbg {
background-image: none !important;
}
}
Is there a method either in EPIserver or ASP.Net/MVC to detect when the background image is hidden from view in the browser?
If I understood correctly, I cannot use javascript in this razor page because it is server side code?
These pb-5 pt-3 classes presumably are part of some grid system, that is responsible for the column widths? Do the 960px correspond to one of the responsive breakpoints used by that system?
If so, you probably just need to set different classes (that make the form take full width, and hide the “image” column completely);
otherwise you might need to overwrite the width coming from those classes explicitly in your stylesheet.
I am displaying every word in a sentence in separate div using inline-block with max-width of 120px. When I try to increase the font size on parent div my inline-block of div get overlaps due to large font size.
Is there any way to programmatically calculate the max-width required for inline-block of div to be used after increasing the font size?
Here is sample code snippet:
jQuery('.btnIncFont').click(function(){
jQuery('.parentDiv').css('font-size',parseInt(jQuery('.parentDiv').css('font-size'))+2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnIncFont">+</button>
<div class="parentDiv">
<div style="display:inline-block;max-width:120px">This is a test1</div>
<div style="display:inline-block;max-width:120px">This is a test2</div>
<div style="display:inline-block;max-width:120px">This is a test3</div>
<div style="display:inline-block;max-width:120px">This is a test4</div>
</div>
Keep pressing the + button and at certain stage you will find that the div is overlapping each other. I want to fix this with calculation for my max-width to attain the exact ratio according to initial size 120px after incrementing font-size.
When you increase the font-size make sure you are also increasing the line-height.
I don't think you want to go down the road of programmatically setting the width of each div, let the CSS do it for you. I'm assuming you aren't already doing that, if so, try setting it to auto. Lastly, I may suit you better.
Sorry for the vague answer but if you post the code I'll give you a more specific one.
Your CSS:
.v {
word-wrap:break-word;
display:inline;
font-size:140px;
border:2px solid blue;
max-width:120px;
}
and HTML:
<div>
<div class="v">This</div>
<div class="v">is</div>
<div class="v">a</div>
<div class="v">test</div>
</div>
Added the break-word css option. Here is the full fiddle: http://jsfiddle.net/eugensunic/76KJ8/74/
I think I have got a solution. Never thought that it would be as much simple as using just a span inside child div to get the element width after increasing font-size. Then replacing max-width on child div with span width value. It will gives you the exact ratio based on your initial max-width value of 120px after incrementing font-size and at the same time also take care to wraps the div in case it exceeds the width of parentDiv.
Here is code snippet:
jQuery('.btnIncFont').click(function() {
jQuery('.parentDiv').css('font-size', parseInt(jQuery('.parentDiv').css('font-size')) + 2);
var spanWidth = parseInt(jQuery('.parentDiv div span').css('width'));
jQuery('.parentDiv div').css('max-width', ((spanWidth < 120)?120:spanWidth) + 'px');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnIncFont">+</button>
<div class="parentDiv">
<div style="display:inline-block;max-width:120px"><span>This is a test1</span>
</div>
<div style="display:inline-block;max-width:120px"><span>This is a test2</span>
</div>
<div style="display:inline-block;max-width:120px"><span>This is a test3</span>
</div>
<div style="display:inline-block;max-width:120px"><span>This is a test4</span>
</div>
</div>
use width auto....
`<div>
<div style="display:inline-block;width:auto">This</div>
<div style="display:inline-block;width:auto">is</div>
<div style="display:inline-block;width:auto">a</div>
<div style="display:inline-block;width:auto">test</div>
</div>`
I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");