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>
Related
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 have worked on a solution to change the src's value depending on the screen size, but somehow even if I resize the browser, it will only show the first image (../assets/img/features/cleardent-header.png). I want it to change to (../assets/img/features/cleardent-header-small.png when the screen size is less than 991.
I was looking at using CSS, but since it's within the carousel, it's a bit complicated. Could anyone give me a suggestion?
Here's my HTML of the carousel's first slide:
<div class="item active"> <img id="first-slide" class="first-slide" alt="First slide">
<!--slogan and CTA-->
<div class="container carousel-caption main-slider">
<div class="row header-slogan fadeInDown animated">
<div class="col-xs-12">
<section class="cd-intro">
<h1 class="cd-headline letters type"><span>Do everything.</span> <span class="cd-words-wrapper ahwaiting"><b class="is-visible">Better.</b><b class="colour-cleardent">with ClearDent</b></span></h1>
</section>
</div>
</div>
<div class="row header-tagline fadeInDown animated">
<div class="col-xs-12">
<p>A complete dental practice management program that you are going to <span class="colour-cleardent-sec">love</span></p>
</div>
</div>
<div class="row header-cta fadeInUp animated">
<div class="col-xs-12">
<button class="btn-u extra-demo-btns" onClick="window.location='../demo';"><i class="fa fa-paper-plane fa-fw"></i> Book a Demo</button>
<i class="fa fa-play fa-fw"></i> Watch a Video
</div>
</div>
</div>
<!--slogan and CTA end-->
</div>
Here's my jQuery :
<script>
$(document).ready(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});
</script>
Your code works on the initial load of the DOM, but it has no affect once the document loads and the user resizes the browser window, you would need to hook up a handler to window.resize event to alert when the window size changes, then do your same logic:
//Place this in your document ready
$(window).resize(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});
How about srcset?
<img src="../assets/img/features/cleardent-header-small.png" srcset="../assets/img/features/cleardent-header.png 991w, evenLargerImage.jpg 2000w">
I have used mixitup js to filter the plugin type in which each div is wrap in a column.
The main point is I can't use clear: both; CSS property.
I have achieved this issue in other sites by using
.parent-class .column-class:nth-of-type(3n+1){
clear:both;
}
But in mixitup I cannot target the nth item because of the filter, If I click in free tab than the nth item which I was targeting will be replaced by other div.
you can view the issue in this link but make sure your browser width is less than 1100px and more than 992px
Due to the long text of contact form 7 which comes in 2 lines the height of the div is more than others. I want to target 4th element for min-width: 992px; and clear that div.
HTML structure is :
<section class="plugin-listing-page">
<div class="col-sm-12 no-padding">
<div class="wrap">
<div class="plugin-type">
<ul id="filters" class="clearfix post-filter-controls">
<li><span class="filter active-onload theme-demo btn-default" data-filter=".all">All</span></li>
<li><span class="filter theme-demo btn-default" data-filter=".free">Free</span></li>
<li><span class="filter theme-demo btn-default" data-filter=".premium">Premium</span></li>
</ul>
</div>
<div class="filtr-container" id="pluginlist">
<div class="col-md-4 col-sm-6 all listplugin free" data-bound="">
<div class="single-plugin-list">
<div class="single-plugin-list-image">
<a href="">
<img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" >
</a>
</div>
<div class="single-plugin-list-content">
<h4 class="text-title">Test</h4>
<a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a>
<span class="theme-green pull-right">Free</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 all listplugin premium" data-bound="">
<div class="single-plugin-list">
<div class="single-plugin-list-image">
<a href="">
<img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" >
</a>
</div>
<div class="single-plugin-list-content">
<h4 class="text-title">Test</h4>
<a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a>
<span class="theme-green pull-right">Free</span>
</div>
</div>
</div>
</div>
</div>
</div>
JS for mixitup is:
jQuery(document).ready(function ($) {
jQuery.noConflict();
(function ($) {
$(function () {
var filterList = {
init: function () {
$('#pluginlist').mixItUp({
selectors: {
target: '.listplugin',
filter: '.filter'
},
load: {
filter: '.tables' // show app tab on first load
},callbacks: {
onMixEnd: function(state) {
if(state.activeFilter == '.listplugin')
$('.wil').addClass('active')
}
}
});
}
};
filterList.init();
});
setTimeout(function(){
$('#filters li .active-onload').click();
},100);
})(jQuery);
});
Is there any solution for clearing the height of the div so that it always floats left of the browser ?
There are many ways we can solve this issue. However, I would go for css based approach
#media (min-width: 992px) and (max-width: 1100px){
.single-plugin-list-content h4 a{
font-size: 90%; // or smaller
}
}
UPDATED:
If you can use flex then this will fix the issue. It should work on all screens. However you can add this to min-width: 992px media query. The decision is yours.
#pluginlist{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
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>
I'm trying to customize the semantic-ui sidebar. I intend to create when i click the toggle button it will minimized to the labeled(icon) one. But it doesn't seems to be animated and the content(push content) doesn't seems to be pulled when i minimized it to the labeled icon sidebar.
HTML
<div class="ui left demo vertical inverted visible sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
</div>
<div class="pusher">
Toggle
</div>
JS
$("#toggle-btn").click(function() {
$(".ui.sidebar")
.toggleClass("labeled icon");
});
And here's the codepen:
http://codepen.io/andhikaribrahim/pen/rWNEzr
Any help would be great!
Thanks in advance.
Checkout this Codepen. Add a class on the .pusher as well to animate it accordingly using jQuery. Also, use CSS transitions insert animations.
For reference,
CSS:
.ui.left {
transition: width .2s linear;
}
.labeled.icon {
width: 84px !important;
}
.pusher.push {
transform: translate3d(84px,0,0) !important;
}
JS:
$("#toggle-btn").click(function() {
$(".ui.sidebar").toggleClass("labeled icon");
$(this).parent().toggleClass('push');
});
Hope this helps!