I'm using a CMS with predefined classes (cbFormFieldCell).
So I can't change some class elements because they are used at some other parts of the website. If I change the format for every element of that class the website is broken.
I want to change the style of the class "cbFormFieldCell" only inside a <table class="tabelle">. Outside the table the other elements may not be changed.
.cbFormFieldCell { min-width: 300px; max-width: 300px; overflow: hidden;}
That works for every class of the website. But some objects are broken.
Is it possible to do something like that:
Change only predefined class="cbFormFieldCell" elements in table class="tabelle"?
e.g.
.tabelle.cbFormFieldCell
{ min-width: 300px; max-width: 300px; overflow: hidden; }
Can anyone help?
The 'space' between your CSS classes are used to target different elements. Below you will find an example what happens when you combine classes without or with spaces.
Hopefully this help you to understand how to target your element.
.parent-1 .child {
color: green;
}
.parent-2.child {
color: red;
}
/* addition styling */
p {
padding: 20px;
background-color: #eff0f1;
border-radius: 10px;
}
<!-- Without container -->
<p class="child">No CSS rules are applied here.</p>
<!-- With containers -->
<div class="parent-1">
<p class="child">This will be targeted: green</p>
</div>
<div class="parent-2">
<p class="child">No CSS rules are applied here.</p>
</div>
<div class="parent-2 child">
<p class="child">This will be targeted: red</p>
</div>
You can use css !important like this
.cbFormFieldCell { min-width: 300px !important; max-width: 300px !important; overflow: hidden !important;}
"!important" makes css attribute to be first-level
You are concatenating the classes by writing them with no space, which basically means
.tabelle.cbFormFieldCell will apply to an element that has BOTH those classes.
In order to target .cbFormFieldCell inside of .tabelle add a space between them like this .tabelle .cbFormFieldCell.
Or if it's a direct child of .tabelle, you can use the descendant selector like this .tabelle > .cbFormFieldCell
Thank you everyone!
I actually had to remove the space, use important and additionally use another default class.
.cbFormTableEvenRow .cbFormFieldCell
{ min-width: 100px !important; max-width: 100px !important; width: 100px !important; overflow: hidden !important; }
Related
I am currently building a todo app, and from react, I am using CSS to custom my todo items' margin!
The problem is, I only needed the first element to have a margin-top of 110px. Here's what it'll look like when I apply it to every item - link
It's that the todolist items are too separated!
But if I removed the margin of 110px, the item is behind the textbox!
link
Is there a way to change the property of first item? I can delete the margin-top: 110px from the css file, and change the 1st item using JS. My planned function -
function addTodo() {
setList([...list, value]);
const firstItem = list.findIndex(0);
}
Thanks!
:first-of-type selector in CSS allows you to target the first occurence of an element within its container. Also, another option might be to select first child of the element, you can use :first-child pseudo-class.
There are several possibilities to solve this problem. I think the simplest one is to just build a container that contains all list items, and set it's padding-top or margin-top to 110px. The result could look like this:
.frame {
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 200px;
border: 1px solid #000;
text-align: center;
}
.control-button {
position: absolute;
}
/* this is the container that holds all your items */
.items-container {
margin-top: 40px; /* in your case, it should be 110px */
}
.item {
margin-top: 10px;
border: 1px solid #000;
}
<html>
<body>
<div class="frame">
<div class="control-button">
<u>add item</u>
</div>
<!-- this is the important part, the container with the items -->
<div class="items-container">
<div class="item">
This is an item.
</div>
<div class="item">
This is another item.
</div>
</div>
</div>
</body>
</html>
I think this solution is the most simple and flexible one. You can easily add left, right or bottom margins too and you don't have to worry about which items it affects.
The simplest solution you can go with is using the :nth-child(n) pseudo class in CSS or :first-of-type.
Try this code:
.item:nth-child(1) {
margin-top: 110px;
}
There is the DOM property hidden and the CSS property visibility. After reading up on their descriptions I can't really tell when to use which. In what respects does their intended usage differ?
I understand that they functionally might do (many of) the same things, but I am talking about intent.
CSS Visibility is used to hide an element and allocates space for the hidden element in the document layout. As opposed to DOM Hidden which merely hides the element from being shown on the page, without allocating space for the given element.
Perhaps you are looking for display: none?
What is the difference between visibility:hidden and display:none?
Intended usage
The intended usage for hidden (and also explicitly when not to use it) is explained on the page you linked:
The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed.
The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.
Normal display:
.box {
background-color: #f0f0f0;
padding: 50px;
}
.inner {
background-color: #ccc;
height: 200px;
}
<div class="box">
<div class="inner"></div>
</div>
[hidden]
.box {
background-color: #f0f0f0;
padding: 50px;
}
.inner {
background-color: #ccc;
height: 200px;
}
<div class="box">
<div class="inner" hidden></div>
</div>
visibility: hidden;
.box {
background-color: #f0f0f0;
padding: 50px;
}
.inner {
background-color: #ccc;
height: 200px;
visibility: hidden;
}
<div class="box">
<div class="inner"></div>
</div>
display: none;
.box {
background-color: #f0f0f0;
padding: 50px;
}
.inner {
background-color: #ccc;
display: none;
height: 200px;
}
<div class="box">
<div class="inner"></div>
</div>
Using HTMLElement.prototype.hidden property:
document.querySelector('.inner').hidden = true;
.box {
background-color: #f0f0f0;
padding: 50px;
}
.inner {
background-color: #ccc;
height: 200px;
}
<div class="box">
<div class="inner"></div>
</div>
Look , if you use visibility prop. in css you will see in html a 'free' space which contains your css element . If you use DOM hidden , it just removes that element . I explain this so .
Use of both css visibility property with hidden value and html hidden attribute is intend to hide element. But there is little difference in between them. css visibility property with hidden value contain its area that is it's height and width. But hidden attribute doesn't contain its DOM area. Here hidden attribute works like css display property with value none. You may will be clear with following example:
<p style="visibility:hidden">Hello how are you?</p>
<p hidden>I am fine.</p>
Now just inspect your browser and check, both are invisible but first paragraph element still contain its area.
I am beginner to UI World, trying to style and arrange html components in one of my example, but I could not see the style applied for all the children of HTML header component. Here is what I have tried Demo in JsFiddle
.page_header_style {
border: 1px solid blue;
}
.title_style {
text-align:center;
}
ul {
list-style: none;
}
li {
display: block;
}
.user_style {
float: right;
margin-top: 0px;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
I would like to see the second div i.e., Welcome message & a list in the same line of the title, keeping the title at the center.
In order to make the "title" text in the center viewport wise, you can make the "user info" as position:absolute, so it will be out of the normal content flow. See the demo below.
.page_header_style {
border: 1px solid blue;
padding: 20px 0;
position: relative;
}
.title_style {
text-align:center;
}
.user_style {
position: absolute;
top: 10px;
right: 10px;
list-style: none;
padding: 0;
margin: 0;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
JSFiddle Demo: http://jsfiddle.net/wt5f81qz/
You should apply float: left to the .title_style, and put a clearing element (clear:both) on the bottom of inner content of .page_header_style
Here: http://jsfiddle.net/r1af39at/
Kosturko answer regarding clearfixes
You can alternatively use the clearfix solutions with is better than adding clear:both to an element, because in some case you'd need extra markup to apply clear:both.
The both clearfixes are applied to the immediate parent containing the floating elements.
Clearfix 1: is just to apply overflow:hidden; this works but can cause styling issues if say you wanted something to flow outside the parent using position absolute for example.
The better clearfix is to use the micro clearfix, best applied using a CSS preprocessor.
Good luck
By default, div elements have the display: block; attribute. Without other css styling, browsers will render them below the last block element. Try using the display: inline-block; as this will treat each div as an inline element, but treat its contents as the contents of a block element.
For example, the following css will display the main title and both list elements on the same line.
li{
display: inline-block;
}
div {
display: inline-block;
}
See w3schools's page on the display property for more on this.
Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.
each image is layed out like so
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1></div>
<img class="display" src="http://placehold.it/400x300">
</li>
Can see a live example here.
http://jsfiddle.net/QLUMH/
Any ideas on ways to fix/improve what I am doing here? Cheers
Demo
Here you have live example,
you are giving 100% to width and height.
so that really goes overflow.
Code edited-
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.
I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:
<div class="ib">
<div class="description">
<h1>Image hover</h1>
</div>
<img class="display" src="http://placehold.it/400x300">
</div>
And then just created a very simple CSS rule for making this wrapper collapse to its contents:
.ib {
display: inline-block;
position: relative;
}
You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).
#portfolio li.columns{
/* You can use the width in '%' if you want to make the design fluid */
width: 400px;
padding: 0px;
margin: 0px 0.9375em;
}
Fiddle
You'll just have to get rid of the padding on tne li
li{ padding:0 }
or use the the box-sizing property:
`li { box-sizing:border-box; -moz-box-sizing:border-box; }
Change in CSs will help,
I have updated the same in fiddle
with change in CSS,
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
#portfolio .description h1 {
color: white;
opacity: 1;
font-size: 1.4em;
text-transform: uppercase;
text-align: center;
margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}
Update:
If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!
I hope this will solve your problem :)
I want a gap of say 30px; between all children of my div. E.g if I have:
<div id="parent">
<img ... />
<p>...</p>
<div>.......</div>
</div>
I want all of them to have a space of 30px; between them. How can I do this with CSS?
For an unknown amount of children you could use.
#parent > * {
margin: 30px 0;
}
This will add a top and bottom margin of 30px to all direct children of #parent.
But img is not displaying as block default, so you may use:
#parent > * {
display: block;
margin: 30px 0;
}
Vertical margins of block elements will be collapsed. But you will have margins at top and bottom of your parent div. To avoid that use the following code:
#parent > * {
display: block;
margin-top: 30px;
}
#parent > *:first-child {
margin-top: 0px;
}
This will only add top margin and removes that top margin for the first element.
The following css will work well
div > *:not(:last-child) {
display: block;
margin-bottom: 30px;
}
> selects all elements that are direct children of the div (so you don't get weird inner spacing issues), and adds a bottom margin to all that aren't the last child, using :not(:last-child) (so you don't get a trailing space).
display: block makes sure all elements are displayed as blocks (occupying their own lines), which imgs aren't by default.
You can easily do that with:
#parent > * + * {
margin-top: 30px;
}
This will be applied to all direct children except the first one, so you can think of it as a gap between elements.
Probably the easiest way is this:
#parent * {
margin-bottom: 30px;
}
or
#parent * {
margin: 15px 0;
}
Keep in mind, though, that this will get everything in #parent, including things inside the p and div tags. If you want just the direct children, you can use #parent > * (this is call the direct descendent selector) instead.
Keep in mind, <img> is an inline element by default, so you might need to do:
#parent img {
display: block;
}
for it to use the margins.
Use CSS gap property.
.parent_class_name{
gap: 30px;
}
The above CSS code will apply a gap/separation of 30px between children of the parent_class_name class.
Example: This code will apply 1rem gap between element (rows and columns).
<div class="gap_container">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
.gap_container{
display: flex;
flex-direction: column;
gap: 1rem;
}
The gap property defines the size of the gap between the rows and columns. It is a shorthand for the following properties:
row-gap
column-gap
Apply row and column values separately.
gap: row-value column-value;
Learn more: w3school
Create a CSS class for them with code:
.BottomMargin
{
margin-bottom:30px;
}
And assign this class to parent's children using jQuery or manually like this:
<div id="parent">
<img class="BottomMargin" ... />
<p class="BottomMargin">...</p>
<div>.......</div>
</div>
the last one may not have one and this is also doable using jQuery.
You can try it by CSS standarts:
div > *{
margin-top:30px;
}
More info could be found here: http://www.w3.org/TR/CSS2/selector.html#child-selectors
Just put a top and bottom margin of 30px on your p element:
p { margin: 30px 0 30px 0; }
Note: the above will add this margin to all your p elements. To restrict to just this one, either add an inline style attribute:
<p style="margin: 30px 0 30px 0;">...</p>
or better use a class:
<p class="mypara">...</p>
and in css:
p.para { margin: 30px 0 30px 0; }
Btw, the notation here for margin is:
margin: top right bottom left;
Or you can individually specify top and bottom margins:
margin-top: 30px;
margin-bottom: 30px;
So you could have a class like this:
.bord { margin-bottom: 30px; }
and add this class to every element you want to have a margin-bottom of 30px:
<div class="bord">....</div>
Surest way is to add a class to all of the internal elements with the exception of the last one.
<style>
.margin30 {
margin-bottom: 30px;
}
<div id="parent">
<img class="margin30" ... />
<p class="margin30">...</p>
<div>.......</div>
</div>
This way, additional elements can just be tagged with the class. Remember that you can multiclass style elements by separating them within the class value in the tag with spaces, like so:
<img class="margin30 bigimage" ... />
Finally, you can attach the classes dynamically with Javascript (code off the top of my head, not tested, no sanity checks or error handling, ymmv etc.):
function addSpace(elementId) {
children = document.getElementById(elementId).childNodes;
for (i=0;i<(children.length - 1);i++)
children[i].className = "margin30 " + children[i].className;
}