This seems to be a simple task but for some reason I am having issues removing a border when the display property is set to none.
From what I've always understood is that when the display property is set to none it removes that element from the html flow. However, in the example I've provided it still shows a border on the last element.
<div class="outer">
<div class="inner">
<div class="control">Foo</div>
<div class="control d-none">Bar</div>
</div>
</div>
https://jsfiddle.net/6hfzpcoL/
The 'd-none' element is still present, it is only not visible to the user. if you inspect the container you will see it is still there, so Foo isn't considered a last child - therefore border is still being applied.
What you are trying to achieve cannot be done with CSS only you would need to use Javascript or JQuery.
Related
I am working on a drag and drop query designer using HTML5 with AngularDart and CSS. For this issue all I really need to figure out is how to format the objects in HTML5 and CSS. I am running into formatting/positioning issues with the object in CSS. If you look below I have a div with the class "queryElement". The queryElementLine, queryElementHead, and queryElementBody sections of the object were already in this object and were formatting/positioning properly.
This UI allows a user to drag and drop one element onto another element. Once dropped I act upon the object to add the new element as a child, but I need to judge where in my collection of elements to add the new dropped item based on which edge of the drop zone element the new/moved element is dropped on.
I recently added divs with classed called "somethingDropZone" (left,top, right, bottom). These are objects I want to use to determine where the dragged element is dropped. I want them to mimic the top,left,right, and bottom border. I want them to show a 3px gradient border on :hover so the user can see where they will be dropping the item they are dragging. Below is the element html and images that give a better idea what I am facing and what i want to do.
This is what the element box should look like.
Here is what it looks like when I add a left border div.
Everything in the element is pushed down and the left dropzone object with its border stacks above it. What I want is to position the left dropzone inline with the other query element content.
Here is an image I created to show basically where I would like all 4 dropzones to be positioned:
What I am mostly looking for is some CSS guidance in how to make the dropzone divs float where the above image shows.
HTML Code:
<div class="queryElement"
(drop)="onDrop($event)"
(dragstart)="onDragStart($event)"
draggable="true">
<div class="queryElementLeftDropZone queryElementLeftDropZoneDragOver"></div>
<div class="queryElementTopDropZone"></div>
<div class="queryElementBottomDropZone"></div>
<div class="queryElementRightDropZone"></div>
<div class="queryElementLine"></div>
<div class="queryElementHead noselect">
<span class="idSpacer">#{{cohortQueryElement.id}}</span>
<button class="elementButton noselect" (click)="edit()"><img src="/packages/GenomicsPortal/assets/images/PNG icons/Edit.png" /></button>
<button class="elementButton noselect" (click)="delete()"><img src="/packages/GenomicsPortal/assets/images/PNG icons/Trash.png" /></button>
<button class="elementButton noselect" (click)="toggleIncludeExclude()"><img [src]="cohortQueryElement.includeExcludeImagePath"/></button>
</div>
<div class="queryElementBody"> {{cohortQueryElement.displayName}} </div>
<div class="queryElementFoot"> {{cohortQueryElement.displayData}} </div>
</div>
After giving this question some additional thought, I think I will avoid the issue altogether by not adding new objects/elements to hover at the edges. That solution seems to be causing the formatting issues.
It occured to me, rather putting objects to overlay the edges of the box, I could instead determine x,y ranges defining the top, left, bottom, and right of the existing box and then act based on dragover or drop within those x,y coords.
I will post to let you all know how that works out.
Is it possible to prevent the effect of ng-show on a specific child element.
Lets say I have the following html.
<div ng-show="showParent" class="parent">
<div class="childOne"></div> <!-- don't hide this -->
<div class="childTwo"></div>
</div>
Now what I would like to achieve is hiding everything except childOne. Actually hiding a parent, but one or some of its children?
No, you can't. The HTML standard prevents that. All children get hidden when the parent gets hidden, and AngularJS just adds things to HTML, it doesn't change it.
However, AngularJS allows one variable to control multiple elements, and can probably help us get the same affects you want. So let's go back to what you are really trying to accomplish. To do this, we're going to need some more details that you took out in this question to make the question smaller (and thank you for that). What about just hiding childTwo is not working for you? Are there other things in parent you need to hide? We can put those in seperate elements (div or span or something) and hide those with the same variable as we hide ChildTwo. Does parent have some formatting (say, a border or something) you need to hide? We can change what classes are on parent based on the same variable we use to hide the other elements to something that removes the border and any other styling, effectively making it not visible, although still technically present in the DOM.
ngShow relies on a CSS class (.ng-hide). You may be able to override that class with your own more specific selector for just the divs you want excluded from the directive.
<div class="parent" ng-show="showParent">
<div class="childOne nghide-override"></div>
<div class="childTwo"></div>
</div>
Source: https://docs.angularjs.org/api/ng/directive/ngShow
(I'm unable to test this right now, but I'll mock something up shortly and edit/remove this if it doesn't work.)
You could also just split the children out into divs and hide the second div:
<div class="parent">
<div class="shown children">
<div class="childOne"></div>
</div>
<div class="hidden children" ng-show="showParent">
<div class="childTwo"></div>
</div>
</div>
Use Jquery unwrap.
Include jquery in your application:
bower install jquery --save
Set on ready unwrap to specified div:
<script type="text/javascript">
$(document).ready(function() {
$(".childOne").unwrap();
});
</script>
In HTML, how do I prevent this "linebreak" when using the <div> tag?
Example:
<div class="menu"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
Visual example:
How do I make it so that apple appears directly to the right of menu? I can't seem to do that successfully; apple always appears to be below menu
NOTE: Pretend that 'apple' is inside its own invincible maroon box.
When using <span> instead of <div>, you need to get rid of the line breaks (<br>).
If using inline CSS (which is the style attribute), you may want to add style = "float:left;" to the first div only. This way:
<div class="menu" style="float:left;"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
It sounds like you have two block elements that you would like to display side by side?
Have you tried using the "display: inline-block;" property in your css yet?
You can change your CSS to include the following;
div.menu, div.apple {
float:left;
display:inline-block;
}
You might also need to set the width of each to less than 50%.
<div class="menu"><br><br>menu<span class="youtube"><br><br>youtube</div>
Suppose I have the following html:
<div style="width:200px;height:200px;overflow:scroll">
...
</div>
If the stuff in this div ends up overflowing, the most popular way to change the scrolling position of this item is to use jQuery.scrollTop(). However, I have a situation where I would like to set the initial scroll position of the div using the source HTML. Is there a way of doing this? All examples I see online for doing this end up using javascript.
One way I tried is to write a scrollTop property on the element, like so:
<div scrollTop=20 style="width:200px;height:200px;overflow:scroll">
...
</div>
However, this does not work. Surely, there must be a way to set the initial scrolling position of an overflowing item via HTML/CSS...
Here is a full version of this code that illustrates that it doesn't work- The vertical scrollbar remains at "0": http://jsfiddle.net/gueBZ/1/
Can anyone help me to make it work? Thanks so much for any pointers!
<div style="width:200px;height:200px;overflow:scroll">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="hello">autoscroll here</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
then open the page as
page.html#hello
this is the only thing you can do, with HTML only
I have a structure of divs inside divs, something like:
<div>
<div>
<div class='a'>Hello</div>
<div class='a'>Stack</div>
<div>Overflow</div>
</div>
<div>
<div>You</div>
<div class='b'>Are</div>
<div class='b'>The Best</div>
</div>
<div>
<div>Have</div>
<div class='b'>a nice</div>
<div>Day !!</div>
</div>
</div>
I would like all divs with class a to change the background color when one of them is hovered by mouse. The same for all divs with class b: when one of divs with class b is hovered, all divs with class b should change the background color.
Is that possible to implement this behavior without Javascript ?
If the answer is no:Is that possible if known that all divs with class a are consecutive divs in the same level (i.e. siblings) ?
I can add also other classes to divs, if needed.
You can get it "half working" in the simpler case where there are no container <div>s:
<div>
<div class='a'>Hello</div>
<div class='a'>Stack</div>
<div>Overflow</div>
<div class='b'>Are</div>
<div class='b'>The Best</div>
<div>Have</div>
<div class='b'>a nice</div>
<div>Day !!</div>
</div>
Then you could use the general sibling combinator, with the unfortunate caveat that it only works for elements that come after the element described on the left-hand side. So, for example, if you hovered over the <div> containing "The Best", only that and the "a nice" <div> would have a changed background:
div.b:hover, div.b:hover ~ div.b {
background-color:#CCCCCC;
}
I wasn't able to come up with a way that would fully take care of your scenario through CSS alone, though. I'm leaning towards what the others have said about it not being possible (even in the simplified case) right now.
i can't think of any solution, except there are css-parent-selectors (and, as far as myself and google know, those don't exist). if there would be things like that, you could do something like selecting the top parent af the hovered element and then select all elements of your class within that top-element (would look like .a < parent < parent < parent .a{ /*styles*/ }) - but, as said, this selectors don't exists, so the answer to you question is: no
No. Not without Javascript. CSS selectors are meant to apply styles to each element that matches the selector individually, so by design this won't happen.
Source
http://www.w3.org/TR/CSS2/selector.html#selector-syntax