So I am trying to put a progress bar and a button in a button in the same line but for some reason, it doesn't work
<button type="button" class="btn btn-primary text-nowrap" style="white-space:nowrap;">
cpu usage procentage: <span class="badge badge-light live text-nowrap" id ="cpu" style="white-space:nowrap;">{{computer.cpu_usage_procentage}}</span>
</button>
<div class="progress">
<div id="cpu-progress" class="progress-bar bg-danger" role="progressbar" style="width: {{computer.cpu_usage_procentage}}%" aria-valuenow="{{computer.cpu_usage_procentage}}" aria-valuemin="0" aria-valuemax="100">{{computer.cpu_usage_procentage}}</div>
</div>
What I want is them to be in the same line instead of different lines so I saw that white-space:nowrap; should do the work but for some reason, it still doesn't work
white-space relates to text wrapping. this is two elements.
add this to the css:
.progress {
display: inline-block;
}
Related
I'm trying to edit my code so, that if I hover over the delete button, the text gets a strikethrough-line, just like the css option text-decoration: line-through does.
EDIT:
I'm trying to have the Text "Creating this basic TODO Website" with a strikethrough, when hovering over the delete button
Is there a way to achieve this, without using JS, or do I need to use JS? (I'm currently using Bootstrap4)
The Code part is:
<tr>
<th scope="row">3</th>
<td class="text-justify">Creating this basic TODO Website</td>
<td>14/05/2020</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
</td>
<td>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
<i class="material-icons">create</i>
</button>
<button type="button" class="btn btn-warning">
<i class="material-icons">delete</i>
</button>
</td>
</tr>
Okay, I think I understand your problem. The problem is there is no "previous sibling" or "parent" selector in css. But I think a little bit tricky dom modification, and pure css, you can achive your goal.
table tr {
display:flex;
flex-direction: row-reverse;
}
table tr td:hover+td+td+td+td.your-text {
text-decoration: line-through;
}
<table border=1>
<tr>
<td>
<button type="button" class="btn btn-warning">
<i class="material-icons">delete</i>
</button>
</td>
<td>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
<i class="material-icons">create</i>
</button>
</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
</td>
<td>14/05/2020</td>
<td class="text-justify your-text">Creating this basic TODO Website</td>
<th scope="row">3</th>
</tr>
</table>
Explanation: The td-s are reversed, and css flexbox make re-reverse order. So it visible as normal order, but it is important: in the dom, it is reversed. After that you can use next element selector (+) more than once times. And the last trick: I split the buttons cell into two parts to access to delete button's cell exactly.
You can do it with CSS
i:hover {
text-decoration: line-through;
}
When you use bootstrap X, you can still use CSS:
button.not-available:hover, button.not-available i:hover {
text-decoration: line-through;
}
<button class="not-available">
<i>create</i>
</button>
<button>
<i>delete</i>
</button>
I have an input-group as follow:
<div class="input-group" style="width:100%;"> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-primary" onclick="CaptureMapLocation('DependentRelation','0');" role="button"><i class="fa fa-map-marker"></i></a> </div> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-search"></i></a> </div> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-remove"></i></a> </div> </div>
I need the last button to have a fixed width, how to do that?
You can achieve this with CSS - the following will target the input group button that is the last child of the input group and apply a width to it.
You should move all your inline styling to a separate (external) CSS sheet which will make the code cleaner and easier to read.
Note the following will apply to all input group buttons in your page so you might want to apply a specific class or id to the parent input group div.
.input-group-btn:last-child {
width: 100px; // or whatever your desired width is
}
You can also do this with flex
.input-group {
display: flex;
}
.input-group-btn {
flex-grow:1;
}
.input-group-btn:last-child {
flex-grow: 0;
flex: shrink:0;
flex-basis: 100px; // or whatever your desired width is
}
If you want to apply the fixed witdh to the second button then it would be
.input-group-btn:nth-child(2){
width: 100px; // or whatever your desired width is
}
Ultimately - if any button could be afffected - you could create a "fixed-width-class" and apply it to the button / s you want affected.
.input-group-btn.fixed-width {
width: 100px; // or whatever your desired width is
}
I'd like to show a <h4> in line with a <button>:
<h4 style="display:inline-block;">headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
https://jsfiddle.net/punwaew1/1/
Result: the two elements are shown below each other. Why?
Because h4 and .dropdown are on the same level. Set display: inline-block for the elements on the same level to make them align.
h4,
.dropdown {
display: inline-block;
vertical-align: top;
margin: 0;
}
<h4>headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
The default value of display on a <div> element is display:block;. You have to set the display:inline-block; to the <div> too!
Simply add the following rule (https://jsfiddle.net/punwaew1/5/):
div.dropdown {
display:inline-block;
}
Add line style to <div class="dropdown" **style="display:inline-block;"**>
DEMO 1
OR use proper rows and column of bootstrap to get best results and consitency.
Here is your fiddle Just give display: inline-block to dropdown div
https://jsfiddle.net/sesn/punwaew1/4/
This can be done without any extra css. So in-order to make your button inline with your headline, place the button between the <h2></h2> heading tag.
Structure:
<h1>Headline
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
Button
</button>
</h1>
Have a look at your updated fiddle here
So I have this code:
<div style="top: 143.4px; left: 345.85px; display: block;" class="w size-200" tabindex="1" id="sitetour-wrapper">
<span id="sitetour-pointer"></span>
<div class="content-wrapper">
<span id="sitetour-header" class="sitetour-header">Test Text</span>
<div id="sitetour-content">
Why this is not being read
<div id="demo-bb" class="demo-bg">
<div></div>
</div>
</div>
</div>
<div id="sitetour-footer">
<button style="display: block;" type="button" title="back" id="sitetour-back-btn" class="back-btn btn-link">Back</button>
<button style="display: none;" type="button" title="next" id="sitetour-next-btn" class="submit-btn">Next</button>
<button type="button" title="close" class="btn-link cancel-btn" id="sitetour-close-btn">Close</button>
</div>
</div>
And I want it so that when I focus on #sitetour-header the screen reader will read the contents of the text accordingly.... but this code doesn't read it properly when using NVDA + Firefox...what did I do wrong?
I've tried to reproduce this issue in codepen, jsfiddle and using static html and all three are reading the text using firefox and NVDA. If the text is not being read, it's likely due to interference from other aspects of the page. If you're able to say how it's not being read properly that could also help figure out what's going on.
I have a real problem to change some simple css with Angular and css.
I have the code:
<div class="progress">
<div class="progress-bar progress-bar-info" ng-class="stepOne">1</div>
<div class="progress-bar progress-bar-info" ng-class="stepTwo">2</div>
<div class="progress-bar progress-bar-info" ng-class="stepTree">3</div>
</div>
<div class="well col-lg-12">
<applystepone ng-if="step.one"></applystepone> <!-- this is my directive -->
<applysteptwo ng-if="step.two"></applysteptwo>
<applysteptree ng-if="step.tree"></applysteptree>
</div>
In the directive : applystepone i have a button. If I click on the button i want the css of the progress bar change for ng-class="stepOne"
The button in the directive :
<div class="col-lg-12 text-center">
<a class="btn btn-primary" ng-click="steptwo(); stepOne='valide-step'">Next step</a>
</div>
And the directive :
app.directive('applystepone', function() {
return {
restrict: 'E',
templateUrl: 'partials/apply-step-one.html'
};
});
If i click on the button, nothing append to the
ng-class="stepOne"
If i place in the apply-step-one.html
<p ng-class="stepOne">Test </p>
The css works, so the button works fine. I suppose it's because my ng-click is in the directive and not the ng-class="stepOne".
Not 100% sure I understood the whole thing, but here it goes.
I think you should consider modifying your CSS (which you haven't shown, btw) and the code slightly:
<div class="progress">
<div class="progress-bar progress-bar-info" ng-class="{active: step.one}">1</div>
<div class="progress-bar progress-bar-info" ng-class="{active: step.two}">2</div>
<div class="progress-bar progress-bar-info" ng-class="{active: step.three}">3</div>
</div>
This would trigger the active class on your progress bar based on the step in scope.
Then, instead of
<p ng-class="stepOne">Test </p>
you should probably use something more generic like:
<p class="button">Test </p>
and modify the CSS to trigger it, for example:
.well p.button {
color: green;
}
And if you just want to modify the class of the button, it's simple:
<p ng-class="{'stepOne': step.one, 'stepTwo': step.two, 'stepThree': step.three}">Test </p>
It's similar to what I described above, for the progress bar divs.
Try:
<a class="btn btn-primary" ng-click="steptwo(); $parent.stepOne='valide-step'">Next step</a>
$parent will retrieve the parent scope from inside your directive.