I am not able to hide the div row in angular flex layout in angular material 7.
Please find my below code.
<div fxLayout="column" class="dashboard-fx">
<div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="5px"
class="dashboard-pie">
some code here
</div>
<div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="5px"
[ngStyle]="{display: (subsectionData.length == 0) ? 'none' : 'block'}">
some code here
</div>
<div fxLayout="row" class="list-section" fxLayoutAlign="start start"
fxLayoutGap="5px" [ngStyle]="{display: (vsectionData.length == 0)? 'none':'block'}">
some code here
</div>
</div>
In my case *ngIf is not suggestible because if i use ngIf element will be removed from the
fxShow or fxHide ?
<div fxLayout="column" class="dashboard-fx">
<div
fxLayout="row"
fxLayoutAlign="start start"
fxLayoutGap="5px"
class="dashboard-pie"
>
some code here
</div>
<div
fxLayout="row"
fxLayoutAlign="start start"
fxLayoutGap="5px"
[fxShow]="subsectionData.length"
>
some code here
</div>
<div
fxLayout="row"
class="list-section"
fxLayoutAlign="start start"
fxLayoutGap="5px"
[fxShow]="vsectionData.length"
>
some code here
</div>
</div>
Related
I need it in one line, how to fix this?
Use the Bootstrap 5 grid system (ensure you are including the Bootstrap 5 css url)
Example:
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
https://getbootstrap.com/docs/5.0/layout/grid/
Your code would look, something like this:
<div class="d-none d-lg-block d-xl-block">
<div class="nav-item">
<div class="row">
<div class="col">
<form class="d-flex" action="search.php" method="get">
<input class="form-control me-2 px-3" type="search" placeholder="Search" name="search" aria-label="Search">
</form>
</div>
<div class="col">
<button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#loginmodal">Login</button>
<button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#signupmodal">Sign Up</button>
</div>
</div>
</div>
</div>
You could also put the signup button into a column on its own.
Add your buttons inside the form, or add d-flex to your nav-item class
Like this:
<div class="nav-item d-flex">
I have tried with both order-xs-1 and order-xs-first, but none is working and i don't know why. I want on mobile the image to be first and the paragraph second.
<div class="container"> <div class="row bg-white g-0"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 pt-5 ps-5 "> <h2 class="fs-1 fw-light">Make It The Best</h2> <h4 class="fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4> <p>A wonderful serenity has taken.</p> <button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 "> <img src="/images/section3/drink.jpg" class="img-fluid" alt=""> </div> </div> </div>
There are a lot of things wrong with your code. I would go back and have a proper read of the way bootstrap handles breakpoints. If you have specified col-md-6 you don't need all the other col-SZ-6, as breakpoints work from a resolution UP.
As for your exact problem, it is easily fixed by putting the column first in the HTML and then letting bootstrap move it at the iPad breakpoint with order-md-last:
<div class="container">
<div class="row bg-white g-0">
<div class="col-12 col-md-6 order-md-last mb-3">
<img src="/images/section3/drink.jpg" class="img-fluid" alt="">
</div>
<div class="col-12 col-md-6">
<h1 class="h2 fs-1 fw-light">Make It The Best</h2>
<h2 class="h4 fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4>
<p>A wonderful serenity has taken.</p>
<button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button>
</div>
</div>
</div>
You should also not use H tags to style headings, either apply a H class like I have or use CSS to change the size of your headings. Heading tags should also go in order H1->H2 etc...
I want to design two panels in same line, its work but showing unnecessary border,
Here is xyz.cshtml code with Bootstrap,
<form class="form-horizontal" role="form">
<div class="panel panel-primary col-md-4">
<div class="panel-heading">Add Members</div>
<div class="panel-body">
<button id="btnAddMem" type="button" class="btn btn-primary" onclick="">ADD</button>
</div>
</div>
<div class="col-md-1">
</div>
<div class="panel panel-primary col-md-4">
<div class="panel-heading">Add Others</div>
<div class="panel-body">
<button id="btnAddOther" type="button" class="btn btn-primary" onclick="">ADD</button>
</div>
</div>
</form>
And output looks like this image,
Any help would be appreciated.
Hello Try this code,
<form class="form-horizontal" role="form">
<div class='col-md-4'>
<div class="panel panel-primary">
...
</div>
</div>
<div class="col-md-1">
</div>
<div class='col-md-4'>
<div class="panel panel-primary">
...
</div>
</div>
</form>
you have added col-md-4 with panel.it will put padding so thats why it will add extra border in your output.
So I have remove it from panel div and added as parent.
this is a basic example calling "two.html", with the fade transition
<div class="content">
<div class="medium-6 columns text-center top">
POSPAId
</div>
</div>
and this is two.html
<div class="content">
<div class="medium-6 columns text-center top">
<a href="index.html" data-transition="slide-out">
back
</a>
</div>
</div>
Ex. Code below is represented as Blue Box, I want to expand 2 grid to Yellow one. But, the problem is; This .. need to be inside content but it always have margin left and right. I don't know how to solve this.
<div data-role="content" data-theme="d" >
<div class="ui-grid-a" >
<div class="ui-block-a"><strong>Time:</strong></div>
<div class="ui-block-b" id="price-order-timestamp">yyyy-mm-dd hh24:mi:ss</div>
</div>
<div style="width:100%;"> <!-- Here-->
<div class="ui-grid-d" id="data-table-header" >
<div class="ui-block-a">Label A</div>
<div class="ui-block-b">Label B</div>
<div class="ui-block-c">Label C</div>
<div class="ui-block-d">Label D</div>
<div class="ui-block-e">Label E</div>
</div>
<div class="ui-grid-d" id="data-table" >
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
<div class="ui-block-d">D</div>
<div class="ui-block-e">E</div>
</div>
</div>
</div>
If you want to remove the default padding added to the data-role=content tag, add the following override in your custom.css
#myPageId .ui-content{
padding-left:0;
padding​-right:0;
}​
http://jsfiddle.net/nirmaljpatel/LW5aC/