I have a doubt about using Angular. I need to place the sentences next to each other. These are two different components that I created. I want recipe-list works and recipes-details works and these two sentences should show next to each other
<div class="row">
<div class="col-md-5 ">
<app-recipe-list></app-recipe-list>
</div>
<div class="col-md-7">
<app-recipes-details></app-recipes-details>
</div>
</div>
<p>recipe-list works!</p> <p>recipes-details works!</p>
The problem is, that component here take full width of window. So first, apply class to component directly:
<div class="row">
<app-recipe-list class="col-5"></app-recipe-list>
<app-recipes-details class="col-7"></app-recipes-details>
</div>
But also give them style display: inline-block;. The best way would be to apply :host pseudoclass in component's css (recipe-list.component.css and recipes-details.component.css):
:host {
display: inline-block;
}
Related
Consider an unknown number of divs being created dynamically and styled using the bootstrap grid system. In this example, I'm using col-sm-4 so after every third block, we move to a new row. The blocks (divs) can be different heights, which is determined by the content within.
This is where I run into the layout problem. When moving to a new row, I want the fourth block to float to the left. This only happens when the left most div in the row above is also the shortest. I have pictures to illustrate.
Real Life:
The Dream:
The "correct" way to do this would be to wrap every three in a row class I beleive, but I'm not sure how to do this with dynamic content (could probably hack it) or if there's an easy css solution.
HTML:
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 block">
<div class="inner-block"></div>
</div>
<div class="col-sm-4 block">
<div class="inner-block"></div>
</div>
<div class="col-sm-4 block">
<div class="inner-block" style="height:150px"></div>
</div>
<div class="col-sm-4 block">
<div class="inner-block"></div>
</div>
</div>
</div>
CSS:
.block {
padding: 5px;
}
.inner-block {
height: 200px;
background-color: blue;
}
Plunker Example (expand preview to proper size)
If your system is unable to add first/last classes on every nth div, then you can use the nth-child css pseudo selector.
#media (min-width: 768px) {// For medium displays and above
.col-sm-4:nth-child(3n+1) { // We target every 3rd div but offset the count by 1 so that that 1st, 4th 7th etc divs are cleared
clear:both; // Clear the float
}
}
I have a parent element that has Bootstrap 3's .row CSS class. Within this element are two child elements (each with a Bootstrap column class), one of which has a varying height depending on the data populating it. In the design I'm working with, the elements in this row need to be anchored to the bottom of the parent element.
The kicker (as the title and use of bootstrap suggests) is that this needs to be responsive. Thus absolute positioning of the child elements with bottom: 0px; is not an option.
Here's the current structure of the html:
<div class="row r4">
<div class="col-md-2">
<div class="bottom">
<div data-bind="text: description()"></div>
<span data-bind="text: metric()"></span>
</div>
</div>
<div class="col-md-8">
<div class="bottom">
<div data-bind="foreach: keyLabels()">
<div class="key-color">
<div data-bind="attr: {class: color + ' color-value'}"></div>
<div data-bind="text: label"></div>
</div>
</div>
</div>
</div>
</div>
I've done some research and haven't found a reliable method of solving this using a pure HTML/CSS solution.
I can think of a number of fairly straight-forward (albeit hacky) ways to solve this with JS, but for now I'd like to avoid that with possible.
Any ideas?
Here's a simplified version of your markup that helps more easily reproduce the issue:
<div class="row">
<div class="col-xs-2 pull-bottom"
style="height:100px;background:blue">
</div>
<div class="col-xs-8 pull-bottom"
style="height:50px;background:yellow">
</div>
</div>
So how do we vertically align each column to the bottom? See vertical-align with bootstrap 3:
.pull-bottom {
display: inline-block;
vertical-align: bottom;
float: none;
}
Working Demo in jsFiddle
Using CSS I am running into trouble getting a div later on the page to show up using the hover command over an img tag. I'm writing the page using Bootstrap 3 - Any idea why this may be a problem? The words in "hovershow" appear at the right spot on the page when they are not originally hiden using CSS which makes me think there's a problem with the command itself.
HTML
<div class="col-md-4 col-sm-4">
<img id="Email_Logo" class="featurette-image img-responsive" src="img/Email_Icon_Send1.jpg" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="hovershow"><p>This should show on hover</p></div>
</div>
</div>
CSS
.hovershow{
display:none;
}
#Email_Logo:hover .hovershow{
display: block;
}
That's definitely not how CSS works.
The following CSS implies there is an element .hovershow somewhere within #Email_Logo:
.#Email_Logo:hover .hovershow{
display: block;
}
And well... that's not the case. What you want can either be achieved by some easy Javascripting or a change in your HTML 'tree' and CSS.
I am using the following CSS to try and remove the left-border on the first child div of any element with the class called, "tblRow"
.tblRow div:first-child{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
This only removes the left-border from the first child div in the first row. It does not remove it in the second row. Any ideas?
I generally only use the :first-child and :nth-child psuedo selectors when I have little or no control over the elements or they are populated dynamically where I cannot rely on an order. Additionally, since :nth-child is CSS3, you can't rely on complete browser compatibility. If you can do without this psuedo selector, my advise is to create a secondary class for this purpose.
.tblCell.firstCell{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell firstCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell firstCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
It seems to work on the fiddle, so you probably have a (hidden) text node somewhere there. Therefore I suggest using .tblRow div:first-of-type { ... }, if possible from browser support point-of-view.
I'm using Bootstrap to set up my site layout and have something like:
<div class="row-fluid">
<div class="span3">
</div>
<div class="span9">
</div>
</div>
That works fine. However, I'm slightly bothered by the fact that this is defining the presentation in the markup and to make it easier to make future changes, I'd like to add another layer of indirection. I'd like to add my own class that defines the semantics and then include the Bootstrap class that defines the layout presentation. For example:
<div class="main-block">
<div class="side-bar">
</div>
<div class="content-area">
</div>
</div>
and my corresponding less file...
#import "twitter/bootstrap";
.main-block { .row-fluid }
.side-bar { .span3 }
.content-area { .span9 }
The less documentation states that you can "embed all the properties of a class into another class by simply including the class name as one of its properties" so it looks like it should work, but I am getting an error:
.row-fluid is undefined
Is there something that I am missing? Or is there a better way to go about this? This is in a rails 3.2 project using the less-rails-bootstrap gem if that makes any difference.
It's a little bit more complicated. What you're referring to is essentially what "mixins" are all about. First, let's resolve the error. From the little I see my bet is that you are trying to compile a "custom".less file and that you did not #import the variables.less and mixins.less files at the top of the page. Is that correct? If so, see if that gets the code to compile as expected.
However, once you get the code to compile you'll see that you have a new problem. In this particular case, by attempting to use a name other than .span you will lose any styling that is applied by the attribute selectors in the grid mixin, namely [class*="span"]. Compiled, it looks like this:
[class*="span"] { float: left; margin-left: 20px; }
.row-fluid [class*="span"] {}
.row-fluid [class*="span"]:first-child { margin-left: 0; }
So in this case the attribute selectors apply their styles to any class that starts with "span".
Here are a couple of options that might be better for you:
1) Adding the word "span" before your custom class names should work
<div class="row main-block">
<div class="span-side-bar">
</div>
<div class="span-content-area">
</div>
</div>
2) And using multiple classes will work, but only if you don't apply any styling to the custom classes that would negate any styles in the native grid classes:
<div class="row main-block">
<div class="span3 side-bar">
</div>
<div class="span9 content-area">
</div>
</div>
3) My recommendation is to live with the little bit of extra markup required to maintain the default Bootstrap grid system. Renaming sounds great now, but if you have any desire to merge in future updates, the one mixin I'd leave alone is the grid.
<div class="row">
<div class="span3">
<div class="side-bar">
</div>
</div>
<div class="span9">
<div class="content-area">
</div>
</div>
</div>