There is a bootstrap carousal(full-width) on my page and the carousal have registration form an i want to bring the form below the carousel on resizing the screen,I am using media queries but my form is coming above the text of my page below is my screenshot and code can anyone help to sort the problem
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('images/corousal1.jpg');"></div>
<div class="carousel-caption">
<h3><strong>Healing People,</strong>Changing lives<br/>
Personalized Treatments that are safe,
Sure and Scientific
</h3>
</div>
</div>
<div class="multi-form">
<form id="msform">
<fieldset>
<input type="button" name="next" class="next action-button btn-btn-primary" value="Book An Appointment">
<button type="button" class="next action-button btn-btn-primary" style="background-color:#3B5998 !important;"><i class="fa fa-facebook" aria-hidden="true"></i> Connect With Facebook</button>
</fieldset>
</form>
</div>
media queries
#media (max-width:786px) {
.multi-form {
margin-top: 400px;
height: 100%;
z-index: 1000;
display: block;
}
}
full page screenshot
Responsive page screenshot
Have you tried with absolute position ? you can design the div with absolute position and values in %.
For Example :
.multi-form {
position:absolute;
top:20%;
right:0%;
left:0%;
bottom:0%;
}
This will work for all resolution.
EDIT :
Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottom attributes.
You'll definitely want to check out this positioning article from A List Apart.
And finally please try to make my corousel is absolute positioned and my form is relative positioned. So that your component will work in all resolution as your expectations.
Related
This usually isnt a problem but just Material 2 is very under-documented atm so im having trouble making all images the same size but properly resize with window change
All the images I have were pretty similar in size when I created then but one was abit longer height wise, but my old code just adjusted that with some bootstrap calls.
But using the image in a mat-card it is a longer length and thus looks out of place shown here:
The BAC calculator's image is longer than the rest so it looks out of place and pushes others out of proportion under it or forces an empty cell, here is my call for displaying these:
<div *ngIf="data;else other_content">
<div class="row">
<div *ngFor="let project of data" class="col-md-6">
<div>
<mat-card class="mat-elevation-z4">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{project.title}}</mat-card-title>
<mat-card-subtitle>{{project.category}}</mat-card-subtitle>
<div class="grow-empty"></div>
<div *ngIf="project.source">
<button mat-raised-button (click)="openSite(project.source)">SOURCE</button>
</div>
</mat-card-header>
<img mat-card-image src="{{project.image}}" alt="{{project.title}}">
<mat-card-content>
<p>
{{project.detail | slice:0:250}}...
</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button>Information</button>
</mat-card-actions>
</mat-card>
</div>
<br>
</div>
</div>
</div>
If I set the height as a static like '300', it technically fixes the issue but rescaling will just ruin it
I want it to be a set scale like it is, but take any image and scale it up/down to sit and be an appropriate size for the card itself (like Callum.Tech card for example)
Just add this style reference in your code.
If you want to apply this styles to all your cards in the view, add to your style file:
mat-card img{
object-fit: cover; /*this makes the image in src fit to the size specified below*/
width: 100%; /* Here you can use wherever you want to specify the width and also the height of the <img>*/
height: 80%;
}
Another solution to this issue may be using the class of bootstrap "img-responsive". Here is a brief description
Just add css-class to the image and and style the image from the SCSS file.
<img mat-card-image class="imgs src="{{project.image}}" alt="{{project.title}}">
Now in SCSS:
imgs {
height: 50px;
width: 50px;
}
And for more to Information visit W3school.com/image.
I have the following ion-view :
<ion-view view-title="Success" ng-controller="successController" class="success-view">
<ion-content>
<div class="row row-center">
<div class="col">
<h1>Success!</h1>
<h3>Your login credentials will be SMSed to you shortly</h3>
<button class="button button-block button-positive" ui-sref="login">
Okay
</button>
</div>
</div>
</ion-content>
</ion-view>
I'm trying to vertically align that col in there in the screen. Now I understand that the only way this is going to work is if my row takes up 100% of the height. Yet if I go ahead and add style="height: 100%;" to my row it doesn't work, the row's height still wraps to it's contents. Even if I add !important it still doesn't span the full height of the screen... Any ideas?
Seems like Ionic framework adds a dynamic class scroll wrapping the row. Add a height: 100% to the parent scroll as well.
.row, .scroll {
height: 100%;
}
Output:
Ionic Demo
The main structure I'm using is:
<div class="portfolio-thumbs">
<div class="col-md-4 thumb-item">
<a href="#">
<div class="thumb-img">
<img src="./img/portfolio/rocksea.jpg" class="img-responsive" />
<div class="thumb-overlay"></div>
</div>
</a>
</div>
...
</div>
I've created a full JS Fiddle here
I'm looking to add a semi-transparent overlay to the image (will later be adding transition and some content to slide in from bottom of each image), yet can't seem to get it to appear.
Have compared to couple of other articles on SO but none seemed to fit the bill.
I've done this a thousand times before, any idea what's going wrong with this?
With help of #ZachSaucier , adding 100% height to all elements in tree. Also adding:
div.latest-work div.portfolio-thumbs div.thumb-item a div.thumb-img div.thumb-overlay {
position: absolute;
top: 0;
}
Made the overlay sit on top of the img.
Updated fiddle here
I'm looking to make a small sidebar using Twitter Bootstrap.
I want the paragraph text to be able to wrap freely and I always want the buttons on the right side. However, whenever the browser is resized from full screen to have a smaller width the vertical button group drops down to the next row and takes up the width of the while window. Ugly. What can I do to change this?
Basically, I'm looking at code like this:
<div class="container">
<div class="row" style="margin-top: 10px;">
<div class="span9 citation-text">
<p class="citation-text">Here is a ton of text that is supposed to be a citation
but I'm hoping it'll wrap that's why it's not a citation. And yet it doesn't wrap
so it looks like I'll have to keep writing and writing until it does.</p>
</div>
<div class="span3 vertical-btn-group citation-options">
<input type="button" class="btn btn-small btn-block btn-info citation-edit"
value="Edit" /> <input type="button" class=
"btn btn-small btn-block btn-danger citation-remove" value="Remove" />
<input type="button" class=
"btn btn-small btn-block btn-warning citation-highlight" value="Highlight" />
</div>
</div>
</div>
Here is the link to the JSFiddle:
http://jsfiddle.net/F39R8/
Play around with resizing and you'll see what I'm talking about.
Once the browser is resized to less than 768px, Bootstrap sets all columns (span*) widths to 100% and removes the 'float' which makes the spans stack vertically. You can override this using a #media query in your CSS..
#media (max-width: 767px) {
.row .span9 {
float:left;
width:68%;
}
.row .span3 {
float:left;
width:28%;
}
}
http://jsfiddle.net/skelly/F39R8/2/
I only recently began using CSS myself so I am not sure that this is the best way to go about this but it seemed to help when I tried overriding the CSS for that link you gave above: Go into the CSS stylesheet and find the section pertaining to that div tag (it appears to me to be called "#actions"). Put in min-width: 800px; and try to resize the browser window. Then adjust the pixel size to something like 400px and resize again just for comparison. By fine-tuning this you can (hopefully) get the desired behavior you are looking for.
Try this: http://jsfiddle.net/F39R8/3/
I see you have the proper Bootstrap CSS classes in place, so I assumed that the bootstrap file you included contains CSS for the responsive layout. I removed it and added the non-responsive version (http://twitter.github.io/bootstrap/assets/css/bootstrap.css).
I have a tile that displays information but also needs to be a link. If the user clicks anywhere on the tile it needs to take them to the appropriate action.
Below is an image of what I have created.
The HTML
<div class="tile">
<div class="tile-text">Runs</div>
<div class="tile-text details">Manage runs, routes, races, and goals</div>
<div id="runs" class="tile-text live">You have a four mile run today</div>
</div>
Now if I create an ActionLink, it will create the blue tile, but I am unsure of how to get the three child divs inside of the ActionLink.
I have tried the following ActionLink:
#Html.ActionLink("Runs", "Index", "Run", null, new { #class = "tile-text" })
This creates the following image:
So basically, how do I get the tile to link to the Action and still have all of the three child divs inside of it?
You could add a onclick="window.location.href='link'" attribute on the tile <div>, and style it with cursor: pointer to make it look like a link, if needed.
Example:
<div class="tile" onclick="window.location.href='link'">
<div class="tile-text">Runs</div>
<div class="tile-text details">Manage runs, routes, races, and goals</div>
<div id="runs" class="tile-text live">You have a four mile run today</div>
</div>
Or you could make the tile <div> be an <a> element and style it to be display: block and to include the appropriate width and height, then make all its children <span>s with display: block.
Example:
<style type="text/css">
.tile, .tile-text { display: block; }
// You could add width and height to .tile if needed.
// Also, if you want to put tiles next to each other, inline-block for .tile
// would be more appropriate.
</style>
<a class="tile" href="link">
<span class="tile-text">Runs</span>
<span class="tile-text details">Manage runs, routes, races, and goals</span>
<span id="runs" class="tile-text live">You have a four mile run today</span>
</a>
You need to have the blue tile as an actual image. This clickable image should be placed in a div.
With CSS you can then put the image behind the text content using z-index / absolute positioning.
This is a quick implementation of Radu's option 2.
All you need to do now is tidy it up and move the inline css into the css for your a class called title.
<body>
<a class="tile" href="#" style="width: 200px; height: 300px; background-color: lightblue; display: block;">
<h3 class="tile-text">Runs</h3>
<p class="tile-text-details">Manage runs, routes, races, and goals</p>
<p class="runs" class="tile-text-live">You have a four mile run today</p>
</a>
</body>