Issue: https://www.mirabella.com/find-your-style/mirabellaclothing/mirabellagear/mirabella-white-sweatshirt.html
this is what happens when we upload a product with with attributes. It seems to be a position issue. But i have tried everything I can think of to correct the issue. If I remove the position attribute it looks fine except some of the text is incorrectly positioned. Actually everything i have tried has not corrected the text position. thanks
Remove the "float:left;" attribute from the style:
.product-view .product-img-box {
/* float: left; */
width: 400px;
}
I would also force the "a.selectBox" (which represents the select control) to be of 100% width to make it fully responsive.
Related
I made a carousel slider(copied the code from some codepen then made some changes) and it looks something like this. Anyway the problem is that those images have hyperlinks that work unless i make a transform on x axis..for lets say 240px the hyperlinks stops working. What i mean by that its that its unclickable.
This is the structure of the html code.
I made a script that adds style = "transform:translateX(-240px); to the carousel div.
Expected behaviour: the hyperlink should pe clickable.
You can find the code at: https://github.com/AlexxW/AlexxW.github.io
and the webpage at https://watchwhatmovie.tk/ (for some reason its not updated yet)
Try posting code instead of images for better answers.
this question similar to - CSS - Transform function not working on links?
you need to make the link (i.e <a> tag) CSS to display: block; because transform doesn't work on display: inline; (which is default for a tag).
Because no css was provided, maybe the z-index is not correct (the layers). Try this:
.card {
position: /* set this to relative/absolute, depending on your preference */;
z-index: 1;
}
Here's the look:
[]
I did the page in ReactJS, but I've made a copy of the page here.
To better show the white space, here's the screenshot:
several interesting observations:
when the page is first loaded, there's no such issue.
the issue only appear, when the second image box (the one with 100% bar there) added into DOM
screen.width = 375
$('html').width() = 375, also
I don't know how and why the white space appeared, nor can I find any element having width > 375. (I didn't check through all element though)
$('body').find('div').each(function(idx,e){if($(e).width() > 375) console.log($(e).width())}) would give me no output
I try to do inspect on that white area, cannot. It would imply show me the body
this issue appear both on web and on mobile
this issue doesn't appear for the code in codepen I've shown above, although that code is an exact copy of the HTML generated (I copied directly from Chrome Inspector), with all the javascript removed
Any idea on: 1) why the white space appeared? 2) how could I solve the issue?
PS: just in case if you missed the part I put link to CodePen, Here it is again.
Update 2: I have this input box which I'm placing outside the page:
<input type="file" class="attache-upload-button" data-reactid=".0.0.1.3.1.1.0.0.1">
Corresponding style:
.review-add-form form .uploader .attache-upload-area .attache-upload-button {
position: fixed;
top: -1000px;
}
I inspected the DOM with chrome inspector, and i saw that the <svg class="bar"> is exceeding in width. I tried to set a overflow: hidden to the containing element, .progress-bar-circle and the whitespace disappeared
Add this to the CSS:
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Faced this issue multiple times and in my case, it's generally a div or an element that is crossing the width of the screen thus stretching out, maybe try and analyze with chrome dev tools and inspect the layout, try and get rid of few divs and see if it changes anything, or maybe reduce the width of absolutely sized elements, etc.
title is a little bit stupid. I have a page, probably full of errors. Either way, there's a Navi and a text box. Navi left, text box right.
Navi shall scroll up until it raches top of the window and then stay there. I got that to work so far. Copied and used codes I found, since I am a noob in Javascript.
Something happens to the text box though, just at the moment when the Navi changes from relative to fixed position. The text box ignores the Navi and just writes over it.
I had the Navi on fixed before I used the stick to top script and it all worked fine.
Here's the page:
http://test.pluskat.de/StuckWeit/
Ignore background image.
What to do or what to change? I am totally confused myself by now with all the positioning.
Please help. Remember I'm a noob in Javascript. I might be able to follow you, but please describe what is to be done, so others might be able to learn from it too.
Thank You. You guys are my last hope.
To fix this issue you could try adding below style at the end of the style.css file.
#wrapper
{
width: 1024px; /*Add this if you have fixed width layout else ignore*/
position: relative;
}
#textbox
{
position: absolute;
left: 220px;
height: auto;
}
This is how fixed position works: it takes the element out of the document flow. That's why your div occupies the whole width.
You could try to add a class (i.e. "nav-positioned") to a common container element instead of changeing the position property in your JS.
After you can style .nav-positioned .navi1 and .nav-positioned #Text
I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?
I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.
You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}
plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance
You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.
If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.
Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.