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.
Related
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
when i scroll down the page, the navigation bar sticks on the top and later on part keeps going up,but it is going through the navigation bar.
it looks like navigation bar is transparent.
code https://codepen.io/manpreetwadhoun/pen/LvMjBY
<html lang="en">
<head>
<meta charset="utf-8">
<title>1st</title>
</head>
<body>
<div>
<h1 >head</h1>
<header >
<ul id="listContainer">
<li >
Home
</li>
<li >
About</li>
<li >
Menu</li>
<li >
Order Online</li>
</ul>
</header>
<section>
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="home-
dish">
</section>
</div>
</body>
</html>
You've used a huge image that covers a large area of the screen below. The natural background color of the document root is white, unless a background color is specified on an element, such as html or body.
The white is just an illusion here.
Simply add the background color to your header:
header {
position: sticky;
background-color: #fff;
}
Now you have that persistent background that you want.
If I understand, you should simply add the following styles to the header element
background-color: #fff;
border-color: #fff;
Here's my layout sample on bootply
Does this require a CSS 'hack' or did I get my markup wrong to begin with?
(or, is this the default intended Twitter bootstrap design)?
Just put the jumbotron in a row div:
<div class="row">
<div class="jumbotron">
.....
.....
</div>
</div>
OR use css to increase the width and adjust the position like:
<div class="jumbotron" style="width:102%; margin-left:-1%">
....
....
</div>
(not recommended)
This is what a default Jumbotron looks like. I'm not sure why you didn't just check the Bootstrap documentation to see their basic example?
Edit: The reason why your Jumbotron isn't the same width is because your table is wrapped in a .row class which has margin-left: -15px & margin-right: -15px applied to it.
To fix your issue, wrap your .jumbotron in a <div class="row"></div>
You should always place your elements within a column though. e.g. .row > .col-sm-12 > .jumbotron
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a lead</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
I have used Bootstrap 3 to create a page with a fixed nav bar top. In the body I have elements with #anchor tags. When I click from the nav bar, the element position is displayed but there seems to be a misalignment of the row (approximately the height of the nav bar) - BS3.0 docs say you need to put the padding-top of the body to the height of the nav bar (50px in this case) and have the body position relative. There have been posts about the docs not being correct and I can't seem to fix this...
here is a fiddle: http://jsfiddle.net/richnasser/fkLh9sf4/1/ and the full screen http://jsfiddle.net/richnasser/fkLh9sf4/1/embedded/result/
Click on 'about' and the scrolling should stop at the top of the Santa Claus header. In my browser (Chrome) it goes well beyond that, hiding the headline. Any insights would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>North Pole Industries</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="topNavBar">
<div class="container-fluid">
<div class="navbar-header">
<button class ="navbar-toggle" data-toggle = "collapse" data-target = "#navHeaderCollapse">
<span class = "glyphicon glyphicon-list-alt"></span>
</button>
<div class = "collapse navbar-collapse" id="navHeaderCollapse">
<ul class = "nav navbar-nav">
<li class="active">home</li>
<li>capabilities</li>
<li>client list</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class = "row" id="home">
<div><img src= "http://placekitten.com/1200/600" class="img-responsive" alt="kitty"></div>
</div>
<div class = "row">
<div><img src= "http://placehold.it/1200x400" class="img-responsive" alt="grey"></div>
</div>
<div class = "row">
<div class="col-md-3" id="about"><h3>Santa Claus <small>chief</h3></small><p class="text-justify">Santa brings over fifteen years of experience in the auto industry through a combination of roles in marketing, field work and wind tunnel studies. His success is derived from innovative thinking and a keen ability to solve complicated problems. Santa has worked in both US and International markets doing both strategic and tactical marketing.</p>
Read More</div>
<div class="col-md-3" class="headshot"><img src= "http://placehold.it/260x400" class="img-responsive" alt="santa"></div>
<div class="col-md-3" class="headshot"><img src= "http://placehold.it/260x400" class="img-responsive" alt="rudolf"></div>
<div class="col-md-3"><h3>Rudolf <small>dog</h3></small><p class="text-justify">Rudolf counts on over fifteen years experience delivering leadership and marketing capabilities to auto and technology companies, creating profitable and sustainable business growth. He built his reputation on a solid commitment to customers, passion for marketing excellence, and a strong climate of teamwork.</p>
Read More</div>
</div>
<div class = "row">
<div><img src= "http://placehold.it/1200x400" class="img-responsive"></div>
</div>
</div>
and the css
body {
position: relative;
padding: 50px;
}
You can achieve this using simple JavaScript. Below Fiddle will help you to figure it out.
http://jsfiddle.net/ianclark001/aShQL/
In the above fiddle code, update the fromTop height as per your fixed header height.
var fromTop = 50; // Give Your fixed header height
And also you can find more information at:
offsetting an html anchor to adjust for fixed header
I have used this solution, with no javascript, only css, and worked for me:
Give your anchor a class:
<a class="anchor" id="top"></a>
You can then position the anchor an offset higher or lower than where
it actually appears on the page, by making it a block element and
relatively positioning it. -250px will position the anchor up 250px
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}
You can adjust the top to the size of you navbar.
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;
}