I am new in UI or web development .I am trying to make simple simple pages .So I take http://ionicframework.com/getting-started/ page .And trying to make same as in my demo application .I make little bit same as site.but i am facing one issue .On header there is search bar (input field in front of this text "Questions? Head over to our Community Forum to chat with others using the framework.").I need to make search field in front of given text .I already use text-align :right;
here is my code
http://jsfiddle.net/oLws3fsk/1/
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div>
<div class="header">
<ul class="navbar">
<li>product</li>
<li>Getting Started</li>
<li>docs</li>
<li>showcase</li>
<li>forum</li>
<li>Blog</li>
</ul>
</div>
<div class="container">
<h1>Getting Started with Ionic</h1>
<p>Build mobile apps faster with the web technologies you know and love</p>
<div class="smallheader">
<div class="col-sm-8 news-col">Questions? Head over to our Community Forum to chat with others using the framework.
<div class="search-bar" style="visibility: visible;">
<span class="search-icon ionic"><i class="ion-ios7-search-strong"></i></span>
<input type="search" id="search-input" value="Search">
</div>
</div>
</div>
</div>
</div>
Divs are block-level elements and so are presented on a new line unless you tell them otherwise.
You could use display:inline-block to present the searchbox inline (ie, next to the text):
.smallheader .search-bar {
display:inline-block;/* display inline so it remains in the flow */
border :1px solid green;
}
http://jsfiddle.net/oLws3fsk/2
or float the search box to the right:
.smallheader .search-bar {
float:right;/* float to the right */
border :1px solid green;
}
.smallheader:after {/* clear the float so that the parent does not collapse */
content: "";
display: table;
clear: both;
}
http://jsfiddle.net/oLws3fsk/3/
These are not the only solutions. You could use absolute positioning, table-layout or flexbox instead.
Related
Is there a way to not apply certain CSS classes to a particular class or id? I have an image in a grid using the Materialize CSS framework. I would like it to break outside the grid and reach the corners of the screen. Essentially I want to exclude the .container, .row, and the .col css styles from a class called .break-grid. However, I would still like other styles to apply. (in this case .parallax-container and .parallax.
Is there a better way to go about "breaking out of the grid" than the way I'm pursing? A pure CSS/HTML solution would be preferred but I am willing to use Javascript/Jquery to solve this as well.
Here is a code sample of what I'm trying to do. I have no CSS as this is a css framework (I do not want to edit the framework). I would need css to fix change it I presume.
<div class="container">
<div class="row">
<div class="col">
<!-- Apply here -->
<h1>Things</h1>
<!-- Don't apply here -->
<div class="parallax-container break-grid">
<div class="parallax">
<%= image_tag('infos/home/test_parallax.jpg')%>
</div>
</div>
<!-- Apply here -->
<h2>Stuff</h2>
</div>
</div>
</div>
You can use the :not() CSS pseudo-class. ( On MDN )
.container > .row > .col > *:not(.parallax-container) {
//styling
}
Note: realize this is a demonstration, I'm not going through every BootStrap property that would be applied innately, and you would have to do that yourself:
.container > .row > .col > *:not(.parallax-container) {
background: rgba(0,0,255,.5);
}
<div class="container">
<div class="row">
<div class="col">
<h1>Things</h1>
// Do not apply here
<div class="parallax-container break-grid">
<div class="parallax">
<span>whatever</span>
</div>
</div>
<h2>Stuff</h2>
</div>
</div>
</div>
Personally, I would advise you to listen to everyone else and just build this thing using Cascading styles. :not is an excellent tool, but I get the impression that you're likely to abuse it/over-rely on it and get yourself in a bind style-wise.
In any case, good luck!
I have just finished working on this website for insect cereal (yup...) and whilst the website seems to work perfectly well on edge, safari, and firefox it has a continuous long scroll on chrome well after it is supposed to end (right after the footer). I'm sure this has a very simple fix, but I'm very rusty when it comes to coding and can't seem to find it.
Thanks in advance.
Alright, in addition to all answers here, this question was actually really fun to tackle, let's break it down:
The problem
Your footer length is being caused by the class bounceInUp added to your #button-white in content-section-d I found this by deleting sections and child nodes in DevTools until I pin-pointed your problem.
The cause
The reason this doesn't work in Chrome is because transforms like these (using animate.css) are ment for inline elements, your <button> isn't one, and you should apply custom CSS to change it, so:
button-white {
display: inline-block;
margin-top: 30px;
background: white;
color: #02E0C6;
border: none;
border-radius: 0%;
padding: 15px 15px 15px 15px;
}
In addition to the other answers, you should check your code for invalid syntax as well. There's a lot that can break in different browsers.
Look like you have problems with markup
<body>
<header>
<nav class="navigation navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img id="brand" class="img-circle" alt="Brand" src="http://i.imgur.com/0fIyMnA.png">
</a>
<h1 id="Criks" class="navbar-text">Criketos </h1>
</div>
<button id="navButton" class="navbar-text navbar-right btn btn-info">Buy Now</button>
</a> **<----------- what is it?**
</div>
</nav>
</header>
<body>
....
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="index.js"></script>
</body>
</html>
What about if you try removing
height: 100%
from html element in CSS
I'm using highchart graphs to display time and event of specific person. But I don't understand which graph to use.
Following image is the example. I want to do the same.
This is a simple example which only uses css and html. It is very limited but functions (fixed width tool tips etc). You could easily make it more flexible, it is just to show it is possible.
<div class="list">
<div class="period">...</div>
<div class="period">15/5
<span class="tool-tip">info</span>
</div>
<div class="period">16/5/2015
<span class="tool-tip">info 2</span>
</div>
<div class="period">17/5
<span class="tool-tip">fixed width</span>
</div>
<div class="period">18/5</div>
<div class="arrow-right"></div>
</div>
.period{
float:left;
position:relative;
display:inline-block;
...
}
.tool-tip{
height:35px;
line-height: 25px;
position: absolute;
...
}
Main thing to be aware of is that each section is an inline box, then the tool tip is located relative to it.
I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my HTML:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit="">
<li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
</ul>
</div>
</section>
</div>
Here's the HTML once foundation.orbit.js does its thing:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<div class="orbit-container orbit-stack-on-small">
<ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
</ul>
Prev <span></span>
Next <span></span>
<div class="orbit-slide-number">
<span>1</span> of <span>2</span>
</div>
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
</div>
</div>
<ol class="orbit-bullets">
<li data-orbit-slide-number="1" class="active"></li>
<li data-orbit-slide-number="2" class=""></li>
</ol>
</div>
</section>
</div>
I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.
When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.
If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.
Any ideas would be much appreciated.
I'm going to try to avoid being overly verbose here.. but this is what I've found and while I wouldn't call this a complete fix, because i'm not sure what started the differences in css the following code solved the problem.
I found this because I have a local environment as well as a dev environment for the site. The local environment was working great, but the production environment had all the issues you mentioned above.
The first issue of course is the generated container div setting the height to 0px. This is strange enough. I manually added the height to the container in the css. The reason all the images are hiding is they're set to margin-left: 100% or some large left margin and they're all positioned absolutely. I wish I could be more help as to why the code differences are present, maybe I'll find more time to investigate further but for now its working.
Anyway, the following was the fix:
.orbit-container { height:250px; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
.orbit-container { height:auto; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
A little upgrade from a previous solution. With this modification, it will be more easy to show the slideshow on a phone and a desktop.
Are you sure the url to the images are ok?
I had the same problem but with 2 of my 3 images and the problem was in the url
I was having the same problem and I've just found that using individual modules (I'm using compass) instead of using foundation.min.css solves the problem, have you tried to use foundation.css (not minyfied)?
takes deep breath
Ok, I have a large div that acts as a background layer. This div pans from left to right based on the link you select in a typical horizontal navigation. It's a bit of a novelty thing.
The HTML structure:
<div id="scroll">
<div class="container_16">
<div id="header" class="grid_9 suffix_3 alpha omega">
<!-- the links that control animation -->
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div> <!-- end #header --> <div class="main grid_8 alpha omega">
<div class="content grid_12 alpha">
<div id="the_content">
<!-- content is loaded in here via ajax -->
</div><!-- end the_content -->
</div><!-- end .content -->
<div class="clear"></div>
<div id="footer">
Footer stuff
</div>
</div> <!-- end .main .grid_8 .alpha .omega -->
</div> <!-- end .container_16 -->
</div> <!-- end scroll -->
A brief snippet of CSS:
#background_container {
position: absolute;
left: 0px;
top: 0px;
z-index: -1000;
width: 100%;
height: 100%;
}
#scroll {
width: 100%;
height: 100%;
overflow: auto;
}
The Javascript simply uses jQuery to animate the "left" attribute. I would include it, but there's a lot going on and I don't think it will help bring a solution.
Basically, when the background div scrolls from the first position to the last position, the content seems to "scrunch" briefly in Safari.
Video of this behavior:
[redacted]
In the video, I demo both safari and firefox. As you can see, in Safari the content scrunches/glitches during the animation. In Firefox, it does not. Safari is seemingly the only browser that does this. It even works in IE6. :)
The div that appears to "scrunch" seems to be <div id="header" class="grid_9 suffix_3 alpha omega"> but, sometimes you can see a scroll bar briefly which suggests <div id="scroll"> may be the root cause.
Is this a Safari rendering issue that's common and can be avoided? Or should I just suck it up?
Thanks in advance!
You have to set -webkit-transform: transform on the original element so that it gets hardware accelerated on load.