I want to align 2 texts left and right using bootstrap. I have used primevue component InlineMessage.
<InlineMessage severity="error" class="my-4 block align-items-center">Error Request Percentage <span class="" > 10%</span> </InlineMessage>
Can someone help me?
I tried to use text-align, align-items but it seems like not applying?
In primevue <InlineMessage> component has an embedded icon. in that case, if you going to use class = "justify-content-between" it will be not worked as you expected.
But you will be able to do it...
<InlineMessage severity="success" class="block py-5 my-4">
<div class="" style="float:left">Total Requests</div>
<div class="" style="float:right">10</div>
</InlineMessage>
And also parent element width should be 100%.
I assume you want to align one text to the left, and the span to the right?
First, you need to change the block class to flex so that you can use flexbox.
Then you need to use the justify-content utility. You can do this with the class justify-content-between.
If you don't see the changes, just add the class w-100 so that the <InlineMessage> element takes up 100% of the available width.
Your code would look like this:
<InlineMessage severity="error" class="my-4 flex justify-content-between w-100">Error Request Percentage <span style="margin-left: auto" > 10%</span> </InlineMessage>
Bootstrap has no .block css definition, you can add it yourself, for example:
.block { display: flex; }
And append to your inline class justify-content-center to center it.
If you wish to use block then define .block { display: block; } and append class text-center to center the text.
Otherwise your inline is just long as the text inside of it, and it will never align it
.block { display: flex; }
.block2 { display: block; }
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<InlineMessage severity="error" class="my-4 block align-items-center justify-content-center">Error Request Percentage <span class="" > 10%</span> </InlineMessage>
<InlineMessage severity="error" class="my-4 block2 text-center">Error Request Percentage <span class="" > 10%</span> </InlineMessage>
If I understood correctly you wish to align differently inside of inline element, then you can use something like this:
.block { display: flex; }
.block > span { flex: 1; text-align: right; }
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<InlineMessage severity="error" class="my-4 block align-items-center justify-content-left">Error Request Percentage <span class="" > 10%</span> </InlineMessage>
Related
I have the following html but this is making the button grow bigger in size. How to make the button not grow in height ?
<div fxLayout="row">
<h5>User Management</h5>
<span fxFlex></span>
<button mat-raised-button color="primary">Create</button>
</div>
Solution with fxLayoutAlign directive
The simplest way is to use the fxLayoutAlign directive on your div element as shown below.
<div fxLayout="row" fxLayoutAlign="center center">
...
</div>
Solution with CSS
The problem in your HTML template is that the h5 element is the tallest element and that all other elements in the row are laid out with same height. One possible solution is to remove the top and bottom margins from the h5 element using CSS.
h5 {
margin-top: 0;
margin-bottom: 0;
}
In case you have other h5 elements on the same page that must not be altered, you need to define a specific CSS class for the h5 element that appears in the flex row (it could be named "h5-inline").
.h5-inline {
margin-top: 0;
margin-bottom: 0;
}
The HTML template would then look like this.
<div fxLayout="row">
<h5 class="h5-inline">User Management</h5>
<span fxFlex></span>
<button mat-raised-button color="primary">Create</button>
</div>
Here is my Html file
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="effects.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="effects.js"></script>
<main>
<h2>Rank our Customer Support products</h2>
<h3>Drag up or down to rank</h3>
<ul id="vsupport">
<li class="ui-state-default">Blog / How-To Articles</li>
<li class="ui-state-default">Discussion Forum</li>
<li class="ui-state-default">Knowledge Base</li>
<li class="ui-state-default">Phone Support</li>
<li class="ui-state-default">Wiki Support</li>
</ul>
<br>
<input type="submit" id="submitbutton" value="Submit ">
</main>
and the effects.js file
$(document).ready(function(){
$("#vsupport").sortable({
placeholder:"ui-state-highlight",
start:function(event,ui){
$(ui.item).effect("pulsate",{times:3},1500);
},
update:function(event,ui){
$(ui.item).effect("highlight",{color:"#7fffd4"},2000);
}
});
$("#submitbutton").button().on("click",function(){
$("#vsupport li").removeAttr("style");
});
});
My question is, when I drag the li element to sort it, the li element disappears, and through debug tool,Isaw some css style was added to the li element:
<li class="ui-state-default ui-sortable-handle" style="width: 313px; height: 18px; position: absolute; z-index: 1000;">Knowledge Base</li>
and if I remove this css style, the li element appears again.
Anyone knows why this happens and any solutions to it?
Any answer is appreciated, thanks!
It is because of how 'pulsate' operates. It will set the position of the dragged item as 'absolute' while pulsating. Thus, after the item is dropped, the next item will disappear underneath the dragged item. If you finish holding the item until pulsating is finished, then everything will operate as intended.
Therefore, let's fix the position after pulsating stops:
$(document).ready(function(){
$("#vsupport").sortable({
placeholder:"ui-state-highlight",
start:function(event,ui){
$(ui.item).effect("pulsate",{times:3},1500,function() {
$(this).css('position','initial'); //fixing the position
})
},
update:function(event,ui){
$(ui.item).effect("highlight",{color:"#7fffd4"},2000);
},
stop:function(event,ui){
}
});
$("#submitbutton").button().on("click",function(){
$("#vsupport li").removeAttr("style");
});
});
i'm trying to print my page, that i created with bootstrap.
And on the page i have select input control.
When it's printed... it has little triangle, that implicates this field is select field. But i do not want to set this information printed.
Do anyone know how to remove this triangle from printing? This one
And here is how my code looks:
<div class="col-sm-6 col-xs-12">
<span class="hidden-print">Wybierz z listy </span><!-- todo Radiobutton-->
<div class="input-group">
<select name="RAdiagnosisSelect"
class="form-control"
multiple-limit="1"
ng-model="visit.diagnosisId"
ng-disabled="!technical.firstVisit && visit.RADiagnosis!=2"
required>
<option value="1">M05.8 Inne sero-dodatnie reumatoidalne zapalenie stawów</option>
<option value="2">M06.0 Surowiczoujemne reumatoidalne zapalenie stawów</option>
<!--<option value="3">M06.1 Choroba Stilla u osoby dorosłej</option>-->
</select>
</div>
</div>
And i'm using normal printing library:
<link href="Content/bootstrap.min.css" rel="stylesheet" media="all">
Write this style
<style>
#media print {
.caret {display:none;}
}
</style>
You may hide it behind another element, for instance :before
here is a fiddle
Wrap your select with a div:
.input-group {
position: relative;
}
.input-group:before {
content: '';
position: absolute;
width: 29px;
height: calc(100% - 2px);
background: white;
top:1px;
right:1px;
z-index: 1;
}
.select-wrapper {
position: relative;
z-index: 0;
}
.select {
border: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6 col-xs-12">
<span class="hidden-print">Wybierz z listy </span><!-- todo Radiobutton-->
<div class="input-group">
<div class="select-wrapper">
<select name="RAdiagnosisSelect"
class="form-control"
multiple-limit="1"
ng-model="visit.diagnosisId"
ng-disabled="!technical.firstVisit && visit.RADiagnosis!=2"
required>
<option value="1">M05.8 Inne sero-dodatnie reumatoidalne zapalenie stawów</option>
<option value="2">M06.0 Surowiczoujemne reumatoidalne zapalenie stawów</option>
<!--<option value="3">M06.1 Choroba Stilla u osoby dorosłej</option>-->
</select>
</div>
</div>
</div>
To be honest i did it in other way.
I've split the visible part and printing part.
And got one code from showing the user content, second to printing.
It worked well, so i do not have problem with formatting.
So, the answer is: use hidden-print, and visible-print :).
I don't understand why this is so hard to do. Everything about jQuery is so simple. How do you set the width of a jQuery "display: inline;" Datepicker?
I have edited the jquery ui css but as soon as I change the month it resets the width.
I hope this is just something dumb that I'm missing.
If you are using the jQuery datepicker in its default form, then just add this to your css and it should work:
.ui-datepicker {
width: 17em; /*what ever width you want*/
}
Reducing the font size of the calendar will reduce the width of the date picker.
You can reduce the font size by adding this css:
div.ui-datepicker
{
font-size:10px;
}
I solved this using a wrapper, and setting a CSS class to force the inline datepicker to have width 100% of its parent, so when you put the datepicker on a .col, for example, the widget adjust to the width of its parent when row width changes, up to a limit of course, but is acceptable. This was usefull for me to use inside a bootstrap .col and width will responsive.
<div style="width:30vw;">
<div id="mydatepicker"></div>
</div>
<script type="javascript">
$('#mydatepicker').datepicker();
</script>
<style>
.ui-datepicker.ui-datepicker-inline {
width: 100% !important;
}
</style>
Of course, you can put the style inside your site CSS file, but always after jQuery-ui styles.
Test with the snippet changing the width of #mydpcontainer
$('#mydatepicker').datepicker();
.ui-datepicker.ui-datepicker-inline {
width: 100% !important;
}
.mydpcontainer {
width: 35vw;
margin-left: auto;
margin-right: auto;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="mydpcontainer">
<div id="mydatepicker"></div>
</div>
.container {
width: 270px;
}
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
Does the jQuery Mobile framework have a way of centering elements, specifically buttons? It looks like it defaults to left-aligning everything and I can't find a way (within the framework) to do this.
jQuery Mobile doesn't seem to have a css class to center elements (I searched through its css).
But you can write your own additional css.
Try creating your own:
.center-button{
margin: 0 auto;
}
example HTML:
<div data-role="button" class="center-button">button text</div>
and see what happens. You might need to set text-align to center in the wrapping tag, so this might work better:
.center-wrapper{
text-align: center;
}
.center-wrapper * {
margin: 0 auto;
}
example HTML:
<div class="center-wrapper">
<div data-role="button">button text</div>
</div>
An overkill approach: in inline css in the div did the trick:
style="margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;"
Centers like a charm!
In the situation where you are NOT going to use this over and over (i.e. not needed in your style sheet), inline style statements usually work anywhere they would work inyour style sheet. E.g:
<div data-role="controlgroup" data-type="horizontal" style="text-align:center;">
The best option would be to put any element you want to be centered in a div like this:
<div class="center">
<img src="images/logo.png" />
</div>
and css or inline style:
.center {
text-align:center
}
I had found problems with some of the other methods mentioned here. Another way to do it would be to use layout grid B, and put your content in block b, and leave blocks a and c empty.
http://demos.jquerymobile.com/1.1.2/docs/content/content-grids.html
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b">Your Content Here</div>
<div class="ui-block-c"></div>
</div><!-- /grid-b -->
None of these answers alone worked for me. I had to combine them. (Maybe it is because I'm using a "button" tag and not a link typed as a button?)
In the HTML:
<div class="center-wrapper"><button type="submit" data-theme="b">Login</button></div>
In the CSS:
.center-wrapper {
text-align: center;
width: 300px;
margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;
}
You can make the button an anchor element, and put it in a paragraph with the attribute:
align='center'
Worked for me.
To have them centered correctly and only for the items inside the wrapper .center-wrapper use this. ( all options combined should work cross browser ) if not please post a reply here!
.center-wrapper .ui-btn-text {
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
margin: 0 auto;
}
This works
HTML
<section id="wrapper">
<div data-role="page">
</div>
</section>
Css
#wrapper {
margin:0 auto;
width:1239px;
height:1022px;
background:#ffffff;
position:relative;
}
Adjust as your requirement
.ui-btn{
margin:0.5em 10px;
}