Currently I am working on huisartsendorpsstraat.zoetermeergezond.nl/care-practicioners to toggle the workers divs.
What I am trying to accomplish is to only show a maximum of 9 workers, after that a button displays with the show more workers text.
Getting the button ain't no problem, just added it in the footer of the view, but to make it toggle the divs it ain't just not working.
I made sure a .js file is being called from the theme.php file of the theme.
I ain't no Drupal expert, so I am sorry if I am asking stupid questions here.
Has anyone found a way to toggle the divs created inside a view?
Layout:
<div class="views-row views-row-1 views-row-odd views-row-first"></div>
<div class="views-row views-row-2 views-row-even"></div>
<div class="views-row views-row-3 views-row-odd"></div>
<div class="views-row views-row-4 views-row-even"></div>
<div class="views-row views-row-5 views-row-odd views-row-last"></div>
thanks a bunch
I would recommend using one of these modules:
https://www.drupal.org/project/views_load_more
https://www.drupal.org/project/views_show_more
They both do same thing basicly -> there are some slight differences. Personally i use the first one. It's quick and easy to set up, no additional custom JS needed. Just install, enable, change your views footer to Views Load More and configure. Good luck!
Related
I'm trying to create a fixed Navbar using Project Clarity
I'm using it in my Angular project, they are using FlexBox, I have tried putting in position: fixed but it doesn't seem to work, anyone have any ideas ?
<clr-header class="header-6">
In order to fix the header so that content scrolls underneath it, your application needs to have the correct Application Layout. Our components work within this structure because A properly structured layout enforces an optimal, consistent experience across applications.
The general structure for A Clarity Application layout takes this form:
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
...
</header>
<nav class="subnav">
...
</nav>
<div class="content-container">
<div class="content-area">
...
</div>
<nav class="sidenav">
...
</nav>
</div>
</div>
Obviously, you can get rid of the parts that may not be relevant to your app like: alert-app-level, subnav etc ...
You can see this working in a quick demo I made with inspiration from Bob Ross. As you can see the content scroll underneath the application header.
if someone has also either very this problem, or another problem where some css does not work within Angular:
Since we mostly structure our UI code in multiple components in Angular, and since each component puts its own host-tag in the generated DOM between the actual html tags, the clarity library has some problems with it.
So as a workaround, if you still want to be able to keep your current htmls as they are, you can define this css in each your component's css file:
:host { display: contents; }
This causes the component's box not to render; means the host tags are still visible in DOM, but they will not have any effect regarding CSS. And any clarity CSS will work again.
All the pages on my responsive site look fine on my Galaxy S7 except my homepage and I can't figure out why.
Here's an example of a page that looks fine:
http://edge-trainer.com/kick-in-the-butt-jumpstart.php
Here's my homepage:
http://edge-trainer.com/
I'm using the same CSS. Looking at my source code, can anyone see what the problem might be?
Thank you in advance.
Tim
The problem in your homepage is that the content-wrappers are not inside the content container.
Within your normal page you linked the dom structure is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
whereas in your home page it is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
Judging by your CSS, all of the .content-wrappers should be inside #content-container
As a sidenote, it might be worth looking into flexbox and relative sizing for the layout you're trying out, it might make your life a bit easier, just a suggestion ;)
I am currently trying to write some media queries to make my site responsive to other devices. I normally build my sites in Joomla and tend to use modules that are switched off using media queries and mobile modules that are switched on i.e. display: none, display: block..
With the Shopify store that I have built using the Timber Framework, I am not sure if i can implement the same methods, although the timber framework is responsive there are some elements that are not sitting correctly.
For example I am currently trying to sort my header layout for a mobile. Currently for the desktop I have a logo, contact button, search button and cart and this sits the way i need it.
<div class="grid--full grid--table">
<div class="grid__item large--one-quarter"></div>
<div class="grid__item large--one-quarter"></div>
<div class="grid__item large--one-quarter"></div>
<div class="grid__item large--one-quarter"></div>
</div>
Now if I wanted to change the code for a mobile to be:
<div class="grid--full grid--table">
<div class="grid__item large--one-half"></div>
<div class="grid__item large--one-half"></div>
</div>
I'm not sure how i would do this, as with using the "one-quarter" this works well on a desktop screen, but on a mobile it squeezes everything into separate lines and I need to show this on one line.
Hope that makes sense, if somebody could please advise would really appreciate it.
I am trying to add 3 columns to my ionic navbar and it does not work.
Here is my code:
<ion-nav-bar class="bar-dark nav-title-slide-ios7">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
<div class=row>
<div class="col"> Andreea </div>
<div class="col"> Kate</div>
<div class="col"> Andi </div>
</div>
</ion-nav-back-button>
</ion-nav-bar>
Any idea what I am doing wrong?
Would you rather do it as a list (ul, li)?
Thanks!
You may consider using ion-header-bar instead of ion-nav-bar since it allows for quite a bit more customization. (It will work with multiple columns such as those in your code.) You would, however, lose the ui-router integration built into ion-nav-bar which would require you to handle said navigation yourself. See this page for further explanation: Navigating Ionic's Headers. Here's the gist from the article's conclusion:
A standard header bar serves on its own as a pure UI element, ready for extension based on the developer’s needs, but doesn’t come with the advanced integration into Ionic’s router and navigation stack. The nav bar is far more opinionated in its use, but offers a lot of power in return.
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.