See info in Inspect but not showing…

[jlbrown1]

Hello folks! :-)

If you go to http://www.saddlebackstables.net/boarding/ and inspect the middle progress bar that says “Pasture”, you will see the following:

20%  

The progress bar is reflecting the correct level, but the 20% should be showing in the bar also.

You can see what it should look like here:

http://wptest.saddlebackstables.net/?page_id=312

Thanks in advance!

Jason

[Senff]

The words “Pasture” and “20%” don’t fit in the small space that’s available (about 33 px), so the “20%” wraps to the next line. Only when it’s about 65% is when you’ll see it, that’s when there’s enough room to show them both.

[Paulie_D]

I think the width of the div is restricting the content…is the overflow hidden somehow?

if you take the two spans out of the progress-bar div and place them the text shows up…it might be in the wrong place, but it’s visible.

<div class="progress active">
<div class="progress-bar progress-bar-default" style="width: 20%">
</div><span class="pull-left">&nbsp;&nbsp;Pasture</span>
<span class="pull-right">20% &nbsp;</span>
</div>

Looks to me as though it’s the width that’s the issue.

[jlbrown1]

@Senff,

If I want it to show all the time…what is the easiest fix? :-)

@Paulie_D,

Investigating…

[Senff]

@jlbrown1 to make it show all the time, you’ll have to move things around, and take the text (and percentage) out of the actual progress bar, pretty much like Paulie suggests.

In essence, don’t make the available space for the text depend on the value of the progress bar.

[jlbrown1]

Page

[column size=”1/4″ margin=”” last=”no”]
<h5 class=”special-title”>Occupancy Level</h5>
[progress color=”#27ae60″ percent=”0″]Stall[/progress]

[progress color=”#27ae60″ percent=”20″]Pasture[/progress]

[progress color=”#27ae60″ percent=”0″]Overnight[/progress]

[/column]

Shortcode

<?php
add_shortcode(“progress”, “curly_progress”);

function curly_progress( $atts, $content = null ) {
extract(shortcode_atts(array(
“color” => ‘default’,
‘percent’ => null
), $atts));

$css = null;

switch ($color){
case ‘red’ : $css = ‘ progress-bar-danger’;break;
case ‘blue’ : $css = ‘ progress-bar-info’;break;
case ‘green’ : $css = ‘ progress-bar-success’;break;
case ‘orange’ : $css = ‘ progress-bar-warning’;break;
default : $css = ‘ progress-bar-default’;
}

return ‘

  ‘.$content.’‘.$percent.’%  

‘;

}

[jlbrown1]

@Senff and @Paulie_D,

If I want the text to remain in the progress bar, but not make the text dependent on the percentage, etc. Is that possible?

[Paulie_D]

There’s several ways to do this but certainly the spans could go back in the progess div.

However, that should always be 100% wide. So you affect the background color somehow.

An extra div (absolutely positioned underneath perhaps) or a pseudo element…or a linear gradient background…many many ways.

[jlbrown1]

@Paulie_D,

I am a noob…best practice or easiest acceptable way? Spoon feed me…if you don’t mind. ;-) I am trying…

[Paulie_D]

Is the width dynamic or are you setting it manually?

[jlbrown1]

@Paulie_D,

No clue…remember…noob… :-)))

How do I figure that out…I gave you the shortcode on the page and the shortcode definition…what else do we need?

[Paulie_D]

I don’t grok ‘shortcodes’…whatever they are.

Is this a PHP/WP thing?

[jlbrown1]

@Paulie_D & @Senff,

I don’t even know what ‘grok’ means… :-)

Yes, a shortcode is PHP/WP thing. It allows you to easily perform functions if you are non-technical. So a developer will write a shortcode as a part of their WP theme or Plugin and then the end user like me will just type in the shortcode and values that correspond to its acceptable arguments.

So in this case:

[progress color=”#27ae60″ percent=”20″]Pasture[/progress]

So [progress] is the shortcode and above the color and percent are the arguments and the word Pasture is the text obviously.

Above I pasted the PHP code that explains what is happening when I call the [progress] shortcode because I thought it might answer the question you asked regarding the width being dynamic or manual. I don’t know…I simply used the shortcode. My assumption is that since I don’t see anything regarding width in the PHP code, it must be part of the “responsive” theme in WordPress. I noticed on my 7″ tablet this morning that if I turn it landscape, I do see the text (like @Senff stated). So it is working…I would just like to see it all the time, but I can live with it this way.

Thanks!

:-)

[Author]

Posts