I cannot align Bootstrap v5 radio buttons vertically when the label is larger than the default text. For example, if the label is heading size 3, the radio button is at the top of the div.
<div class="form-check form-check-inline" id="btnColour" onchange="generateBtnCode()">
<input class="form-check-input" name="btnColour" id="btn-secondary" type="radio" value="secondary">
<label class="form-check-label" for="btn-secondary"><a class="btn btn-secondary">Secondary Grey</a></label>
</div>
Primary Bootstrap button as an input label
I have tried playing with vertical-align, line-height, margin-top, margin-bottom, toggling with all these things on the div, the input and the label. NOTHING WORKS.
https://codepen.io/madmanalphonsus/pen/JjBRELK - A codepen I've setup with a few different radio buttons. If anyone can figure this out I would be very appreciative.
Thanks
Tim
Adjusting the following in combination with the label/input/div:
Vertical align
Line Height
Margin
Padding
Justify-content
Screaming
Add these classes d-flex align-items-center to the div
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="https://uq-itali.github.io/uqlearnx/medi7100/css/customStyles.css" />
<link rel="stylesheet" type="text/css" href="https://uq-itali.github.io/fontawesome-v6.1.1-free/css/all.css" />
<link rel="stylesheet" type="text/css" href="https://uq-itali.github.io/uqlearnx/medi7100/bootstrap-5.2.1-dist/css/bootstrap.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.js"></script>
<div class="d-flex align-items-center form-check form-check-inline" id="btnSize" onchange="generateBtnCode()">
<input class="form-check-input" name="btnSize" id="btnSize1" type="radio" value=" btn-sm">
<label class="btn btn-primary form-check-label fs-1 m-3" for="btnSize1">placeholder</label>
</div>
My goodness. I found the answer!
div.form-check-inline{
line-height: 1.5rem;
display: inline-flex;
}
label{
line-height: 1.5rem;
margin-left: 5px;
}
input[type='radio'] {
line-height: 1.5rem;
margin: auto;
}
So the trick is:
that the div incasing the input and radio button needs to be inline flex
all 3 elements (div, radio button, label) have to have the same line height.
The radio button margin: auto,
and the margin-left on the label is there to have a pocket of space between the label and input.
Then if you have an element inside the label. For example in my code builder I have a element inside the label, you have to remove the pre-existing margins for that element type. So with bootstrap add class="m-0" or inline styles style="margin: 0px;".
See my working codepen here - https://codepen.io/madmanalphonsus/pen/JjBRELK
Related
I'm using ng2-file-upload (single upload example) and I want to use: ng2FileSelect with a button or a div instead of a file input. How can I do this?
I want this to do something like this:
<button ng2FileSelect [uploader]="uploader">Choose file</button>
Instead of:
<input type="file" ng2FileSelect [uploader]="uploader" />
If does not exist a clean way using ng2-file-upload, do you know an alternative?
One possible solution is to leverage Angular 2's template variables, and to assign a template variable to the input element; once done, you can directly invoke methods defined on that input from another element, such as a button.
I did the following in one of my applications; it works on IE11, Firefox, and Chrome:
<button (click)="fileInput.click()" class="btn btn-default">Upload</button>
<span style="visibility: hidden; position: absolute; overflow: hidden; width: 0px; height:0px;border:none;margin:0; padding:0">
<input type="file" #fileInput ng2FileSelect [uploader]="uploader" />
</span>
So as you can see, the button is simply calling the #fileInput's click event within its own click event.
Note that I'm burying the input within a span, and then hiding the span from view via a bunch of styles, such that only the button is visible. Also note that applying these styles to the input element directly seemed to cause problems in IE11.
Yon can wrap input[file] element with label element and hide it. See this answer and this example
Here's the code.
HTML:
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>
CSS:
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
In a simple way, you can do it with label, you just have to hide the input.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<label class="btn custom-input-btn">
<input type="file" name="photo" style="display:none" accept="*" multiple>
<i class="fa fa-cloud-upload"></i> Upload Files
</label>
Is there a way to control the form input size based on the screen size with t he default css or is this something I will have to create custom css to do? I would like the inputs to be larger on smaller screen size and then there default size on larger displays.
Well you are already using twitter bootstrap.
I could elaborate on this issue more but Bootstrap does this the best.
So before I start please view : Bootstrap CSS
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Second:
If you want some pieces Larger on smaller device use : max-width css property.
You can also use the .img-responsive Class made by Bootstrap. But basically all of that is written in the link I provided. If you have something more specific I'd love to help!
Good Luck on all.
So this may not be the correct answer but the answer above doesn't explain too much with regards to actual code...
So, here's what I have:
<div class="row">
<div class="col-xs-3 col-sm-8" style="vertical-align: middle;align-self: center;">
<input type="text" name="search" placeholder="Search lots..." style="padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc;
border-radius: 4px; box-sizing: border-box; width:100%;" bind="#searchValue" />
</div>
<div class="col-xs-1 col-md-2" style="vertical-align: middle;align-self: center;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
onclick="#searchColumn(searchValue)">
SEARCH
</button>
</div>
<div class="col-xs-1 col-md-2" style="vertical-align: middle;align-self: center;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
onclick=#(async () => await Reload()) id="btnReset">
RESET
</button>
</div>
</div>
Using bootstraps "row" and "col" classes, we can make a row, with columns inside it...
The class="col-sm-8" means, column, on a small device, with a column size of 8...
The column sizes range from 1 - 12
So if you had two columns with col-md-6 you would have two equal columns in a row...
By including two declarations you're telling bootstrap to use a certain column size on a certain screen size, defined by xs (extra small), sm (small), md (medium), lg (large)
You can have a look at this article I found which explains the different options in detail: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
extra: https://www.w3schools.com/bootstrap/bootstrap_grid_medium.asp
Hope this helps :)
all I have a tabContainer with tiltes(Label) and what I need to achieve is when a tabbed is clicked I want the color to be changed to red or whatever meaning is active and the remaining unactive tab stay maybe black the default color. I have tried searching on the web and the only solution I see is css with class .tabLabel{color: Red;} which changes all the tab title to red also tried the onShow event of which can respond alert event but not the stylesheet. Also if you have the id in the tabcontainer and apply css with dojo javascript it changes the content in the tab not the title. Here a sample code I got fromm dojo to show what I want to achieve.
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="../../_static/js/dojo/../dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script><script src='../../_static/js/dojo/dojo.js'></script><script>require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);</script>
</head>
<body class="claro">
<div style="width: 350px; height: 300px">
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
Lorem ipsum and all around...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
Lorem ipsum and all around - last...
</div>
</div>
</div>
</body>
</html>
From the above code I want to make title="My first tab" active with a different color of the text and other tabs at default color and when My second tab is clicked make it active and do the same action as the first kind of menu links on a website.
Please help. Thanks
You can change text color of the active tab by adding this class.
.dijitChecked.dijitTab .tabLabel {
color:red;
}
Here is an example.
I am using HTML5/JS to build my app and the CSS is not applying for some reason. I am still seeing the default color. Can I not override it when you press windows+I?
Here is the CSS for reference:
.win-settingsflyout {
background-color: #fff;
}
You can just create a class to apply the color.
<style>
.colors{background-color: lightblue;}
</style>
then add this class to your div tag. <div class='win-content colors'></div>
Hope it'll work!
you can't, you'll always get the color of your Start Screen
Here in my sample app for the 'about' flyout. Is the background is red.
<div class="win-content" style="background: red;">
The full code:
<!doctype HTML>
<html>
<head>
<title>About</title>
<script src="//Microsoft.WinJS.1.0/js/base.js" type="text/javascript"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js" type="text/javascript"></script>
<script type="text/javascript">WinJS.UI.processAll();</script>
<script src="/js/about.js"></script>
<link href="/css/about.css" rel="stylesheet" />
</head>
<body>
<!-- BEGINSETTINGSFLYOUT -->
<div class="apback" data-win-control="WinJS.UI.SettingsFlyout" aria-label="App Settings Flyout" data-win-options="{settingsCommandId:'about',width:'narrow'}">
<!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
<div class="win-ui-dark win-header" style="background-color: #333333"> <!-- Background color reflects app's personality -->
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
<div class="win-label"><span data-win-res="{textContent: 'info'}"></span></div>
<img src="../images/smalllogo.png" style="position: absolute; right: 40px;"/>
</div>
<div class="win-content" style="background: red;">
<div class="win-settings-section">
<label>Test App</label>
<label>users</label>
</div>
</div>
</div>
<!-- ENDSETTINGSFLYOUT -->
</body>
</html>
You can "push" the change of you settings flyout background color with this CSS code:
.win-settingsflyout {
background-color: #fff !important; background: #fff !important;
}
<div style="width:500px">
<input type="text"><input type="text"><input type="text">
</div>
Inputs have width 31% and i will, that they fill the parent div in 100%. Auto margin for first two inputs. Like this:
Please see below code.
<div class="container">
<input type="text"><input type="text"><input type="text">
</div>
<style type="text/css">
.container {width:500px;}
.container input {width:30%;}
.container input:first-child {margin-right:5%;}
.container input:last-child {margin-left:5%;}
</style>