I saw many similar questions asked before, but I couldn't one that matched what I'm looking for.
I would like the height of the red boxes to stretch 100%, essentially inheriting the parent row's height.
I tried fiddling with jquery commands for awhile, but I haven't had much luck. Below is the code. Thanks!
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js">
$(document).ready(function() {
$("div.grid_leftcol").css("height", $(this).parent().innerHeight());
//This syntax probably doesn't make any sense, but it might give you a sense of what I'm trying to do
$("div.grid_leftcol").css("height", $("div.grid_leftcol").parent().innerHeight());
//This one kind of works, but the height of the red boxes are all the same.
});
</script>
<style>
.grid_row {
border-bottom:1px solid #aaa
}
.grid_rightcol_rxrow div { display:inline-block}
.grid_rightcol_rxrow div.grid_commentbox { display:block }
</style>
</head>
<body>
<div id="container" style="height:485px">
<div class="grid_row" style="background-color:#dde2e7" id="testrow">
<div class="grid_leftcol" id="testcol" style="display:inline-block; width:225px; background-color:red; vertical-align:top">
<div>Variable height content</div>
</div>
<div class="grid_rightcol" style="display:inline-block;">
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 1a</div>
<div style="width:110px">(OC)</div>
<div>John</div>
</div>
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 1b</div>
<div style="width:110px">(OC)</div>
<div>Mary</div>
<div class="grid_commentbox" style="padding:3px 3px 3px 25px">This is where comment goes</div>
</div>
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 1c</div>
<div style="width:110px">(OC)</div>
<div>Larry</div>
</div>
</div>
</div>
<div class="grid_row" style="background-color:#dde2e7">
<div class="grid_leftcol" style="display:inline-block; width:225px; background-color:red; vertical-align:top">
<div>Variable height content<br>
Variable height content<br>
Variable height content</div>
</div>
<div class="grid_rightcol" style="display:inline-block;">
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 2a</div>
<div style="width:110px">(OC)</div>
<div>Jen</div>
</div>
</div>
</div>
<div class="grid_row" style="background-color:#dde2e7">
<div class="grid_leftcol" style="display:inline-block; width:225px; background-color:red; vertical-align:top">
<div>Variable height content</div>
</div>
<div class="grid_rightcol" style="display:inline-block;">
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 3a</div>
<div style="width:110px">(OC)</div>
<div>Geroge</div>
</div>
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 3b</div>
<div style="width:110px">(OC)</div>
<div>Robert</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you can use a table (and even though I haven't coded one in ages), this looks like it would be a perfect candidate. I refactored your code http://jsfiddle.net/brianflanagan/4NXzg/ as an example.
Related
I am iterating ngFor in angular 6. When i am clicking on button a div should open beside row of that particular button but it is opening below ngFor like this
I want to make it open for that partcular row and below that.
<app-filter></app-filter>
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="openLayout=!openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
Now it is coming like this
Desired behavior will be like this It's like accordian on click it should open below that row and rest of below rows will be shifted downwards
The problem resides into openLayout variable that is shared for all your rows.
You need one openLayout for each row. you can add it dinamically to your data like this:
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="data.openLayout=!data.openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
At the beginning it will be false because undefined is like false.
I'm trying to make a responsive form using Bootstrap. Is it correct to use col-**-* classes like this:
<div class="row">
<input class="col-*-blabla" ... ... >
<input class="col-*-blabla" ... ... >
</div>
or should I nest them inside of a div with the col class like this:
<div class="row">
<div class="col-*-*">
<input .. ... >
</div>
<div class="col-*-*">
<input .. ... >
</div>
</div>
Thank you.
You should nest them. There is one example in Bootstrap documentation that shows use of col- classes on label elements (Horizontal forms).
Look at this example, red block is a div with default col-xs-12 class inside row, as you can see below this container, when you use col- classes on input elements they will be misaligned (that's because it applies padding to input elements itself).
.div {
height: 200px;
background: red;
}
.row {
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="div"></div>
</div>
</div>
<div class="row">
<input type="text" class="col-xs-4">
<input type="text" class="col-xs-4">
</div>
<div class="row">
<div class="col-xs-4">
<input type="text">
</div>
<div class="col-xs-4">
<input type="text">
</div>
</div>
there is an issue with aliging of forms...
Here is what I am trying to do...
make a contact form on the left and to the right put the logo of the company..
So two divs of col-md-6 are made.. on the first div i am putting the form with class of "form-horizontal"
Hence I am arranging Form labels in "col-md-2" and form fields in "col-md-4"
Yet those form labels and fields are coming side-by-side... check image...
Here is the code...
<section id="contact">
<div class="col-md-12 text-center" style="background-image: url('images/head-background.png'); height: 100px; margin: 120px 0 10px 0;"><h2 style="margin-top:40px;">Contact Us</h2></div>
<div class="col-md-6">
<div style="font-family:'MV Boli'; font-size: 20px;">
<h4>Reach Us</h4>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-4">
<input type="text" name="name" placeholder="Your name" class="form-control">
</div>
<label for="email" class="col-md-2 control-label">E-Mail</label>
<div class="col-md-4">
<input type="email" name="email" placeholder="Your E-Mail" class="form-control">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<img src="images/logo-vertical.png" class="img-thumbnail">
</div>
<section>
Please help people, on the verge of closing my first web-design project :)
I think this is your need, Please try this, this is not your need please give me the clear input,
<section id="contact">
<div class="col-md-12 text-center" style="background-image: url('images/head-background.png'); height: 100px; margin: 120px 0 10px 0;"><h2 style="margin-top:40px;">Contact Us</h2></div>
<div class="col-md-6">
<div style="font-family:'MV Boli'; font-size: 20px;">
<h4>Reach Us</h4>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-12">
<input type="text" name="name" placeholder="Your name" class="form-control">
</div>
<label for="email" class="col-md-2 control-label">E-Mail</label>
<div class="col-md-12">
<input type="email" name="email" placeholder="Your E-Mail" class="form-control">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<img src="images/logo-vertical.png" class="img-thumbnail">
</div>
<section>
You don't need to make container col-md-12 for your form and image.Just make equal structure
<div class="container">
<div class="row">
<div class="col-md-6">
form here
</div>
<div class-"col-md-6">
// your image
</div>
</div>
</div>
I am a newbie to ionic framework and I am using the carousel from this link "http://www.gajotres.net/how-to-create-elegant-slider-carousel-in-ionic-framework/".
I have to change the content of page according to the slides of carousel.
Here it is, may be it would help you :)
<div id="miniMizedCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="textViewer" class="fluidMedia">
<div ng-switch-when="VIDEO" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<div xyz-video videocode="videoCode">
</div>
</div>
<div id="quizViewer" ng-switch-when="QUIZ" ng-bind="lessonContent">
</div>
<div id="Div2" class="fsContentArea" ng-switch-when="TEXT" ng-bind="lessonContent">
</div>
<div id="htmlViewer" class="lessonContentArea" ng-switch-when="HTML" ng-bind-html="lessonContent">
</div>
<div ng-switch-when="HTMLACTIVITY" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="htmlActivity" ng-src="{{lessonContent}}">
</iframe>
</div>
<div ng-switch-when="PDF" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pdfViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
<div ng-switch-when="PPT" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pptViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
<a class="left carousel-control {{carouselLeftBar}}" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" ng-click="ShowPrevLesson()">
</span><span class="sr-only">Previous</span> </a>
<a class="right carousel-control {{carouselRightBar}}"
role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right right-arrow"
aria-hidden="true" ng-click="ShowNextLesson()"></span><span class="sr-only">Next</span>
</a>
</div>
i've added a inline-form to my page, in the main area,
the form is a bit to wide, i would like that it collapse at 991px,
but the rest of the page can collapse at 767px
i understand it can be done with mediaquery but not sure on what to code.
i'm stuck here!
what can i do?
i copied the inline form originally from a navbar of a file, the button is working fine.
it look like this:
<div class="container">
<div class="text-center">
<button
class="btn btn-default form-toggle"
type="button"
data-toggle="collapse"
data-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"> <span class="sr-only"> Toggle navigation</span> Reservations
</button>
</div>
<div id="collapseExample" class="navbar-collapse collapse">
<div class="text-center ">
<form class="form-inline navbar-form" name="bookerform" action="---" method="GET" target="_self">
<div class="form-group">hidden elements</div>
<div class="form-group">arrivo</div>
<div class="form-group">partenza</div>
<div class="form-group text-left"> Numero N</div>
<div class="form-group text-left"> Numero A</div>
<div class="form-group text-left"> Numero B</div>
<div class="form-group"> button check</div>
</form>
</div>
</div>
</div>
thank you for your help,
ok actually i'm almost there.
i like the solution using the bootstrap grid, i've added the media queries but it's not showing as i want, from 992 above it should show only the form, not the button
<div class="container">
<div class="text-center">
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#myForm"> Reservations
</button>
</div>
<br>
<form class="collapse collapse-class" role="form" id="myForm">
<div class="col-lg-2">
<p>
<input type="email" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="password" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<button type="submit" class="btn btn-default">Button</button>
</div>
</form>
</div>
#media (max-width: 992px) {
.collapse-class {
display: none;
}
}
You can do your on custom collapsing with a simple media query and css class. Simply toggle the CSS display from inline-block to block. Here, at 1000px and under, the two selects of the the second td will stack vertically; horizontally above 1000px.
CSS:
.collapse-it {
display: inline-block;
}
#media (max-width: 1000px) {
.collapse-it {
display:block;
}
.mobile-view:after {
content:"mobile view vertical stacking";
}
}
HTML:
<table style="border: 1px solid black;">
<tbody><tr>
<td style="border: 1px solid black;">
<div style="margin:5px;">credit card expiration</div>
</td>
<td style="border: 1px solid black;">
<div style="margin:5px;">
<div class="form-group collapse-it">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
<div class="form-group collapse-it">
<select>
<option>d</option>
<option>e</option>
<option>f</option>
</select>
</div>
</div>
</td>
<td class="mobile-view" style="border: 1px solid black;"></td>
</tr>
</tbody></table>
View Demo on Bootply
If you just want it to go away at 992px but keep the button, put a class on what you want to collapse, and leave the button outside it. Then write a media query to display: none at 992px like so:
<form class="form-inline navbar-form collapse-class" name="bookerform" action="---" method="GET" target="_self">
<div class="form-group">hidden elements</div>
<div class="form-group">arrivo</div>
<div class="form-group">partenza</div>
<div class="form-group text-left"> Numero N</div>
<div class="form-group text-left"> Numero A</div>
<div class="form-group text-left"> Numero B</div>
<div class="form-group"> button check</div>
</form>
#media (max-width: 992px) {
.collapse-class {
display: none;
}
}
There may be a more elegant way to do this, but I'm having a hard time figuring out exactly what you want, so I'm trying to be general.