I've got rather a confusing situation in my layout. As I have attached below, the design shows text which a double lined and single lined. I set a margin to single lined texts so that it gets aligned. When there is a double lined text, I have to manually set the margin. Is it possible to set this without wrting a javascript function? could it be cone using pure CSS without having specific margins for each text type.
My div structure is as following.
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x"></i>
<span>Ring</span>
</div>
Yes, rather simple too using line-height and height:
.operation .itemText{
line-height: 15px;
height: 30px; /* at least twice the line-height */
}
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x"></i>
<span class="itemText">Ring</span>
</div>
The trick is defining a space for the text to the height of two lines. The small worded items still take up two lines, but fill only one with text.
Alternatively, you could give the whole .operation a min-height, but I prefer not to, as mobile responsiveness gets trickier the more you define heights.
With CSS Flexbox you don't need any specific height, it will align anyway, using margin: auto 0, and it does not matter how many lines you have.
.wrapper {
display: flex;
}
.operation {
display: flex;
flex-direction: column;
}
.operation .itemText {
margin: auto 0;
}
/* styles added for this demo */
.wrapper { margin-bottom: 20px; }
.operation { padding: 10px; }
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>2 lines</span>
</div>
</div>
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>3<br>lines</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
</div>
Related
I've positioned Vis-network within flex sections.
You can see the full code here: https://codepen.io/MadBoyEvo/pen/XWdgzoB (try moving elements down)
The problem is whenever I try to resize the height of the section manually to '1000px' or whatever value the height of the diagram stays the same. When I push height directly to diagram sections resize properly. But this is problematic when I put something on the right side that expands the main section, and the diagram stays put with the default size. I tried to use autosize for vis.js but it doesn't seem to affect anything.
var options = {
"interaction": {
"hover": true
},
"autoResize": true
};
I tried height/width 100% and it seems it treats min-height as max-height as well.
.diagram {
min-height: 400px;
width: 100%;
height: 100%;
border: 0px solid unset;
}
.vis-network:focus {
outline: none;
}
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a> <a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
</div>
<div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
</div>
<div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
</div>
</div>
</div>
<div class="flexPanel overflowHidden defaultPanel">
<div></div>
</div>
</div>
</div>
</div>
I guess it could be related to position relative/absolute - but if i remove it diagram resize itself automatically slowly which looks very weird.
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
The end goal for me is to have a diagram resize automatically if something on the right side expands, and shrink if it's smaller (min 400px), unless I force the diagram to a static value. Also if I set sections/panels to something bigger I would like diagram to resize itself to match it.
Right now it seems I am fighting flex to position it properly.
On the path from the element with height:1000px to the element containing the diagram, there is a div element which does not propagate the height.
This can be fixed by setting display:flex on that element, see css class fix1 and its corresponding html element in the code below.
The other css class, fix2, shows how you can make the right panel autosize its width (based on the width of its content and a minimum width you choose, 600px in this example) a have the left panel take up the remaining space.
.fix1 {
display: flex;
flex-direction: column;
}
.fix2 {
flex-basis: auto !important;
min-width:600px;
}
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a> <a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
</div>
<div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="defaultSection overflowHidden fix1">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
</div>
<div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
</div>
</div>
</div>
<div class="flexPanel overflowHidden defaultPanel fix2">
<div></div>
</div>
</div>
</div>
</div>
You can see the full code here
I've got this block of code that creates a drop-down sign in box:
<li id="login-link">SIGN IN
However, this is being appended to a hamburger menu when the mobile width media query is called, which isn't ideal. My questions is - is there a way to refactor this that changes this drop-down sign in box to simply an a tag () at the mobile width?
Thanks!
I would duplicate the <li id="login-link">...</li> element and create a class to display/hide them based on a media query. Something like this maybe:
#media only screen and (max-width: 599px) {
.mobile-only {
display: inherit;
}
.desktop-only {
display: none;
}
}
#media only screen and (min-width: 600px) {
.mobile-only {
display: none;
}
.desktop-only {
display: inherit;
}
}
<li id="login-link mobile-only">SIGN IN (MOBILE)
<li id="login-link desktop-only">SIGN IN (DESKTOP)
I would consider using Bootstrap for something like this as well.
Maybe it will help. On the same page, a view opens:
<div class="media-left pr-1">
<span class="avatar avatar-md"><img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-7.png" alt="Generic placeholder image"></span>
</div>
<div class="media-body w-100">
<h6 class="list-group-item-heading">Wayne Burton</h6>
<p class="list-group-item-text">to me <span>Today</span>
<span class="float-right">
<i class="la la-reply mr-1"></i>
<i class="la la-arrow-right mr-1"></i>
<i class="la la-ellipsis-v"></i>
</span>
</p>
</div>
</a>
</div>
<div id="collapse21" role="tabpanel" aria-labelledby="headingCollapse2" class="card-collapse collapse" aria-expanded="false" style="">
<div class="card-content">
<div class="email-app-text card-body">
<div class="email-app-message">
<p>Hi John,</p>
<p>Thanks for your feedback ! Here's a new layout for a new Modern Admin theme.</p>
<p>We will start the new application development soon once this will be completed, I will provide you more
details after this Saturday. Hope that will be fine for you.</p>
<p>Hope your like it, or feel free to comment, feedback or rebound !</p>
<p>Cheers~</p>
</div>
</div>
</div>
</div>
I'm using an header bar from the clarity.design examples, I tinkered with it trying to make the search input occupy 100% of the center of the header bar, but I'm unable to do it.
The code:
<clr-header class="header-6">
<div class="branding">
<a [routerLink]="['/']" routerLinkActive="router-link-active" class="nav-link">
<span class="title">Project Clarity</span>
</a>
</div>
<form class="search" (ngSubmit)="onSearchSubmit(f)" #f="ngForm">
<label for="search_input"></label>
<input id="search_input" name="search_input" type="text" placeholder=" Search for keywords or paste link..." ngModel required>
</form>
<div class="header-actions">
<div class="header-nav" [clr-nav-level]="1">
<a class="nav-link nav-text">
My menu
</a>
</div>
<clr-dropdown>
<button class="nav-icon" clrDropdownTrigger>
<clr-icon shape="user"></clr-icon>
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a clrDropdownItem>Preferences</a>
<a clrDropdownItem>Log out</a>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</clr-header>
This is how it looks like, I want the header to use all the remaining width.
Thanks.
The header is using flex box for layout.
Here is a POC stackblitz that uses the below css to override the default search styles.
CSS
.search {
border: 1px solid deeppink;
flex: 1 1 auto;
max-width: none;
}
.search > label {
flex: 1 1 auto;
max-width: 90%;
}
.search > label > input {
width: 100%;
}
It should give you a starting point to tweak for your apps visual style. You may also need to address the responsive use case.
The solution of your problem is CSS.
I gave you an example below that shows you where you can start from.
Let me know if this helps you out.
/* First, make your elements float to the left or right */
.header-6 div
, .header-6 form {
float: left;
}
div.header-actions{
float: right;
}
/* Then give them some space */
div.branding
, form.search
, div.header-actions {
padding-left: 20px;
padding-right: 20px;;
}
/* The rest is using FontAwesome and CSS to add the icons and the other stuff */
<clr-header class="header-6">
<div class="branding">
<a [routerLink]="['/']" routerLinkActive="router-link-active" class="nav-link">
<span class="title">Project Clarity</span>
</a>
</div>
<form class="search" (ngSubmit)="onSearchSubmit(f)" #f="ngForm">
<label for="search_input"></label>
<input id="search_input" name="search_input" type="text" placeholder=" Search for keywords or paste link..." ngModel required>
</form>
<div class="header-actions">
<div class="header-nav" [clr-nav-level]="1">
<a class="nav-link nav-text">
My menu
</a>
</div>
<clr-dropdown>
<button class="nav-icon" clrDropdownTrigger>
<clr-icon shape="user"></clr-icon>
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a clrDropdownItem>Preferences</a>
<a clrDropdownItem>Log out</a>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</clr-header>
I am trying to create a design using bootstrap which has a fixed top navbar, 2 columns below that. The first column has a fixed top div with full parent width and more content beneath it which can scroll(the fixed div and navbar cant). The second column has an image which covers the whole column and nothing more.
I have done the following:
<nav class="navbar navbar-default navbar-fixed-top black">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OWOL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>EVENTS</li>
<li>SPONSORS</li>
<li>DASHBOARD</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid" style="margin-top: 80px;">
<div class="row">
<div class="col-md-8" id="content">
<div class="row" id="head-section">
<div class="col-md-10 text-center">
<h1 class="red">MEGA LEAGUE</h1>
<h4>FOOTBALL</h4>
</div>
<div class="col-md-2 text-right" style="padding-top: 20px;">
EDIT DETAILS
</div>
</div>
</div>
<div class="col-md-4">
fixed sidebar
</div>
</div>
</div>
With this little JS:
$(function() {
var new_width = $('#content').width();
$('#head-section').width(new_width);
});
Here's some relevant CSS:
#head-section {
position: fixed;
top: 80px;
padding-left: 50px;
padding-bottom: 20px;
padding-right: 50px;
box-shadow: 0 0 3px #000;
width: 100%;
background: #fff;
z-index: 2;
}
What happens is this:
As you can see the text "fixed sidebar" is going behind the fixed div(#head-section). That's because JS is setting its width as 1001px which is wrong according to chrome's inspect element which tells me its just 900px.
What am I doing wrong and how should I solve it?
Here's the bootply: http://www.bootply.com/0xIGx67IzM
Ok so there are two way to resolve your problem
JQuery Solution
Change the width with outerWidth
$(function() {
var new_width = $('#content').outerWidth();
$('#head-section').outerWidth(new_width);
});
CSS Solution
just replace width:100% width width:inherit in #head-section
#head-section {
width: inherit;
}
JQuery Example
CSS Example
You're setting your #head-section width equal to the width of the parent and then you're adding 100px of padding to it (50px to each side).
See this link for more info: http://quirksmode.org/css/user-interface/boxsizing.html
With standard positioning (position:static; or position:relative;) if you were to set your #head-section to {display:block;} (omitting the width:100%) that would automatically set it to fill 100% of the available horizontal space, and then your padding would push in instead of out.
In this case, however, because you're using position:fixed, your easiest solution would be to use your existing javascript and html (still removing the width:100% from your #head-section properties), but wrap the #head-section in another container element (perhaps an article for the sake of code legibility?)
From there you can update your javascript to:
$(function() {
var new_width = $('#content').width();
$('article').width(new_width);
});
See fiddle: https://jsfiddle.net/znhws64p/1/
I just want my all images from my instafeed will all be the same size, shouldn't be distorted and image will resize freely (responsive), and i want it to look exactly like this: instagram images , we can zoom the image a bit and make overflow hidden, its just i dont know the tricks :)
here is my work: http://jsfiddle.net/jazzu20/1c9yf61x/
img {
max-width: 100%;
border: 0;
}
.col-md-3 {
width: 25%;
float: left;
}
.livery-instafeed-section {
min-height: 285px;
}
<div class="livery-instafeed-section col-md-12">
<div id="instafeed">
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9JOiOdMLo5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11251638_621920521284538_937019183_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Gp4RjMLgE/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/1390058_175285799480082_576833592_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9FJpd7MLts/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12093236_443227142549068_286565452_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9D_lqkMLqV/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12145135_1069396733117579_706096349_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Bb92JMLhh/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12093429_1668694736699760_1827692759_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9ACbbHMLlD/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12135431_1733638416868070_1024332902_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/8_BXkSsLn5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12105054_849750965144841_2082888771_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/89fRuosLje/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12107557_866233773472414_1869843871_n.jpg">
</a>
</div>
</div>
Here's a fiddle.
Explanation of what happens here:
First of all, I've moved the images to be a background image of the anchor (<a>) tag. That gives you a lot more flexibility, because you can make use of the background-position and background-size properties.
Next I've positioned the anchor absolute (and the column relative to make sure the anchor is taking account of it's parents size) and made it as heigh and wide as the column.
Now you have the same width, but not the same height, as the column doesn't have a height from itself. Giving it a percentual height doesn't help you, because that would be relative to the parent, while you want to have the column to have a height relative to it's own height. And now kicks in the classic padding trick; give the element a bottom-padding and make it's child 100% the height of it's parent, like so:
.parent { width: 25%; padding-bottom: 25%; } /* .col-md-3 in your case */
.child { position: absolute; width: 100%; height: 100%; }
So now we have perfectly square elements, with the images as a background. This would normally suffice, because with background-size: cover the browser would make sure the image would span the whole div. But as you have images with white borders (to the side and the top/bottom) you'll have to zoom those to correct it. And the larger the borders (eg. for panorama images) the bigger the zoom size. That's why I have created the .zoom and .zoom2 classes, which just increases the background-size property.
There you go!