in the screenshot below, i have tried to add 2 button icons in 2 different columns which are also children of a row.
I want that buttons to fit as much as big they can in the column as you see.
Here is my code for that specific row;
<div class="row">
<div class="col-md-6 mb-3 text-start">
<label for="departure">VIP ($7000):</label>
<input type="number" class="form-control" id="departure" placeholder="0" value="" required>
</div>
<div class="col-md-3 align-self-center">
<i class="bi bi-plus-circle-fill"></i>
</div>
<div class="col-md-3 align-self-center">
<i class="bi bi-plus-circle-fill "></i>
</div>
I have tried some things but couldn't get the proper design
The font-size CSS options will work best.
So you could do.
i{
font-size: 50px;
}
The above will affect all icon tags and probably all HTML5 italic tags too.
Or you can add a Class to your icons. The CSS would be....
i .big-icon{
font-size: 50px;
}
With the HTML being....
<i class="bi bi-plus-circle-fill big-icon"></i>
Here is a link to the GetBootstrap Docs....
https://icons.getbootstrap.com/#styling
Related
My toast overlaps some buttons and the default opacity is too low and it makes reading the message difficult.
Here is my toast markup:
<div class="toast-container p-3 top-0 end-0" id="toastPlacement" data-original-class="toast-container p-3">
<div id="root" class="toast align-items-center fade animate" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body" id="toastMessage">
Hello World
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
I have tried simply setting style="opacity: 1" on the 'root' element, but that did nothing.
I've looked around online, but none of the suggestions I found work.
Also, is there any finer grained control of the position of the Toast other than Left, middle, Right? I'd like to position it by a percentage or fixed value if possible.
Did you tried..?
<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>
https://getbootstrap.com/docs/5.2/utilities/opacity/
Ok, for anyone not already a web/bootstrap guru, the trick here is the background color on the .toast class is set to be translucent (85%).
So in your own css file, make a style like so:
.bg-solid-white {
background-color: whitesmoke !important;
}
Obviously use whatever color and class name you like, then:
<div class="toast-container p-3 top-0 end-0" id="toastPlacement" data-original-class="toast-container p-3">
<div id="root" class="toast align-items-center fade animate bg-solid-white" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body" id="toastMessage">
${this.message}
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
And there you have it, a solid background.
I want to place select menu and input type in a same line.
This is the link to jsfiddle demo.
html
<div class="lin">
<select data-inline="true">
<option>1</option>
<option>hello</option>
</select>
I tried it using style but i didn't get please any one help me.
Just place it in a grid, jQuery Mobile has available solution.
Working example: http://jsfiddle.net/Gajotres/26uph/
HTML:
<div class="ui-grid-a">
<div class="ui-block-a"><input type="text"/></div>
<div class="ui-block-b"><select><option>1</option><option>2</option></select></div>
</div><!-- /grid-a -->
HTML:
<div class="left">
<select data-inline="true">
<option>1</option>
<option>hello</option>
</select>
</div>
<div class="right">
<input type="text" name="txt" value=""/>
</div>
<div class="clear">
</div>
CSS:
.left{
display:inline;
float: left
}
.right{
float:right;
}
.clear{
clear:both;
}
take a look: http://jsfiddle.net/DRs8p/3/
I'm having difficulty getting Bootstrap's button addons to work in my MVC view. I'm using the latest NuGet version of ASP.NET MVC (5.1 rc1) and Bootstrap (3.03).
I have the following in my view (now that I've pared it back to just hand-coded HTML rather than using Html.EditorFor(), in an attempt to getting it to work):
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true)
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
This generates the following HTML:
<form action="xxx" method="post">
<input name="__RequestVerificationToken" type="hidden" value="T3k..." />
<div class="form-horizontal">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
</form>
The problem is that, when this is displayed in the browser (Chrome 32 / IE 11), there's a big gap between the input box and the button. Like this:
If I reduce the size of the div surrounding the input-group div to col-lg-3 or smaller, it's fine. But anything larger than that leaves a gap.
It's as though there's a maximum size on the input - and indeed, all my inputs do seem to be smaller their container div...
What could be causing this?
The default Site.css stylesheet that comes with a new MVC 5 project has a rule that limits the max-width of inputs. What you're getting is the result of the control spanning the full available width like it's supposed to, but then the input, itself, is being constrained to a defined width. Just comment out that piece of the stylesheet and everything will work as it should.
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
It's a pretty egregious shortcut the team seems to have taken in order to quickly build the sample site.
I have a control group of buttons that looks like this:
<div data-role="fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
I'd like for the label to look like the rest of the labels in my form. As you can see, the label is not inline with the control group as it is with other controls:
How do I wrap a control group in a field container and have the label appear inline? Is it possible? I didn't see any examples of this on the jqmobile site.
The entire markup for the form is:
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-native-1">Metric</label>
<select name="select-native-1" id="select-native-1">
<asp:Repeater ID="ui_metrics" ClientIDMode="Static" runat="server">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "id")%>'><%#DataBinder.Eval(Container.DataItem, "friendly_name")%></option>
</ItemTemplate>
</asp:Repeater>
</select>
<div data-role="fieldcontain">
<label for="select-native-1">Interval</label>
<select name="select-native-1" id="select1">
<asp:Repeater ID="ui_interval" ClientIDMode="Static" runat="server">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "id")%>'><%#DataBinder.Eval(Container.DataItem, "friendly_name")%></option>
</ItemTemplate>
</asp:Repeater>
</select>
</div>
<div data-role="fieldcontain">
<label for="datetime-4">Start Date</label>
<input type="datetime-local" name="datetime-4" id="datetime-4" value="" />
</div>
<div data-role="fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
<div data-role="fieldcontain">
<div data-role="rangeslider">
<label for="range-7a">Index:</label>
<input type="range" name="range-7a" id="range-7a" min="0" max="100" value="0" />
<label for="range-7b">Index:</label>
<input type="range" name="range-7b" id="range-7b" min="0" max="100" value="100" />
</div>
</div>
</div>
</div>
Solution
Working example: http://jsfiddle.net/Gajotres/PMrDn/64/
HTML:
<div data-role="fieldcontain" id="custom-fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
CSS:
#media all and (min-width: 28em){
#custom-fieldcontain label {
width: 22% !important;
display: inline-block;
}
#custom-fieldcontain [data-role=controlgroup] {
width: 78% !important;
display: inline-block;
}
#custom-fieldcontain [data-role=controlgroup] .ui-controlgroup-controls {
width: 100% !important;
}
#custom-fieldcontain [data-role=controlgroup] .ui-controlgroup-controls a {
width: 24.5% !important;
}
}
Info
Working example was made using your HTML. Media queries are used directly from jQuery Mobile css file. Rest of CSS is a label fix / content fix.
Here an example without customizing the fieldcontainer...
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Ahead</legend>
<input type="radio" name="radio1" id="hour" checked="checked">
<label for="hour">Hour</label>
<input type="radio" name="radio1" id="day">
<label for="day">Day</label>
<input type="radio" name="radio1" id="week">
<label for="week">Week</label>
<input type="radio" name="radio1" id="month">
<label for="month">Month</label>
</fieldset>
</div>
They dont stand in the same line because div with controlgroup is a block element. You could use one of the two solutions which I've used before :
Solution 1 : Using CSS to achieve the inline look
Solution
Just add a display: inline property to the control group, you're good to go.
[data-role=controlgroup] {
padding-left : 2em;
display: inline;
}
Note
The CSS selector I've used is just an indicator. Try using ID for the control group you want to change. Also, make sure that the custom style you are adding is loaded after jQM's style. To adjust the seperation between label and buttons, change the padding-left to your hearts' content.
Solution 2: Using grids to set up the layout
Grids provide a good way to arrange elements in jQM. A typical grid layoud would look like this :
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
</div><!-- /grid-a -->
This is a typical 2-column layout, which we'd use here as well. So here's how your layout must look like :
<div data-role="fieldcontain">
<div class="ui-grid-a">
<div class="ui-block-a" style="width:20%">
<label>Ahead</label>
</div>
<div class="ui-block-b" style="width:70%">
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
</div>
</div>
Note
You could adjust the width of the ui-block-* elements to any size you need by changing the width property in the HTML tag.
A consolidated Demo
http://jsfiddle.net/bGjZ8/2/
It seems like it should be very simple to specify that the h:messages generated by JSF should be styled using jQueryUI's nice ui-states. But sadly I can't make it fit. It seems that the jQueryUI states require several elements (div,div,p,span) in order to make it work.
So taking inspiration directly from the jQueryUI theme demo page:
<!-- Highlight / Error -->
<h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
</div>
</div>
<br/>
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.</p>
</div>
</div>
and trying to jam the css class details into my h:message as best I can:
<div class="ui-widget">
<h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert" infoClass="ui-state-highlight ui-corner-all ui-icon-info"/>
</div>
I don't get the icon or sufficient padding etc but the colours make it through. So, the styles are being applied but they aren't working as intended.
Any idea how I can make this work?
On that element, you need a class that gives display: block; to get the position characteristics you want, like this:
<div class="ui-widget">
<h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert block" infoClass="ui-state-highlight ui-corner-all ui-icon-info block"/>
</div>
CSS:
.block { display: block; }
Also if you're interested, here's a listing of all the classes jQuery UI uses for CSS and what they mean.