How can I achieve the following progress bar with a label over to the right with a Bootstrap v5.2 Progress Bar?
I have tried using negative margins and got close, but I'm having problems when the label gets wider due to the text getting longer:
Here is my code to get the above:
Single row (ProgressBarWithName.cshtml):
#{
var valuePercentage = (double)Model.Value / Model.MaxValue * 100;
}
<div class="row m-2" style="height: 50px;">
<div class="col-3 text-white bg-dark h-100 d-flex justify-content-end">
<div class="font-allan align-self-center"><b>#Model.Name</b></div>
</div>
<div class="col-9 h-100">
<div class="row gx-0 progress-container h-100">
<div class="col-11">
<div class="progress h-100">
<div class="progress-bar"
role="progressbar" aria-label="Example with label"
aria-valuenow="#valuePercentage" aria-valuemin="0" aria-valuemax="#Model.MaxValue"
style="width: #valuePercentage%;">
</div>
</div>
</div>
<div class="col-1 progress-label align-self-center">
<b class="#if (valuePercentage > 85){ <text>text-white</text> }">#Model.Value</b>
</div>
</div>
</div>
</div>
All rows (CustomBarChart.cshtml):
<div>
#foreach (var item in Model.Items)
{
await Html.RenderPartialAsync("ProgressBarWithName", item);
}
</div>
And I'm just hard-coding some models for testing purposes:
#{
var stat = new Stat("Some Stat", 40, 100);
var stat1 = new Stat("Some Stat1", 84, 100);
var stat2 = new Stat("Some Stat2", 86, 100);
var stat3 = new Stat("Some Stat3", 10, 100);
var stat4 = new Stat("Some Stat4", 100, 100);
var stats = new Stats(new List<Stat> { stat, stat1, stat2, stat3, stat4 });
await Html.RenderPartialAsync("CustomBarChart", stats);
}
CSS:
.progress-container{
margin-right: -60px;
}
.progress-label{
margin-left: -35px;
width: 0;
}
Essentially, my problem is that the default style of the bootstrap progress bar puts the label in the filled portion of the bar.
What I'm trying to do is put the label on the right side of the entire bar (whether it be the filled portion or the background).
I have tried with float, but since I'm using a row/col setup to get that sort of grid style I'm emulating.
Got it:
<div class="row m-2" style="height: 50px;">
<div class="col-4 text-white bg-gray h-100 d-flex justify-content-end rounded-2 p-2" title="#Model.Name">
<b class="font-sans align-self-center mh-100 w-100 overflow-hidden"
style="text-overflow: ellipsis; white-space: nowrap;">
#Model.Name
</b>
</div>
<div class="col-8 h-100 progress-label-container">
<div class="progress h-100">
<div class="progress-bar"
role="progressbar" aria-label="Example with label"
aria-valuenow="#valuePercentage" aria-valuemin="0" aria-valuemax="#Model.MaxValue"
style="width: #valuePercentage%;">
</div>
</div>
<div class="progress-label">
<b>#Model.Value #Model.Units</b>
</div>
</div>
</div>
.progress-label-container{
position: relative;
}
.progress-label{
position: absolute;
right: 7.5%;
top: 25%;
}
Related
<div class="p-card-wrppr" data-id="4250531">
<a class="p-card-chldrn-cntnr" href="/arko/men-3-adet-t3-tiras-bicagi-6-li-3-x-6-li-paket-p-4250531?boutiqueId=399802&merchantId=117834">
<div class="p-card-img-wr"><img class="p-card-img" src="https://img-trendyol.mncdn.com/assets/product/media/images/20191101/13/487069/16991825/1/1_org.jpg"></div>
<div>
<div class="stmp-box-wrppr">
<div class="stmp fc">free cargo</div>
</div>
<div class="cstm-stmp-box-wrppr"></div>
</div>
<div class="prdct-desc-cntnr-wrppr">
<div class="prdct-desc-cntnr">
<div class="prdct-desc-cntnr-ttl-w"><span class="prdct-desc-cntnr-ttl" title="ARKO">ARKO</span><span class="prdct-desc-cntnr-name hasRatings" title="Men 3 Adet T3 Tıraş Bıçağı 6'Lı (3 x 6'Lı Paket)">Product nameeee</span></div>
<div class="ratings">
<div class="star-w">
<div class="empty">
<div class="star"></div>
</div>
<div class="full" style="width: 100%; max-width: 100%;">
<div class="star"></div>
</div>
</div>
<div class="star-w">
<div class="empty">
<div class="star"></div>
</div>
<div class="full" style="width: 100%; max-width: 100%;">
<div class="star"></div>
</div>
</div>
<div class="star-w">
<div class="empty">
<div class="star"></div>
</div>
<div class="full" style="width: 100%; max-width: 100%;">
<div class="star"></div>
</div>
</div>
<div class="star-w">
<div class="empty">
<div class="star"></div>
</div>
<div class="full" style="width: 100%; max-width: 100%;">
<div class="star"></div>
</div>
</div>
<div class="star-w">
<div class="empty">
<div class="star"></div>
</div>
<div class="full" style="width: 67%; max-width: 100%;">
<div class="star"></div>
</div>
</div><span class="ratingCount">(21)</span></div>
</div>
<div class="prc-cntnr">
<div class="prc-box-orgnl">79,99 TL</div>
<div class="prc-box-sllng">59,78 TL</div>
</div>
<div class="prmtn-cntnr"></div>
</div>
</a>
<div class="fvrt-btn-wrppr"><i class="fvrt-btn"></i></div>
I can't pull the links of products on the shopping site
I updated the html code part :)
The problem still continues
I am trying to pull links of products on the page
some details-some details-some details-some details-some details-some details-some details-some details-some details
My code:
IWebElement link = driver.FindElement(By.ClassName("p-card-wrppr"));
link.FindElements(By.TagName("a"));
link.GetAttribute("href")
I want to make the div a standard size of 330px. But when I do it, the elements in the div will get screwed up.
<div class="col-md-3 m-wthree" style="height:330px;">
<div class="col-m">
<a href="#" data-toggle="modal" data-target="##item.id" class="offer-img">
<img src="#item.productImage" class="img-responsive" alt="" style="width:auto;height:124px;">
<div class="offer"><p><span>Offer</span></p></div>
</a>
<div class="mid-1">
<div class="women">
<h6>#item.productName</h6>
</div>
<div class="mid-2">
<p><label>$#item.productOriginalPrice</label><em class="item_price">$#item.productCurrentPrice</em></p>
<div class="clearfix"></div>
</div>
<div class="add">
<button class="btn btn-danger my-cart-btn my-cart-b " data-id="#item.id" data-name="#item.productName" data-summary="#item.productName" data-price="#item.productCurrentPrice" data-quantity="1" data-image="#item.productImage">Add to Cart</button>
</div>
</div>
</div>
</div>
Problem
With % as height
.m-wthree {
width: 50%;
float: left;
margin-bottom: 2em;
}
.add{
text-align:center;
}
.mid-2 p{
float:left;
font-size:0.9em;
color:#B4B4B4;
}
.mid-2 p em{
font-style:normal;
}
.mid-2 p label{
text-decoration: line-through;
font-weight:400;
margin-right:6px;
}
.mid-2 {
padding: 1em 0;
}
Above is the CSS code for the custom CSS. The CSS all seem ok and does not look like it is affecting anything....
im new to umbraco and c#, I made a blog list in umbraco razor but how can i make a load more button funcionality?
i want when the user click the button load more 5 items to the list.
One way is the the users click the button update the query, but i would need to refresh the page.
Any Help would be great since im stuck on this one, and have no clue how to do this in umbraco.
#{
var selection = Model.Content.Children().Where(x => x.IsVisible()).Take(5).ToList();
}
<div class="container-fluid" style="padding-left: 117px;">
<div class="row" style="margin-top: 5em;">
<div class="col-lg-9 col-md-9 col-sm-9">
<!-- BLOG START -->
#while(selection.Any()){
var oneItem = selection.First();
selection.Remove(oneItem);
<div class="row">
<div class="col-md-4 col-sm-12" onclick="location.href='#oneItem.Url'" style="cursor:pointer">
<div class="card">
<img src="#Umbraco.TypedMedia(oneItem.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 15em;">
</div>
</div>
<div class="col-md-6 col-sm-12" onclick="location.href='#oneItem.Url'" style="cursor:pointer">
<span class="card-text qs-blog-direcao">#oneItem.GetPropertyValue("tipoDeDirecao")</span><br><br>
<span class="qs-blog-date-1page" id="qs-datetime">#(oneItem.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span>
<br>
<span class="qs-blog-publicado-por">#oneItem.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
<span class="qs-blog-titulo-1page">#oneItem.GetPropertyValue("tituloBlog")</span>
</div>
<div class="col-md-12 col-sm-12 onclick="location.href='#oneItem.Url'" style="cursor:pointer"" style="margin-top:2em;">
<span class="qs-blog-resumo d-flex justify-content-start">#oneItem.GetPropertyValue("resumoBlog")</span>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
</div>
var twoItems = selection.Take(2).ToList();
if(twoItems.Any()){
<div class="row">
#foreach (var item in twoItems){
selection.Remove(item);
<div class="col-md-6 col-sm-12" onclick="location.href='#item.Url'" style="cursor:pointer">
<span class="card-text qs-blog-direcao-double">#item.GetPropertyValue("tipoDeDirecao")</span><br>
<img src="#Umbraco.TypedMedia(item.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 10em;margin-top: 2em;">
<div class="qs-blog-sideByside">
<span class="qs-blog-date-1page-double" id="qs-datetime">#(item.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span><br>
<span class="qs-blog-publicado-por-double"> #item.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
</div>
<div class="qs-blog-titulo-1page-double">#item.GetPropertyValue("tituloBlog")</div>
<div class="qs-blog-resumo-blog d-flex justify-content-start">#item.GetPropertyValue("resumoBlog")</div>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
}
</div>
<br>
}
}
<!-- BLOG END -->
</div>
It could be something like this:
#{
int page = int.TryParse(Request["page"], out page) ? page : 0;
int pageSize = 5;
var selection = Model.Content
.Children()
.Where(x => x.IsVisible())
.Skip(page * pageSize)
.Take(pageSize)
.ToList();
}
<div class="container-fluid">
...
</div>
<a href="#Request.RawUrl.Split('?')[0]?page=#(page + 1)">
Load next #pageSize results
</a>
I have two views; Index and Giftworx. In the Index I have icons and when each is clicked it should direct user to a specific point in the GiftWorx page. I've tried the below code but it didnt work. Any help would be appreciated.
Index View:
<div class="col-md-4 w3_agileits_features_grid">
<div class="agileits_w3layouts_features_grid">
<div class="col-xs-4 agileits_w3layouts_features_gridl">
<div class="agile_feature_grid">
#* <i class="fa fa-gift" aria-hidden="true"></i>
</div>*#
<i class="fa fa-gift" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-8 agileits_w3layouts_features_gridr">
<h4>Who uses GiftWorx</h4>
<p>See who uses GiftWorx and more.</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
GiftWorxView
<div class="why-convertible-box" id="GiftWorxUsers">
<div class="container" id="GiftWorxUsers">
<h1>Who uses GiftWorx<i class="fa fa-question-circle"></i></h1>
</div>
</div>
<div class="hoc container clear" id="GiftWorxUsers">
<div class="row">
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" style="height:auto;" src="~/Content/myTemplate/Logos/1.jpg" />
</div>
</div>
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" src="~/Content/myTemplate/Logos/17.jpg" />
</div>
</div>
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" src="~/Content/myTemplate/Logos/15.jpg" />
</div>
</div>
This is a little bit tricky but should work fine. First I declare the variable with concatenated section of your page:
#{
var strLink = Url.Action("GiftWorxUsers", "GiftWorx") + "#GiftworxArea";
}
Then on your Index View, put this on your a href link:
<div class="agile_feature_grid">
<a href='#strLink'>
<i class="fa fa-gift" aria-hidden="true">
</i>
Link text here
</a>
</div>
Make sure you have an area in your View of Giftworx which has a name in this example: Giftworx by adding this piece of code:
<a name="GiftworxArea"></a>
<div class="col-md-4 w3_agileits_features_grid">
//Other stuffs here
</div>
Now when you click on that link, you will be directed on your page on that exact spot with a section name GiftworxArea.
I want to create a group of tiles using Bootstrap 3. On the page load, I get a list of names from server and I do a foreach on the names to create a grid. For now I have achieved the tiles all to be equal size. And it looks like this.
But what I really need is
The first tile needs to be col-6, the remaining col-6 need to be occupied by four of them, and then all the remaining will be col-3.
How could I do this dynamically when the data is been looped through?
This is my existing code, where the tiles are of equal size.
#foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog")))
{
foreach (var blog in blogmaster.Children)
{
<div class="col-md-3">
<div style="background-color: ##blog.GetPropertyValue("backgroundColor"); height: 250px; margin-right: 5px">
<h4 style="padding-top: 32px; padding-left: 10px; font-weight: 300;">#blog.Name</h4>
</div>
</div>
}
}
NB: My Umbraco code may contain errors. But I hope I convey the idea that you can use.
1) You can improve your layout
Calculate the height of the large block considering the gap between two rows of small blocks.
You do not need nested blocks, because you have calculated the height of the large block and all the blocks are floated left.
Please check the layout:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.blog > div {
padding: 0;
padding-top: 5px;
}
#media (min-width: 992px) {
.blog > div {
padding-right: 5px;
}
}
.blog > .col-md-3 > div {
background: lightblue;
height: 250px;
}
.blog > .col-md-6 > div {
background: orange;
height: 505px; /* = 2 * col-md-3 + padding-top */
}
.blog h4 {
font-weight: 300;
margin-top: 0;
padding-left: 10px;
padding-top: 32px;
}
<div class="container-fluid">
<div class="row blog">
<div class='col-md-6'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
</div>
</div>
2) If only the first block has to be large
#foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog")))
{
var isFirst = true;
foreach (var blog in blogmaster.Children)
{
<div class="col-md-#(isFirst ? 6 : 3)">
<div style="background-color: ##blog.GetPropertyValue("backgroundColor");">
<h4>#blog.Name</h4>
</div>
</div>
isFirst = false;
}
}
3) If you need to repeat a large block
#foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog")))
{
var i = 0;
foreach (var blog in blogmaster.Children)
{
<div class="col-md-#(i % 9 == 0 ? 6 : 3)">
<div style="background-color: ##blog.GetPropertyValue("backgroundColor");">
<h4>#blog.Name</h4>
</div>
</div>
i++;
}
}
4) If you need a large block on the right side too
Apply the float: right property to the second large block when the screen width becomes 992px or more. I've defined a new special class .pull-md-right for this purpose. It's an analogue of the .pull-right class.
Please check new layout:
jsfiddle • codepen
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.blog > div {
padding: 0;
padding-top: 5px;
}
#media (min-width: 992px) {
.blog > div {
padding-right: 5px;
}
.pull-md-right {
float: right !important;
}
}
.blog > .col-md-3 > div {
background: lightblue;
height: 250px;
}
.blog > .col-md-6 > div {
background: orange;
height: 505px; /* = 2 * col-md-3 + padding-top */
}
.blog h4 {
font-weight: 300;
margin-top: 0;
padding-left: 10px;
padding-top: 32px;
}
<div class="container-fluid">
<div class="row blog">
<div class='col-md-6'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-6 pull-md-right'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
<div class='col-md-3'><div><h4>#blog.Name</h4></div></div>
</div>
</div>
And the code can be like this.
#foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog")))
{
var i = 0;
foreach (var blog in blogmaster.Children)
{
if (i % 18 == 0)
{
<div class="col-md-6">
}
else if (i % 18 == 11)
{
<div class="col-md-6 pull-right">
}
else
{
<div class="col-md-3">
}
<div style="background-color: ##blog.GetPropertyValue("backgroundColor");">
<h4>#blog.Name</h4>
</div>
</div>
i++;
}
}
I feel more comfortable with PHP and the questioner does not care, then how I solve this in PHP, generally, of course:
//Array declaration *ignore*
$array = [1,2,3,4,5,6,7,8,9];
//Index Creation
$i=0;
//String to store results
$myResult = "";
foreach($array as $divs){
if($i == 0 || $i>0 && $i<=4){
$myResult .="<div class='col-md-6'>your content here</div>";
}else{
$myResult .="<div class='col-md-3'>your content here</div>";
}
if($i==0){
$myResult .="<div class='col-md-6'>";
}elseif($i == 4){
$myResult .= "</div>";
}
$i++;
}
Result:
<div class='col-md-6'>your content here</div>
<div class='col-md-6'>
<div class='col-md-6'>your content here</div>
<div class='col-md-6'>your content here</div>
<div class='col-md-6'>your content here</div>
<div class='col-md-6'>your content here</div>
</div>
<div class='col-md-3'>your content here</div>
<div class='col-md-3'>your content here</div>
<div class='col-md-3'>your content here</div>
<div class='col-md-3'>your content here</div>
You can easily do this by,
#foreach (var blog in blogmaster.Children)
{
if (blog.name == "Product Path")
{
<div class="col-md-6">
<div style="background-color: ##blog.GetPropertyValue("backgroundColor"); height: 500px; margin-right: 5px">
<h4 style="padding-top: 32px; padding-left: 10px; font-weight: 300;">#blog.name</h4>
</div>
</div>
}
else
{
<div class="col-md-3">
<div style="background-color: ##blog.GetPropertyValue("backgroundColor"); height: 250px; margin-right: 5px">
<h4 style="padding-top: 32px; padding-left: 10px; font-weight: 300;">#blog.name</h4>
</div>
</div>
}
}
Just get first item and assign its class as col-md-6 and others with col-md-3. Because I'm not having your dataset, I use my own simple dataset with same color. out put is like this,