I'm having a problem with this new theme I tried out with OpenCart. I've tried my best to diagnose the issue using Firebug in Firefox, but I cannot pinpoint whats the culprit here.
The problem can be seen here:
http://bit.ly/13KG6dz
(Using bit.ly because IP address are not allowed - don't worry its not a virus)
Basically in OpenCart, you can add 'Options' to your Products. OpenCart comes with some sample dummy Products. One of these Products has 9 different Options, and all of them display fine. But when I define a new Option in OpenCart, and add it to this Product, there are alignment issues, which can be seen below:
Pictured Example:
1) Initial Status:
Default Options only. Everything is fine, no alignment issues.
2) After adding a new Option:
Now I define a new Option and add it to this Product, and the alignment issues are visible:
Note that is ONLY happens when I add a new Option to an existing sample product. However, this also ONLY happens on the particular theme being used on this OpenCart installation.
If anyone can get to the bottom of this, I'll be extremely grateful!
YES, as I guessed it, it was an issue of floats, add this line here
<input type="radio" id="option-value-20" value="20" name="option[228]">
<label for="option-value-20">No</label>
<br>
</div>
<div style="clear: both"></div>
<!-- ^This will clear your floats, alternatively you can use
overflow: hidden; on container element -->
Right after this <div id="option-228" class="option boss_radio"> ends
You have float defined in your css rule boss_radio. If you remove this class your elements are aligned fine! The problem is, that this rule makes the element float with a width of just around 30%, which will let other elements stay on the same line.
Related
I wish to trick bootstrap rows somehow. I need to put many col-..-.. items in only one row (there are about 8 really complicated .js files that I'm afraid of altering - and it points to children of the div that I additionally used as a bootstrap row). No way to trick the HTML, I have tried many-many ways. In case you don't believe me, check out the specific problem.
Image here
*The red boxes are the images that I'm using and the striped space is left blank. If I align the element that is on the blank row, the next one goes there and the problem is still unsolved.
What's quite interesting that Firefox and IE show everything the way I them to
but Chrome and Edge do not.
Can anyone help me on this? I'm sure there must be some easy way that I missed out, like altering some of the default bootstrap row class properties, but I just couldn't get it. Any suggestions are appreciated.
Solved using CSS Grid layout.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
I am trying to set the position of a font awesome icon in an input field at run time. To do this I had hoped to have the style compute at run time as I've done with other style sheet elements. However, I am banging my head up against the wall with this one. I did not include a jfiddle because my problem is trying to make the element dynamic and I don't believe I can do that in a fiddle.
This code works. The dollar sign appears at the right side of the input box:
<div class="col-md-6 form-control-static">
<div class="input-icon right">
<i class="fa fa-dollar"></i>
<input>
Notice that I used "right" to get the icon on the right. What I want to do is replace this element with a generic element and set that value dynamically in computed css.
So what I really want to say is this:
<div class="input-icon currencyPlacement">
And then in the computed style sheet somehow resolve "currencyPlacement" to be "left" or "right" based on conditions that I will compute.
<style>
.currencyPlacement { ????? }
</style>
I realize that I could set this using javascript and I could also have this compute at the field level. I thought there might be a better way to effectively alias the element. Sorry for the long-winded description and thank you very much in advance.
You said that you generate the whole thing by code. So presumeably your code "knows" the currency and its placement. It seems much more straightforward to me to use your initial approach. Or perhaps instead of "right" or "currencyPlacement" assign a style that corresponds to the currency, like
.currUSD, .currEUR, .currATS { css to place it right }
.currXYZ { css to place it left }
And in case you set the currency on the same page, there will be no way around some JS to assign the proper class to that input-field.
Update: wrt to your comment: since you insert a FA-Tag related to USD, I assume you know what the currency will be when you build the page. So if you have that knowledge, can't you then make sure the controls appear in the appropriate order, as in this example? I think that would make it much easier - otherwise I would only know how to do with JS, but I see no solution with CSS alone, I'm afraid.
Since I can't really figure out where the problem is the cite is here
I'm sure most people know ctrl-u will allow you to see the coding.
The scroll bar should move the content in the box.
Any suggestions are helpful but please don't be rude
The scrollbar is transparent but it should wok like the one on this page
Based on what I'm currently seeing - your problem is that you have two separate <div id="entries"> divs. The second one (line 1060 of your compiled source, as I'm seeing it in Firefox) is blank - it contains an empty <div id="post"> and nothing else.
id properties have to be unique - because this one is repeated, the style attributes aren't being applied to it correctly. Simply delete the second <div id="entries">, and your scrollbar will work.
I have an image and a rectangle (a paragraph with a coloured background) that should have their tops line up. They're both absolutely positioned and have the same style-top value, but the top of the rectangle is appearing about 15px below the top of the image, and I can't figure out why. Is there any reason why this might be happening?
HTML:
<img class="v1" id="image" src="/COMP2405A4/images/resized_adorkable!.jpg" style="position:absolute;top:313px;left: 61px;" alt = "Your Image">
<p class="mask" id="tmask" style="position:absolute;top:313px;left: 61px;width: 400px;height: 20px"> </p>
CSS:
p.mask {background: rgb(255,255,255);
opacity:0.5;
}
Your elements don't line up because the margins of your elements aren't the same.
Try explicitly setting margin: 0; on the p element.
Seems like you have the right idea. One of your other classes may be throwing you off. I made an example if you want to take a look.
http://jsfiddle.net/hwrQA/
It can't be other classes since the relevant styles are applied through a style tag, which overrides the default styles it may have.
However I can theorize that it may have to do with on of the elements, probably the image, having additional styles through the stylesheet creating extra offset.
Like padding on an image, the effect differs per browser but it may create the extra offset.
The best thing you can do to check why the offset it not correct is use the developer tools in chrome or firebug in firefox to select the relevant element and see which styles get applied and where they are coming from. Internet Explorer has debugging tools too but I wouldn't recommend them to start with.
If you want a better answer you're going to have to reproduce it in jsfiddle so we can see what is wrong. Try taking away stuff until nothing irrelevant to be bug remains, or if the bug dissapeared in this process you may have solved it yourself. Read the how to ask faq for more information.
Browsers I'm using for testing: IE, Chrome, FF;
Ideal layout example pdf: http://designobvio.us/dov2/Homepage1.pdf
Heres the link to the direct page http://designobvio.us/dov2/index.html
While Grid systems are excellent for laying out by width, I always stumble when using height constants.
Inside my code I have 2 major problems:
Ideally, I want to be encapsulate sections of my code by using
parent div that controls the height, margin-top. I've tried to
create this div colored a pale green and padded it for visuals.
this class is shown here:
siteBody #businessSection{ padding-bottom:200px; background:#0F9;}
I've also demonstrated idea in this imageURL: http://www.designobvio.us/dov2/Homepage1Encapulate.pdf
While trying to do this I've come up completely empty handed.
2.So next, I tried breaking down each section individually by using a class .businessInfo
#siteBody .businessInfo{height:200px; background:#ccc;}
Unfortunately this also didnt work and I have no idea why because all the grids line up perfectly.
I hope what I've stated above is understandable. I prefer solution one; however, if not possible 2 will work.
If I'm missing anything I'll response ASAP.
Thanks!
this problem stems from the use of float. For example problem : http://jsfiddle.net/GAvcL/
you can use clear attribute for solve problem.
Solution:
http://jsfiddle.net/qeDs3/
This is a common problem in html. Before closing the div that encapsulates the divs using float, use a div has clear attribute.