I am using Wordpress (Divi theme page builder) and I'm trying to use flexbox css to horizontally align two image modules each in a separate column within a row, so that one appears on the left and one appears on the right.
I've added custom CSS to the row: 'display: flex; justify-content: space-between' which works for the left image module, but the right image is not being pushed fully to the right.
See the image below for an example. I've tried fiddling about with many settings but nothing is helping.
Example of Problem
The page is currently private on my website (www.mistyricardo.com) but if needed I can make it public for inspection.
Thank you in advance.
following...
Check and apply according to your markup
If the 'Currey at home - Volume 1' and 'Currey at home - Volume 2' books are in the same container:
.book-wrapper {
display: flex;
justify-content: space-between;
}
/* this is for demo only - ignore the below */
img {
height: 150px;
}
<div class="banner-header">
<div class="book-wrapper">
<img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1548876269l/43791788._SY475_.jpg" />
<img src="https://upload.wikimedia.org/wikipedia/en/f/f4/Gangsta_Granny_Cover.png" />
</div>
</div>
If the 'Currey at home - Volume 1' and 'Currey at home - Volume 2' books are not in the same container:
.banner-header {
display: flex;
}
.book-img {
margin-left: auto;
}
/* this is for demo only - ignore the below */
img {
height: 150px;
}
<div class="banner-header">
<div class="book-wrapper">
<img class="book-img" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1548876269l/43791788._SY475_.jpg" />
</div>
<img class="book-img" src="https://upload.wikimedia.org/wikipedia/en/f/f4/Gangsta_Granny_Cover.png" />
</div>
Related
I am trying to add some small .png icons in a horizontal row in a main container. I am struggling to figure out the easiest way to go about doing this
Here is a code sandbox of what I have created so far
https://codesandbox.io/s/broken-dew-76c4rf
I have been struggling with this for a while now and I cannot seem to get it. I have tried creating a div, inserting tags in the div but I don't think this is correct. Any help is greatly appreciated!
Do like this
First import the img_path at the top
import imgurl1 from "../public/img/aws.png";
import imgurl2 from "../public/img/c.png";
import imgurl3 from "../public/img/java.png";
Then define a div with style flex flex-direction:row like this
<div className="img-container">
<div className="img">
<img src={imgurl1} alt="aws" />
</div>
<div className="img2">
<img src={imgurl2} alt="c" />
</div>
<div className="img3">
<img src={imgurl3} alt="java" />
</div>
</div>
and style like this
.img-container {
display: flex ;
flex-direction: row ;
}
.img1, .img2 ,.img3 {
/* any style for the images */
background-color: black;
}
Just set the style from the div with the images to display: 'flex', flex-direction: 'row'
I am having a bit of an issue understanding the behaviour of flexbox with position fixed divs.
I am trying to get my nav to stick to the bottom but retain the flex styling I have used.
Basically the icons need to be evenly spaced along a row with a bit of margin to pull in the left and right.
This works absolutely fine but as soon as apply position fixed, bottom 0 the icons get squashed together on the bottom left of the screen can someone please explain.
const FooterNav = () => {
return (
<div className="FooterNave__div">
<HomeIcon />
<SearchOutlinedIcon />
<LocalHospitalOutlinedIcon />
<FavoriteBorderOutlinedIcon />
<PersonOutlineOutlinedIcon />
</div>
);
};
<footer className="app__footer">
<FooterNav />
</footer>
.app__footer {
margin: 0 4vw;
}
.FooterNave__div {
display: flex;
flex-direction: row;
justify-content: space-between;
}
html
<div class="xxx">
<div class="xyz" ng-repeat="item in formList">
<div ng-show="formList.indexOf(app)!= -1" class="added-item">
<img class="col-md-6 added-item-icon" ng-src="app.iconFile"/>
</div>
</div>
<div class="abc" ng-hide="formList.length>20">
<button class="btn" ng-click="addItem()">
Add<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
</div>
css
.xxx {
width:500px;
height: 80px;
}
.added-item-icon, .abc {
width: 50px;
height: 50px;
}
I'm not good in css, and have only very basic knowledge
I am trying to add some list of items in a horizontal tab of height 80 and width 500 pixels, also an add app button too
As per the code, the add app button disappear when we add the 20th app
what I need to do is, lets say the xxx div(horizontal div) can have 5 items, after which overflow occurs
I want to set the overflow horizontal, not vertical
also at that stage(when 5 items are added), I want to fix the add app button at the very right of the division xxx, and the scroll due to overflow should not affect that button, it should be fixed there
we doesn't need to care more about the size of the item icons or add button,
Please help
For this you'll want to look into using flexbox. To get this working, all you really need to do is add display: flex; flex-direction: column to your container, and then overflow-y: auto to the section you want to scroll.
Heres a Plunker demonstrating it.
I am using AngularJS with ui-grid and ui-view in an attempt to create a page with a tabbed container. Content of each tab (typically a ui-grid) is being displayed within a ui-view:
<div class="tabbed-container">
<uib-tabset>
<uib-tab ng-repeat="t in tabs" select="go(t.route)" active="t.active">
<uib-tab-heading>
<i class="glyphicon glyphicon-{{t.icon}}"></i>
{{t.heading}}
</uib-tab-heading>
</uib-tab>
</uib-tabset>
<div ui-view></div>
</div>
The content may look like this:
<div class="panel">
<div ui-grid="gridOptions" ui-grid-infinite-scroll ui-grid-selection ui-grid-tree-view ui-grid-resize-columns class="grid"></div>
</div>
The problem is that the ui-grid does not vertically fill the container - it's set to minimum height. All the css classes related to "panel" state only "height:100%", the height is not set anywhere else. Attempt of debugging this situation made me realize, that ui-view is correctly filled by a grid which size is incorrectly calculated. The tabbed-container is nested in other ui-view. Does anyone have a clue what could cause such behaviour or what could I try to fix it?
The problem was caused by not passing proper style to the content to ui-view. The solution was to use flex, set "flex:1" on container and pass it to ui-view.
.tabbed-container
{
flex: 1;
display: flex;
flex-flow: column;
/* Setting min-size is necessary to prevent weird flex behaviour on chrome and firefox */
min-height: 100px;
min-width: 100px;
.tab-content
{
flex:1;
/* Setting min-size is necessary to prevent weird flex behaviour on chrome and firefox */
min-height: 100px;
min-width: 100px;
}
}
html:
<div class="tabbed-container">
<uib-tabset>
<uib-tab ng-repeat="t in tabs" select="go(t.route)" active="t.active">
<uib-tab-heading>
<i class="glyphicon glyphicon-{{t.icon}}"></i>
{{t.heading}}
</uib-tab-heading>
</uib-tab>
</uib-tabset>
<div class="tab-content" ui-view></div>
I'm using twitter bootstrap. It has collapse module.
I'm using it like this.
<a class="dropdown" style="float: right;" href="#collpasediv" data-toggle="collapse"> Collapse </a>
This is the collpasediv
<div id="collpasediv" class="collapse in">
<div class"circlecount">
1
</div>
<div class"content">
Some text goes here
</div>
</div>
I would like to move half of the circle of circlecount outside the collapsediv.
By default bootstrap applies overflow:hidden attribute for collapsediv.
I tried by applying overflow:visible for both collpasediv and circlecount. But collapse not working properly. Can anyone help me to fix it? Thanks
PS: Circlecount div is just to display numbers with some circled background image. I want the half of the circle outside collpasediv and half of the circle inside collapsediv.
Thanks
In the stylesheet for the twitter bootstrap there is the following declaration:
.collapse.in { height: auto; }
Add to it like this:
.collapse.in { height: auto; overflow: visible; }
Or overload it by adding a new declaration like this (leave the other declaration untouched in the bootstrap - this makes updating in the future easier):
.collapse.in { overflow: visible; }