I am trying to display a recursive pyramid looking tree diagram but am struggling with the basic css html implementation
my current implementation is here...
https://dbuirep.firebaseapp.com
the goal is to be able to have balanced looking trees even with unbalanced subtrees... is this manageable?
.div1 {
}
.div2 {
display: inline-block;
vertical-align: top;
}
.div3 {
display: inline-block;
}
<div class="div1">
<div class="div2" *ngFor="let node of treeData">
<div class="div3">
{{node.name}}
</div>
<div><app-tree-view [treeData]="node.subnodes"></app-tree-view></div>
</div>
</div>
I suggest you to use FlexLayout from Angular.
This is an independant library that allows you to manage all your position problem with efficiency.
Related
My issue is that while the a tag is in the container the ":hover +" does not work. If I move the a tag outside the container it works fine. Using a basic div instead of the bootstrap container produces the correct result. Is there something that blocks this from happening in the bootstrap libraries?
HTML :
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8">
test
</div>
<div class="col-sm-4">
<div class="info">
<h1>Info</h1>
<div class="info-box">
<div class="one">one</div>
<div class="two">two</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS :
.
info{
text-align:center;
}
.info-box{
width: 70%;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
.one, .two{
display: none;
}
a:hover .container
> .row > .col-sm-4
> .info > .info-box
>.one{
display: block;
}
Codepen
Because the element that you want to show when you hover over the tag is NOT a child of the element your are hovering over, it's not going to be possible to target the element via CSS.
Your best bet is to use some very simple javascript/jquery.
Since you are using Bootstrap, I'm going to assume you are loading jQuery.
Here's a codepen: http://codepen.io/anon/pen/WrMPXY
$(document).ready(function(){
$('.test').hover(function() {
$('.one').toggle();
});
});
Let's look at what the jQuery is doing. The first line simply says "when the page is loaded, do this..."
In the second line, we start by grabbing the element with a class of "test". You could also target something with an id using $('#test'). Now that we have that element, we want to tell it to do something when we hover over it.
The third line starts with the element we want to do something with, in this case the element with a class of "one". The "toggle" function is a simple shortcut to hide/show. You also could use the hide() function, show() function, or fun things like slideUp(), slideDown(), or slideToggle().
That's it. Let me know if you have anymore questions regarding the jQuery. I have no idea how familiar you are with it so I apologize if this is all obvious.
The only CSS you need is a default state of "display:none;" on the elements you want to hide and show via jQuery.
If you looking for only css solution, you have to col-sm-8:hover
.col-sm-8:hover + .col-sm-4 > .info > .info-box > .one {
display: block;
}
in this case you might reduce width of col-sm-8 block. I just added float to this class, you can have another solution!
.col-sm-8 {
float: left;
}
jsfiddle-link
Back in the 2003, when my templates where cut into a tables, I used to position all the text how I wanted.
I know it's a newbie question and I should probably take some beginner css courses, but the question is - how to position text with as little fuss as possible like that:
start at 0 px start at 100px start at 300px
For the example you post in your question, I would go about it something like this:
span {
display: inline-block;
}
span:nth-of-type(1) {
width: 99px;
}
span:nth-of-type(2) {
width: 199px;
}
<span>Start at 0px</span>
<span>Start at 100px</span>
<span>Start at 300px</span>
HTML
<div class="item start0">
start at 0px
</div>
<div class="item start100">
start at 100px
</div>
<div class="item start300">
start at 300px
</div>
CSS
.item{
float:left;
}
.start0{
width:100px;
}
.start100{
width:200px;
}
.start300{
width:100px; // example
}
Width is the best bet. If you're going to use a div, you need to float left or the divs will be pilled up.
I am a newbie to bootstrap. I have developed a weppage using bootstrap3. I'm using these two classes on the same element, but the css is not having any effect:
HTML:
<div class="col-md-4 auminascroll">
dfgdgdfgdfgsdfgh cxzvdzfhfdbfd fbfddf
</div>
<div class="col-md-4 auminascroll">fghfdghfdhdfhfdsh</div>
<div class="col-md-4 auminascroll">dfgdsgdsfg</div>
Css:
.col-md-4 .auminascroll {
height: 50px;
overflow-y: auto;
}
I am not getting a scroll when using above code. If I put height: 50px; overflow-y: auto; in a style tag, my code works fine. Why is this css not having an effect when using it with this bootstrap class? Is there any problem with my code?
Any help will be greatly appreciated!!!
You're nearly there! When using a selector to choose two classes there should be no space between the class names - they just need separating with a dot.
.col-md-4.auminascroll { /* no space between the two classes */
height: 50px;
overflow-y: auto;
}
Your code (where there's a space between the two classes: .class-a .class-b would actually look for an element of class-b inside and element of class-a.
<div class="col-md-4">
<div class="auminascroll">
</div>
</div>
You are using the wrong css selector. You need to use it like:
.col-md-4.auminascroll {
height: 50px;
overflow-y: auto;
}
We're using BEM extensively but are running into several ways of structuring and naming components and wanted opinions on best practice. We're using the notion of 'objects' for reusable components (e.g. .box, .media, .btn) and 'components' for designed UI components that tend to be a combination of objects.
As an example of the issue, consider this from a wireframe:
The idea being than an image is overlayed with the number of other images available for this particular item.
There are at least two ways of tackling this layout and we're trying to work out the best option.
Option 1
Apply the layout in markup/CSS rather than as a component. All of the styles below could then be re-used between projects; none are project-specific.
HTML:
<div class="relatively-positioned">
<img src="..." alt="" />
<div class="box box--rounded absolutely-positioned offset--10-10">12</div>
</div>
CSS:
.box {
padding: 5px;
}
.box--rounded {
border-radius: 5px;
}
.relatively-positioned { position: relative; }
.absolute-positioned { position: absolute; }
.offset--10-10 { top: 10px; left: 10px; }
Option 2
Implement this as a component made up of an image and a box for the count.
HTML:
<div class="image-preview">
<img class="image-preview__img" ... />
<div class="image-preview__count box box--rounded">12</div>
</div>
CSS:
The same CSS would apply for box / box--rounded and would be generic for re-use between projects. The component would be defined for this project only:
.image-preview {
position: relative;
}
.image-preview__count {
position: absolute;
top: 10px;
left: 10px;
}
Thoughts, opinions and other ideas all greatly received!
Second option is better because you end up with semantic blocks instead of inline-css-like approach in the first one.
You should think of your interface in terms of what it does and not in terms of what it looks like. Otherwise it's much harder to update design or actually do any change.
The best choice depends of your design. Repeating visual patterns can be implemented as reusable blocks, and semantic should be used for all specific cases.
Your second option is a mix of a semantic pattern (image-preview) and a visual pattern (box), probably good with your design.
If the pattern of an offset 10-10 is reused in many blocks, it can be implemented as a visual pattern block. But in the first choice, the classes relatively-positioned and absolutely-positioned are a bad idea. This is a confusion between visual patterns and CSS techniques.
An example of visual pattern implementation for the offset:
HTML:
<div class="image-preview offset-container">
<img class="image-preview__img" ... />
<div class="image-preview__count box box--rounded offset-container__offset">12</div>
</div>
CSS:
.offset-container {
position: relative;
}
.offset-container__offset {
position: absolute;
top: 10px;
left: 10px;
}
I have the following html. I need to align the .faf-text fields to each other vertically without using a table.
<div id="faf-field-2" class="faf-field faf-field-input ">
<div class="faf-name"> Vendor </div>
<div class="faf-text"> Brocade </div>
</div>
<div id="faf-field-6" class="faf-field faf-field-input ">
<div class="faf-name"> Platform </div>
<div class="faf-text"> ADX </div>
</div>
<div id="faf-field-7" class="faf-field faf-field-input ">
<div class="faf-name"> Version </div>
<div class="faf-text"> 12.4 </div>
</div>
An example of what the layout should be like is below :
Vendor Brocade
Platform ADX
Version 12.4
Thanks
You can use the CSS display: table to make your elements act like a table.
Use display: table-row; for the container <div> tags to make it behave like a <tr> and display: table-cell; for the elements inside to make it behave like <td>.
Something like this:
.faf-field-input{
display: table-row;
}
.faf-field-input div{
display: table-cell;
}
.faf-name{
width: 80px; /*for testing*/
}
jsFiddle DEMO
Just use
float: left
for both classes.
An ex:
.faf-name{
width: 200px;
float: left;
/* other CSS may come here */
}
in the same way,
.faf-text{
width: 200px;
float: left;
/* other CSS may come here */
}
It would have been easier and clearer if you have provided jsfiddle. Hope this will work for you
Just Use this css property so faf-text fields to each other vertically without using a table.
.faf-field{display:table-cell;}
DEMO
From your code, it looks to me that you are displaying tabular data.
So it's perfectly good to use a table.