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.
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.
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!
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 have a layout design clearly made for 1200px / 15 cols framework, but my client wants to use Bootstrap. Is it even possible to transform Bootstrap into 15 cols layout? I havent seen such an example online. I'm not a huge fan of Bootstrap for small projects. It is a trend I honestly don't understand. Might be too heavy for a 5 pages website & projects are usually done according to the content, not according to some framework, Twitter-backed or not.
But, this is it.
If it would be possible to code a 15 cols layout, could you give me a hint on how to begin? And how long would it take to perform such an adaptation?
You can customize and download your own Bootstrap components by going to:
http://getbootstrap.com/customize/
and navigating down towards the "grid-columns"
Set your preferred number of columns and scroll to the bottom to click "Compile and Download".
I would generally recommend going with an even number of columns over odd however for easier math.
If you can run a customized version of Bootstrap, xengravity's answer is the way to go.
However, if you're using vanilla bootstrap (perhaps from a CDN or legacy code) you could create the desired effect with a little CSS tweaking and some nested rows/columns.
Start with a 3 column layout of col-xs-4, then fill those with a row and 5 col-xs-* (I chose 3 as it was close) and tweak the width with some CSS. For example:
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-3 fixed">1</div>
<div class="col-xs-3 fixed">2</div>
<div class="col-xs-3 fixed">3</div>
<div class="col-xs-3 fixed">4</div>
<div class="col-xs-3 fixed">5</div>
</div>
</div>
. . .
</div>
</div>
and the CSS:
.col-xs-3.fixed {
width:20%;
}
For an interactive example, see this fiddle.
A cleaner way to go would be to include the CSS/LESS from the col-xs-3 and just make a fixed-col or similar class.
Update
The funkiness with the columns wrapping/spacing as mentioned in the comments is due to the columns' default padding making it too large for the row and wrapping. As seen in this updated fiddle removing the padding for the .fixed columns fixes it. This may not be desirable, and as such tweaks will need to be made for your specific application.
Having seen the source of one of the Bootstrap Expo sites Tsaa Tea Shop I wonder if what they have done, adding semantic HTML5 tags in between BS classes, would give the site a better semantic value?
Considering they use the section element quite a bit, can this be seen as an accepted and good use of HTML5 tags/elements alongside BS?
Here a short excerpt:
<section class="about-us block">
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h2 class="section-title">Welcome</h2>
<span class="fa fa-leaf"></span>
</div>
</div>
</div>
</section>
<section class="quote block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>"We loved our relaxing time with great food and beverages..."</h2>
</div>
</div>
</div>
</section>
At the moment I am starting work on a smaller project and have something along the line of a simple one-page layout in mind.
Would it do any good in consideration of semantics to follow this approach?
The Bootstrap is unsemantic by default
Twitter Bootstrap is one of the most unsemantic frameworks on the market. If you put to your code classes like container, form-control or col-sm-2 you just can't be semantic.
But sometimes you don't want to be. You want to be readable, practical and maintainable — and that's why it is made for and it's great in it.
HTML5 tags
Yes, yes. We have all these new, sexy, useful, years-needed HTML5 tags like: article, section, nav, main, header, footer or details… But let's face truth — the section sucks almost as much as usuall div.
Semantic of the section is almost zero. God - it's a tag with display:block that is called "section". The biggest (and maybe only) advantage of it is improving of readability, not the semantics. And that's enough.
Why to still use the new HTML tags
Because:
It's more readable.
It's easier to debug.
It's more modern.
It's a bit more meaningful and consequential.
So, if you face the decision — to use or not to use HTML5 tags, do anything, but do not continue in this div-cancer-that-is-the-web-built-on.
… even minified version of new tags is more readable:
<article><section></section><section></section><aside></aside></article>
<div><div></div><div></div><div></div></div>