What's new

Closed Front end problems

Status
Not open for further replies.
D

darreeen

Enthusiast
Joined
Jan 17, 2017
Posts
4
Reaction
0
Points
62
upload_2018-5-23_17-14-14.png
beginner po ako sa bootstrap and I need your help lang po, paano ko po maiinsert yung div na nakabilog papunta po dun sa tinuturo ng arrow? thanks sa pag sagot :))))
 

Attachments

probably kasi nasa next row ung "Previous Day" mo? try mo ilagay mo ung div na naka bilog dun sa loob div kung saan nakalagay ung mga div ng "NPT"..
i'm not that sure. much better kung maipost mo ung code snippet para madali makita kung paano sya maayos.
 
<div class="row">
<div class="col col-md newclass bgc">
<p>Efficiency</p>
<p class="left"><%=efficiency%>%</p>
<div id="barChart1" class="chartElement1"></div>
</div>
<div class="col col-md bgc newclass">
<p>WFT</p>
<p class="left"><%=wft%>%</p>
<div id="barChart2" class="chartElement1"></div>
</div>
<div class="col col-md newclass bgc">
<p>NPT</p>
<p class="left"><%=npt%>%</p>
<div id="barChart3" class="chartElement1"></div>
</div>
<div class="col-md-2 newclass bgc-m-2">
<p style="text-align: center">Monthly Production Progress</p>
<h4 style="text-align: center"><%=daso%></h4>
<p style="text-align: center">Daily Average Sew Output</p>
<h4 style="text-align: center"><%=dato%></h4>
<p style="text-align: center">Daily Average Target Output</p>
</div>
<div class="col-md-1 newclass bgc-m-2">
<div class="container-fluid">
<p style="text-align: center">Production Days Remaining</p>
<p style="text-align: center"><%=proddays%> Days</p>
</div>
</div>
<div class="col col-md newclass bgc-m-2">
<h5>PLAN</h5>
<div id="chart"></div>
<center><p>Accumulated</p></center>
<center><p><%=pacc%></p></center>
<center><p>Balance</p></center>
<center><p><%=pbal%></p></center>
</div>
<div class="col col-md newclass bgc-m-2">
<h5>SDP</h5>
<div id="chart2"></div>
<center><p>Accumulated</p></center>
<center><p><%=sdpacc%></p></center>
<center><p>Balance</p></center>
<center><p><%=sdpbal%></p></center>
</div>
<div class="col col-md newclass bgc-m-2">
<h5>PO</h5>
<div id="chart3"></div>
<center><p>PO Balance Count</p></center>
<center><p><%=pobalc%></p></center>
<center><p>PO Balance</p></center>
<center><p><%=pobal%></p></center>
</div>
<div class="w-100 d-none d-md-block"></div>

<div class="col col-md-4 newclass bgc">
<h5 class="card-category">Previous Day</h5>
<div class="card-body">
<div class="chart-area">
<center><h2><%=outputpcs%></h2></center>
<center><p>Output (pcs)</p></center>
<center><h2><%=outputmin%></h2></center>
<center><p>Output (min)</p></center>
</div>
</div>
</div>
</div>
 
Thanks sa reply, ito po yung code snippet. Nagawa ko na po yun kaso di siya nagddisplay ng ganun. Nag nenext row yung Monthly Prod Progress.

custom CSS
body{
background-color: #c5c6c9;
}
.newclass{
padding: 0.5px;
margin: 0.5px;
}
.bgc{
background-color: #FFFFFF;
height: 100px;
}
.bgc-m{
background-color: #FFFFFF;
height: 200px;
}
.bgc-m-1{
background-color: #FFFFFF;
height: 150px;
}

.bgc-m-2{
background-color: #FFFFFF;
height: 225px;
}
.bgc-lg-1{
background-color: #FFFFFF;
height: 440px;
}

td {}
.chartElement1 {
margin-left: 0px;
}
.left {
margin-left: 50px;
}
.one{
width: 400px;
float: left;
height: 100%;
}
.two{
width: 200px;
height:100%;
margin-left: -15px;
}
media only screen and (max-width:950px) {
/* For mobile phones: */
.one, .two, .bgc, .bgc-m, .bgc-m-1, .bgc-m-2, .bgc-lg-1 {
width: 100%;
}
}

HTML
<div class="row">
<div class="col col-md newclass bgc">
<p>Efficiency</p>
<p class="left"><%=efficiency%>%</p>
<div id="barChart1" class="chartElement1"></div>
</div>
<div class="col col-md bgc newclass">
<p>WFT</p>
<p class="left"><%=wft%>%</p>
<div id="barChart2" class="chartElement1"></div>
</div>
<div class="col col-md newclass bgc">
<p>NPT</p>
<p class="left"><%=npt%>%</p>
<div id="barChart3" class="chartElement1"></div>
</div>
<div class="col-md-2 newclass bgc-m-2">
<p style="text-align: center">Monthly Production Progress</p>
<h4 style="text-align: center"><%=daso%></h4>
<p style="text-align: center">Daily Average Sew Output</p>
<h4 style="text-align: center"><%=dato%></h4>
<p style="text-align: center">Daily Average Target Output</p>
</div>
<div class="col-md-1 newclass bgc-m-2">
<div class="container-fluid">
<p style="text-align: center">Production Days Remaining</p>
<p style="text-align: center"><%=proddays%> Days</p>
</div>
</div>
<div class="col col-md newclass bgc-m-2">
<h5>PLAN</h5>
<div id="chart"></div>
<center><p>Accumulated</p></center>
<center><p><%=pacc%></p></center>
<center><p>Balance</p></center>
<center><p><%=pbal%></p></center>
</div>
<div class="col col-md newclass bgc-m-2">
<h5>SDP</h5>
<div id="chart2"></div>
<center><p>Accumulated</p></center>
<center><p><%=sdpacc%></p></center>
<center><p>Balance</p></center>
<center><p><%=sdpbal%></p></center>
</div>
<div class="col col-md newclass bgc-m-2">
<h5>PO</h5>
<div id="chart3"></div>
<center><p>PO Balance Count</p></center>
<center><p><%=pobalc%></p></center>
<center><p>PO Balance</p></center>
<center><p><%=pobal%></p></center>
</div>
<div class="w-100 d-none d-md-block"></div>

<div class="col col-md-4 newclass bgc">
<h5 class="card-category">Previous Day</h5>
<div class="card-body">
<div class="chart-area">
<center><h2><%=outputpcs%></h2></center>
<center><p>Output (pcs)</p></center>
<center><h2><%=outputmin%></h2></center>
<center><p>Output (min)</p></center>
</div>
</div>
</div>
</div>
 
ganito na lang tips ko sa pag gammit ng bootstrap. explain ko muna para maliwanagan ka. Ang bootstrap ay CSS framework para mapadali ang frontend. Ang bootrap ay gumagamit ng 12 column grid system. base sa code mo somobra sa 12 column yung grid mo kaya sya bumaba. yun ang theory ko. o kaya hindi sya naka pasok sa class ng row.
 
Nope, sir darkwing, gawa ko po yan. Thanks po naliwanagan ako sa sinabi niyo po. Naayos ko na po yung problema pakicheck po if tama po yung gawa ko kung okay lang po?


<body>

<div class="container-fluid">

<div class="row">

<div class="col-sm-4">

<div class="row">

<div class="col-sm newclass bgc">

<p>Efficiency</p>

<div class="row">

<div class="col col-sm-6"><img src="static/img/efficiency.png" alt="efficiency" height="30px" width="30px"/></div>

<div class="col col-sm-6"><p class="text-right"><%=efficiency%>%</p></div>

</div>

<div id="barChart1" class="chartElement1"></div>

</div>

<div class="col-sm bgc newclass">

<p>WFT</p>

<div class="row">

<div class="col col-sm-6"><img src="static/img/wft.png" alt="efficiency" height="30px" width="30px"/></div>

<div class="col col-sm-6"><p class="text-right"><%=wft%>%</p></div>

</div>

<div id="barChart2" class="chartElement1"></div>

</div>

<div class="col-sm newclass bgc">

<p>NPT</p>

<div class="row">

<div class="col col-sm-6"><img src="static/img/npt.png" alt="efficiency" height="30px" width="30px"/></div>

<div class="col col-sm-6"><p class="text-right"><%=npt%>%</p></div>

</div>

<div id="barChart3" class="chartElement1"></div>

</div>

</div>

<div class="row">

<div class="col-sm newclass bgc">

<h5 class="card-category">Previous Day</h5>

<div class="row">

<div class="col col-sm-7"><p class="text-right prevdaystext"><%=outputpcs%></p></div>

<div class="col col-sm-5"><img src="static/img/outputpcs.png" alt="efficiency" height="40px" width="45px"/></div>

</div>

<p class="gsw text-right">Output (pcs)</p>

</div>



<div class="col-sm newclass bgc">

<h5>Previous Day</h5>

<div class="row">

<div class="col col-sm-7"><p class="text-right prevdaystext"><%=outputmin%></p></div>

<div class="col col-sm-5"><img src="static/img/outputmin.png" alt="efficiency" height="40px" width="40px"/></div>

</div>

<p class="gsw text-right">Output (min)</p>

</div>

</div>

</div>

<div class="col-sm-2 newclass bgc-m-2">

<p style="text-align: center">Monthly Production Progress</p>

<h4 class="text-center monthbig"><%=daso%></h4>

<p class="gsw text-center">Daily Average Sew Output</p>

<h4 class="text-center monthbig"><%=dato%></h4>

<p class="gsw text-center">Daily Average Target Output</p>

</div>

<div class="col-sm-1 newclass bgc-m-2">

<div class="container-fluid text-center">

<p class="gsw mt-5 pt-5">Production Days Remaining</p>

<p class="display-3"><%=proddays%></p>

</div>

</div>

<div class="col col-sm newclass bgc-m-2">

<div class="row newclass">

<div id="chart">

<h5>PLAN</h5>

<center><p class="" style="margin-top: -8px">50%</p></center>

</div>

</div>

<center><p class="gsw">Accumulated</p></center>

<center><p class="doughnuttext"><%=pacc%></p></center>

<center><p class="gsw">Balance</p></center>

<center><p class="doughnuttext2"><%=pbal%></p></center>

</div>

<div class="col col-sm newclass bgc-m-2">

<div class="row newclass">

<div id="chart2">

<h5>SDP</h5>

<center><p class="" style="margin-top: -8px">50%</p></center>

</div>

</div>

<center><p class="gsw">Accumulated</p></center>

<center><p class="doughnuttext"><%=sdpacc%></p></center>

<center><p class="gsw">Balance</p></center>

<center><p class="doughnuttext2"><%=sdpbal%></p></center>

</div>

<div class="col-sm newclass bgc-m-2">

<div class="row newclass">

<div id="chart3">

<h5>PO</h5>

<center><p style="margin-top: -8px">50%</p></center>

</div>

</div>

<center><p class="gsw">PO Balance Count</p></center>

<center><p class="doughnuttext"><%=pobalc%></p></center>

<center><p class="gsw">PO Balance</p></center>

<center><p class="doughnuttext2"><%=pobal%></p></center>

</div>

</div>



<div class="row">

<div id="myCarousel" class="carousel slide col-sm-7 bgc-lg-2 newclass" data-ride="carousel">

<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

<li data-target="#myCarousel" data-slide-to="3"></li>

</ol>


<!-- Wrapper for slides -->

<div class="carousel-inner">

<div class="item active">

<div class="col-sm-12 newclass bgc-lg-1">

<div id="columnLegend"></div>

<span><h5 class="title">Daily Sewing Output (In Minutes)</h5></span>

<div class="container-fluid">

<div class="row">

<div id="columnChart" class="chartElement"></div>

</div>

</div>

</div>

</div>


<div class="item">

<div class="col-sm-12 newclass bgc-lg-1">

<div id="columnLegend2"></div>

<span><h5 class="title">Daily Sewing Output (In Minutes)</h5></span>

<div class="container-fluid">

<div class="row">

<div id="columnChart2" class="chartElement"></div>

</div>

</div>

</div>

</div>

<div class="item">

<div class="col-sm-12 newclass bgc-lg-1">

<div id="columnLegend3"></div>

<span><h5 class="title">Daily Sewing Output (In Minutes)</h5></span>

<div class="container-fluid">

<div class="row">

<div id="columnChart3" class="chartElement"></div>

</div>

</div>

</div>

</div>

<div class="item">

<div class="col-sm-12 newclass bgc-lg-1">

<div id="columnLegend4"></div>

<span><h5 class="title">Daily Sewing Output (In Minutes)</h5></span>

<div class="container-fluid">

<div class="row">

<div id="columnChart4" class="chartElement"></div>

</div>

</div>

</div>

</div>

</div>


<!-- Left and right controls -->

<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#myCarousel" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

<span class="sr-only">Next</span>

</a>

</div>

<div class="col-sm newclass bgc-lg-2">

<h5 class="card-category">PO</h5>

<div class="container-fluid">

<div class="row">

<p class="col-2" style="position: relative"><b>Plan</b></p>

<p class="col-5" style="position: relative"><b>Quantity</b></p>

<p class="col-3" style="position: relative"><b>No. of PO(s)</b></p>

</div>

<div class="row mx-5">

<div class="col" id="dg1">

<center><p class="mr-5" style="margin-top:30px">10000</p></center>

<center><p class="mr-5">10000</p></center>

</div>

<div class="col" id="dg2">

<center><p class="mr-5" style="margin-top:30px">10000</p></center>

<center><p class="mr-5">10000</p></center>

</div>

</div>

<p><b>Past Due</b></p>

<div class="row mx-5">

<div class="col" id="dg3">

<center><p class="mr-5" style="margin-top:30px">10000</p></center>

<center><p class="mr-5">10000</p></center>

</div>

<div class="col" id="dg4">

<center><p class="mr-5" style="margin-top:30px">10000</p></center>

<center><p class="mr-5">10000</p></center>

</div>

</div>

<p><b>SDP</b></p>

<div class="row mx-5">

<div class="col" id="dg5">

<center><p class="mr-5" style="margin-top:30px">10000</p></center>

<center><p class="mr-5">10000</p></center>

</div>

<div class="col" id="dg6">

<center><p class="mr-5" style="margin-top:30px">10000</p></center>

<center><p class="mr-5">10000</p></center>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

Ayan na po yung result sir.

upload_2018-5-28_9-38-11.png
 

Attachments

Status
Not open for further replies.

Similar threads

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development error help how how to html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

  • 6
    Replies
  • 631
    Views
  • 3
    Participants
Last reply from:
darreeen

New Topics

Popular On This Forum

Online statistics

Members online
476
Guests online
4,795
Total visitors
5,271
Back
Top