I would like to know what's the effect of "ui-g-nopad".
I see it a lot in the code of an application and I can't understand what it does exactly, cause the result is always the same if I put it or not.
<div class="ui-g ui-g-nopad">
...
</div>
I read doc (https://www.primefaces.org/showcase/ui/panel/grid.xhtml) but it's not really explicit neither...
Thank you for your help.
from the primeng.css file:
.ui-g-nopad {
padding: 0;
}
This means it uses CSS to set padding to zero.
Related
I'm trying to dive into the BEM methodology. Even though it seems to be the 'must have' methodology for all project sizes, I'm kind of unhappy with it or am I just trying to use it the wrong way?
Using BEM the CSS gets divided into something like this.
.block {
/* Block code goes here */
}
.block--is-hidden {
/* Block modifier code goes here */
}
.block__element {
/* Element code goes here */
}
This seems to be pretty fine for me, as long as you do not reuse some code. Let's assume I'm using Bootstrap or any other CSS Framework/Library. Doing so I just want to use the grid. That being said my markup could look somehow like that.
<div class="container">
<div class="row">
<div class="col-xs-12">
...
</div>
</div>
</div>
According to BEM this would be a no go. Instead all the grid classes should be wrapper up in our corresponding block and element classes. A possible way to achieve this would be through SASS and it's #include. For me this basically results in redundant code.
So my question right now is. Am I missing something? I mean, using BEM while for e.g. loading Bootstraps .container code into every single of my own block styling would just result in an massive output CSS file. Is my approach correct? And if so - would I really sacrifice initial loading time just for the idea of better organized CSS and better readable markup?
Is there a reason your blocks have to begin at the container level? I'm not sure if it's a violation of BEM methodology exactly, but I personally "begin" my blocks more at the html>body>.container level. So:
<html>
<body>
<div class="container">
<div class="cheesecake">
<h1 class="cheesecake__heading"></h1>
</div>
</div>
</body>
</html
With SCSS looking something like:
.cheesecake {
&__heading {}
}
And so on.
Sometimes we may have such content in our web page:
A: How's everything going on?
B: Fine, thank you!
When the sentence is longer, it will be like:
A: How's everything going on? I haven't heard from you for a
long time. I missed you so much.
B: Fine, thank you!
But the desired style is:
A: How's everything going on? I haven't heard from you for a
long time. I missed you so much.
B: Fine, thank you!
Is it possible to do this with:
do not use a <pre> tag.
can fit any width.
plenty of ways to do that, my preferred way is using a definition list like so:
<dl>
<dt>How's everything going on? I haven't heard from you for a
long time. I missed you so much.</dt>
<dd>Fine, thank you!</dd>
<dt>How's everything going on? I haven't heard from you for a
long time. I missed you so much.</dt>
<dd>Fine, thank you!</dd>
<dt>How's everything going on? I haven't heard from you for a
long time. I missed you so much.</dt>
<dd>Fine, thank you!</dd>
</dl>
http://jsfiddle.net/j5v62t3n/
So many ways :)
.parent{
width: 200px;
display:flex;
font-family: sans-serif;
}
.parent>div{
padding: 0 5px;
}
<div class="parent">
<div>
A:
</div>
<div>
How's everything going on? I haven't heard from you for a long time. I missed you so much.
</div>
</div>
This is the code:
<form id="the_form" action="">ev
</div>
<!-- final pay_block -->
<div class="linea"/>
<div class="spacer"/>
the linea is overlapping the buy button, now is in the middle because there is margin-bottom: 15px aplied.
Edit:
This is the site: http://tinyurl.com/cboyymm
also what I want is to display the pay button in the same position. I left space enough to product description, and I fixed a height to the diferents divs before. Is this the right thing? I want to make it in the most minimalism way. Tips are very welcome, as Im using this project to learn.
Thanks in advance. At first I was afraid of posting things here because I didn´t want to mess, and Im quite ashame Im so nob. But I found a very warm welcome. Dont want to abuse, just know why this little things happen.
Now define min-height
#pay_block {
min-height: 78px; // add this line
height:78px; // remove this line
}
Line No :- 612 in this css file tienda1.css
Result is this
I have this fairly unusual problem (after what I've understood when asking others), it seems that my -tags don't understand how much of the screen that is used by other elements, and therefore push elements out of screen.
I thought it might had something to do with the use of position:fixed, but it didn't seem to solve it when removing the position-part at all.
This is the main markup that seems to have problems, in wich I really can't seem to see any errors.
<div id="search">
<div id="searchfield">
<span id="searchinput">
<input type="text" id="s" name="s" />
</span>
<button>Search</button>
</div>
<div id="searchresults">
<ul class="longlist">
</ul>
</div>
</div>
The problem is best seen in this jsFiddle where it seems #searchresults is pushed out of #search by #searchfield.
As I really don't know what's the problem, any attempt on using Google have left me with no good answer to where my problem really is.
I have tried removing any JS that modifies the at all, and as we can see the jsFiddle does not run any JS at all, and still my markup/CSS does not work.
The height of #search is set to 400px in this fiddle to show the flaw better. But the same error occurs when it's 100% (wich is the value it should have in production-code).
Does anyone have any idea why this is happening?
This is caused by an overflow problem. The div "#searchfield" is pushing down the other content.
Setting the height to "auto" by removing the line "height: 400px;" on "div#search" and set a fixed height on "div#searchresults" fixes the problem.
#search{
height: 400px;
}
Taking the "div#searchfield" outside of the "div#search" also works.
<div id="searchfield">...</div>
<div id="search">...</div>
These methods show that the overflow problem is caused by mixing relative and absolute heights. You should move some of your styles relating to height from "div#search" into "div#searchresults" to fix this.
It seems to work at
#search{
height: 100%;
}
no?
link:
http://jsfiddle.net/KX9BV/8/
I have a page that there is a list of "tags", just like here in SO, and when the mouse is over it, it gets darker.
It works great with Ie7, 8, FF, Chrome, Safari etc... but IE6 has a bug that when a:hover is triggered.
The bug is that the div that those (ul li a) are contained, gets a height's increase.
the css I have is:
div.options ul.tags li a:hover
{
background-color: #D5E4A5;
}
if I delete this style or just comment "background-color: #D5E4A5;" it doesn't happen...
any idea of how to fix it?
thanks!
EDIT: Here's a screenshot of the bug:
just fixed it! :D
what I had before was:
<div class="options clearfix">
<!--content here-->
</div>
and I replaced for:
<div class="options">
<div class="clearfix">
<!--content here-->
</div>
</div>
Now IE6 is happy, and I'm happy as well...
Thank you everybody for your help!
This is usually a border getting set that wasn't defined originally. Try setting a border on the growing DIV to the default background color. My guess is that you won't see anyting grow anymore.
I think I ran into this once, and what was happening was that the borders were being modified (or was it the margins?) I ended up copping out, and just giving the problematic elements a transparent border of 1px, and calling it a day.
I really doubt this will turn out to be your solution, but I'm hoping it'll give you some idea in which direction to look in!
I've had that happen to me as well, but I can't remember where that was exactly. I think I did solve it, but I'm not entirely sure how anymore. I can think of two things:
Give the element "layout". I tend to do that with zoom: 1.
Add vertical-align: top to either the a or li element.
Could you give a more complete code example? I can't reproduce it with just that CSS.
Did you specify the height for that div explicitly? If not, setting the height might make this go away.
Are the tags located in a place where you could give them background color all of the time? If so, does setting their background color when :hover is not activated still cause their height to change?
As a note, I can't reproduce this given HTML matching the rule you described, so the problem may be coming from somewhere else higher on the page.
<!-- This does not display the described behavior -->
<div class="options">
<ul class="tags">
<li>c++</li>
<li>not-programming-related</li>
<li>cheese</li>
<li>barnacle</li>
</ul>
</div>
The best thing I can suggest is to do what mercator said and give the element layout.
EDIT: Just a shot in the dark, but you may want to try setting a value for line-height on div.options.
EDIT 2: After seeing your screenshots I recall that I have had this problem at work before, and the fix in my case was to add position:relative; zoom:1; to the container (or maybe the links, I forget!). Try that?
EDIT 3: After googling for some solutions, you may want to try setting the height if your container explicitly. If this doesn't work, I have no idea what to do!
I have this exact problem as well. The trigger is definitely the background color on hover, but the usual solutions of giving the parent hasLayout don't work, I think because of nesting the A tags inside other tags. From what I ended up doing, your solution of nesting the clear fix is the right logic: separating the offending element, parent and clearing objects.
The solution I did was the following:
<div class="options">
<!--content here-->
<!--[if lte IE 6]><div class="ie6clear"></div><![endif]-->
</div>
With the following CSS:
.ie6clear{ clear:both; height:0; overflow:hidden; }
This way the clearfix CSS is only applied for IE6, highlights what the extraneous markup is, and makes it easy to remove when IE6 is no longer supported.