I'm designing a jQuery Mobile site, and I want an image as a header, but when I insert an image, the image is center aligned, and cut off. How can I set the image to be left aligned to show everything?
My coding:
<div data-role="header">
<br/>
<br/>
<br/>
<h1><img src="/images/HomePage.jpg" width="202" height="104" style=" overflow:visible; float:left" align="left"/></h1>
</div>
Please help me! :)
Why don't you add a class to the div with background-image.
Like this...
HTML
<div data-role="header" class="header"></div>
CSS
.header {
background-image:url("../images/HomePage.jpg");
}
Use following code, use ui-btn-icon-left built in class for aligning to left you can adjust padding and margin.
<div data-role="header" data-theme="b">
<br/>
<br/>
<br/>
<img src="images/logo.png" width="202" height="104" class="ui-btn-icon-left" />
</div>
Related
I'm working on a web app with Bootstrap. In the mobile version it looks the way I want: the header on the top, below is a girl image, and below is the description of the application.
In desktop version I want to have header on top left, right under that description, and a girl image at the right side. Unfortunately, the girl image makes a big gap between the header and the description.
How can I get rid of that gap?
To recap, I want to move the description upper, to have it just under header, in that way.
Part of html, responsible for it:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container mt-lg-4">
<div class="row">
<p class="col-sm-6 mt-lg-5 mt-sm-1 h1"><strong>Find perfect product for your skin</strong></p>
<img src="https://via.placeholder.com/200" class="col-sm-6" />
<div id="description" class="col-sm-6">
PrimerAI will examine your skin and find the perfect product for your skin's needs.
</div>
</div>
</div>
You have two competing layouts here, involving not just ordering but containing structure. The simplest solution might be to repeat the image and show it as needed.
Also, use semantic elements in your page structure, like headings and paragraphs, to wrap text. It's important for accessibility and it's just good practice. The strong element is intended to add emphasis, but headings already have it so I've used CSS to get bold text.
.text-bold {
font-weight: bold;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container mt-lg-4">
<div class="row">
<div class="col-sm-6">
<h1 class="mt-lg-5 mt-sm-1 text-bold">Find perfect product for your skin</h1>
<img src="https://via.placeholder.com/500x600" class="img-fluid d-sm-none" />
<p id="description">
PrimerAI will examine your skin and find the perfect product for your skin's needs.
</p>
</div>
<div class="col-sm-6">
<img src="https://via.placeholder.com/500x600" class="img-fluid d-none d-sm-block" />
</div>
</div>
</div>
you can try that, I just add d-flex align-items-center to center verticaly the title with the image
<div class="container bg-success">
<div class="row">
<div class="col-md-6 d-flex align-items-center">
<h1>Find perfect product for your skin</h1>
</div>
<div class="col-md-6">
<img src="https://picsum.photos/id/1082/1000/1000?blur=8" class="img-fluid" />
</div>
<div>
PrimerAI will examine your skin and find the perfect product for your skin's needs.
</div>
</div>
</div>
So I am using angular-cli 8.3.5 and material-angular 8.2.1.
I am trying to center my HTML but not finding any document on helper classes.
Does anyone know how to accomplish the task I am doing?
Documentation: https://material.angular.io/components/categories
To center you can use Angular-Flex-Layout. (Demos: https://tburleson-layouts-demos.firebaseapp.com/#/docs)
import { FlexLayoutModule } from '#angular/flex-layout';
<div fxFlex fxLayout="row" fxLayoutAlign="center center">
<div>CONTET TO CENTER</div>
</div>
The reason why it is not centering it vertically is because your div containing the layout-align attribute does not have a height.
Try something like this :
<div class="flexbox-parent">
<div layout="row" layout-align="center center" style="min-height: 500px">
<div flex="15">First line</div>
<div flex="15">Second line</div>
</div>
</div>
I'm trying to create a slider component inside a page in an ionic 2 app. I've gotten it to work as intended with the exception that the pager dots don't show up. The documentation on how to use the pager isn't great. Any ideas where I'm going wrong here?
<div class="slider-container">
<ion-slides pager="true">
<ion-slide>
<div class="slide">
<img src='assets/image/scoping.png' />
<p class="slide-title">TITLE 1</p>
<p class="slide-text">Body text 1</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/projectmgmt.png' />
<p class="slide-title">TITLE 2</p>
<p class="slide-text">Body text 2</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/satisfaction.png' />
<p class="slide-title">TITLE 3</p>
<p class="slide-text">Body text 3</p>
</div>
</ion-slide>
</ion-slides>
</div>
I have also tried <ion-slides options="{pagination: true}"> and <ion-slides pager="true"> and neither of these have worked.
Edited: Upon inspection in the browser, I'm seeing the pager being rendered with a div container like this:
<div class="swiper-pager hide">
So I'm definitely not using the right parameters to unhide the pager. Or there's a bug. I'm using Ionic v2.0.0.
This work for me in Ionic 3:
<ion-content>
<ion-slides pager>
<ion-slide>
<h1>My Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
Finally got it to work with this as the opening tag of the slides:
<ion-slides [options]="{pagination: true}">
You can try adjusting your position of pager dots. Maybe it is appearing behind your image. Include in your .scss file:
.swiper-container-horizontal > .swiper-pagination
{
bottom : 50%; //Change accordingly
z-index : 99 !important;
}
I have tested out your code (minus the image), it is appearing on mine.
If you are using swiper to slide page, there are a lot of parameters to do the same as-
<div class="swiper-pagination"></div>
here is the code of paginatin-
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
});
Complete code can have a look here.
We have demo of slider as-
http://idangero.us/swiper/demos/#.WUJGrROGNp8
Hope this will also help you!
At the moment my mobile app looks similar to the one on the link below:
http://jsfiddle.net/TM6Dt/
with the following code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
Mail
Settings
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
What I'd like to do is have both of the circular buttons on the right side of the header bar. I've tried putting them in a controlgroup div but for some reason this changes them so they are no longer circular - I get square buttons with the icons in the middle. What's worse is they are not even aligned properly! You can see what I mean here:
http://jsfiddle.net/Gd8ZB/
and the code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
<div data-role="controlgroup" class="ui-btn-right">
Mail
Settings
</div>
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
How do I get around this problem? Any help would be appreciated!
I've done that as follows:
<div class="ui-btn-right">
Mail
Settings
</div>
Fiddle
http://jsfiddle.net/TM6Dt/1/
one way to do it is to change position of the first button in first example and move it to the right with following css
style="right: 40px; left: initial;"
im trying to add info "i" button in the header left size.
i did it but the button appear very small and not in the center of the header height.
this is the code of the header:
<div data-role="header" data-position="fixed">
<div>
<h2 style="text-align: center">something written here</h2>
</div>
</div><!-- /header -->
i want to enlarge the info "i" button, and also put it in the left and in the center of the height of the header line. how can i do this?
Thanks
Following is correct syntax
Remove div around h2, it will mess the jquery css.
Try Changing h2 to h1. So the button will come in center of the hearer height.
Try giving the button class... class="ui-btn-left"
<div data-role="header" data-position="inline">
<a href="index.html" data-icon="delete" class="ui-btn-left" >Button Left</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check" class="ui-btn-right" >Button Right</a>
</div>
Live Example:
http://jsfiddle.net/3EgrW/21/ (Width)
http://jsfiddle.net/3EgrW/35/ (Height)
JS:
// For all buttons use something like this
$('.ui-btn').css('width','50%');
// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');
// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');
UPDATE: (I think this is what you're looking for)
// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');
// This changes the height for a single element
$('#hrefButton3').children().children().css('font-size','30px');
HTML:
<div data-role="page" id="home">
<div data-role="content">
<input type="button" id="theButton1" value="Press Me 1" />
<input type="button" id="theButton2" value="Press Me 2" />
<input type="button" id="theButton3" value="Press Me 3" />
<input type="button" id="theButton4" value="Press Me 4" />
<br />
HREF Me 1
HREF Me 2
HREF Me 3
HREF Me 4
</div>
</div>