I am just starting with ionic. I am trying to use the Ionic Horizontal Scroll Cards. It looks like this, codepen: http://codepen.io/drewrygh/pen/jEJGLx
Now when i am using it in a template which has this structure:
<ion-view title="Videos">
<ion-content>
<hscroller>
<hcard ng-repeat="item in items" index="{{$index}}" desc="{{item.desc}}" image="{{item.image}}"></hcard>
</hscroller>
</ion-content>
</ion-view>
But the scroll doesn't work on mobile, while searching i found that the hscroller element should be placed inside an ion-pane. But when i do that the list appears for a micro second and then disappears. I can't figure out why.
code pen: http://codepen.io/anon/pen/RWRzPj
Here i have just added <ion-content> and <ion-pane> tags around hscroller.
Why not use a <ion-scroll> with horizontal scroll. You can easily create horizontal card view with that.
PS: the last code pen you provided. You needed to add
.scroll{
height:100%
}
CodePen
Though this does not solve the scroll issue, for that I suggest the above.
ion-scroll
ion-scroll have support for horizonal scrolling.
Use
<ion-scroll direction="x" style="white-space: nowrap"></ion-scroll>
to replace your code
<hscroller></hscroller>
Related
I'm working on this TailwindCSS project where I have a logo to the left and navigation to the right. Both of them are centered. Because the logo is position:absolute; the navigation is behind the logo. I want them to be side by side. I'm using flex. Is it possible? I'm not sure if grid will be a better solution.
This is the link to tailwind playground.
The simplest solution would be to apply padding-right to the logo.
Change this...
<span class="logo flex items-center">...</span>
...to this.
<span class="logo flex items-center pr-10">...</span>
See the snippet.
I think the best option is to put the logo inside the <ul>...</ul> inside an extra list (<li>) item. This way it will allways be next to your homepage link, and won't overlap. You will have to add the width of the image to the <li> element.
An example is seen here:
https://play.tailwindcss.com/NlxxGIsX1v?layout=horizontal
I'm working on a mockup but keep running into issues with the navbar and main content layout. The page needs to look like the mockup image below on desktop.
I've tried everything I can think of and read up on the bootstrap site but continue running into problems.
First the navbar should be fixed so it scrolls with you. I've copied from one of their templates but it doesn't scroll like the demo unless I change it to pull-right. But if I use pull-right it removes the top spacing and first container spacing needed. I've tried the body tag padding-top but all it does is create more space between the nav and main container not above the nav.
The other issue is the row and column layout in desktop. The col-md-8 doesn't line up with the other col-md-4. It looks ok in mobile with 320 wide.
I'm pulling my hair and not sure what needs to fixed. If anyone can spare some time and have a look I'd really appreciate it.
Live links to the files are below.
link to image mockup
link to live webpage mockup
link to css override
On your CSS override you have the attribute .navbar (position:relative;) This overrides your navbar fixed top property.
As far as your col-md-4 goes..you have it wrapped in an html descriptor..which is this: <!-- -->. This just gives descriptions of what html attribute is listed. These descriptors are on a lot of your actual html and need to be removed in order for the code to work properly. Remember though some of them are actually descriptors...like <!--fixed navbar-->
hii just checked your live website all problems is the way you are using div tags .. so for first section of image and nav bar it should be in one div tag
<div class="col-md-12">
<div class="col-md-12">
<div class="col-md-4">IMAGE</div>
<div class="col-md-8">your nav bar </div>
</div>
<div class="col-md-12">
Banner
</div>
<div class="col-md-12">
<div class="col-md-4">
HR MARUTIS STUFF
</DIV>
<div class="col-md-8">
HI LOUREM THINGY
</div>
</div>
and soo on
HOPE THIS HELP IN YOUR FORMATTING OF PAGE
Everything seems to be fixed now. Perhaps the biggest issue I was having was getting the navbar in proper locations both desktop & mobile. Originally I was using an override for .nav to modify the margin in order to get the placement right in desktop, but in mobile view it would be in a different position, not to mention it kept sharing the margin ratios of 80px top and 120px right. This would force the toggled menu to be 80px further down rather default 0px. I couldn't figure a way around this so I figured why not try adding a div tag just for the margin spacing. Apparently this seemed to work after adding new info into the media queries. Also fixed a spacing issue when in tablet widths with nav and hero image.
As for the rest of the layout, I used col-md-3 and col-md-7 which pretty much lined everything up right away except for some padding needed. Everything else like h1 and h3 I used a simple class for mobile to adjust the margins again.
If there's an easier way or more efficient way of coding this I'm open to suggestions if anyone has some. Updated Live Link
I use JqueryUI Accordion, and it works great.
I have a structure like this:
<div id="accordionHolder">
<div id="accordionOne"> </div>
<div id="accordionTwo"> </div>
<div id="accordionThree"> </div>
<div id="accordionFour"> </div>
<div id="accordionFive"> </div>
<div id="accordionSix"> </div>
</div>
This is displayed verticaly. Accordions are not big in size. How can I display maybe two or three accordions in line?
Thing is this project is really big, and I am inserting a functionality. I do not dare to touch CSS (not an expert in any case).
I have my page, a container in it. I can define my own rules there.
I have tried setting the main div to float-left and also display: inline... but without much success.
How can I accomplish this?
When I use: float-left on the accordions, they are not displayed anymore. Like they vanish. As soon as I remove the float-left, they show up again.
Image shows what I am trying to achieve:
I tried rendering accordion on separate divs, but when making it: Float-left, same things happens. It "enters" the previous one.
I tried moving them around with padding, but with lmited results. Probelm with this approach is when one accordion is expanded other move down, even if they are stacked horizontally.
I am runinng out of ideas :(
The accordion divs accordionOne -> accordionSix should have css display:inline-block;
This will make them line up horizontally.
Hi all,
I needed to add z-index:2 to the header elements, now the topbar nav drop down is appearing under.
I tried to add {position:relative;z-index:999} on many elements, but it doesn't work. Any hints?
I am using CSS, margin is added to show the problem
Code here:
[HTML and CSS][2]
[2]: http://codepen.io/anon/pen/yYKamg
Change this: <div class="row show-for-medium-up" style="position:relative;z-index:2">
To this:
<div class="row show-for-medium-up" style="position:relative;z-index:3">
The z-index: of 2 on this div is placing it in front of the navigation dropdown. So I think you need to move the container element of the dropdown nav up a level.
<div class="row show-for-medium-up" style="position:relative;z-index:99">
This fixed it, Setting the parent container to a higher z-index. I am pretty sure I tried this more than once yesterday. Thanks guys. I will keep you posted if anything pops up.
I have the following on a page:
<div style="max-width: 600px; overflow-x: scroll;">
<a href="PoolPanoramaBig.jpg" target="_blank">
<img src="PoolPanoramaBig.jpg" style=""/>
</a>
</div>
If the image is wider than 600px then you can scroll the image to the left to see the rightmost part. However, I want to default it so that it is already scrolled fully to the left when initially displayed.
I've tried setting a style in the image to float:left which works but that disables the horizontal scrollbar.
Ideas?
EDIT: Here's a page that might help explain what I'm trying to do: http://guyellisrocks.com/ie-example/
Do you see how you have to move the scroll bar to the right to see the right most edge of the image? I'd like it to default to that when you first hit the page.
I don't have a problem doing this in JavaScript and if that's possible some hints would be appreciated. Otherwise if it's possible to do this with CSS then this is how I would first attempt to do this.
Try adding an anchor to the right of the image. Something like:
<img src="foo.jpg"><a name="right_of_image"></a>
When or after navigating to the page, if you append the #right_of_image anchor to the document URL, the browser will try to focus on the anchor, effectively scrolling to the right edge of the image. This probably won't work if you're using a scrolling container like the one you have, but should work if the image is directly embedded in your page. Does this work for you?