I am trying to make a page that shows an Application, the Environments that app is served in (Dev, Test, Prod, etc), and finally the Host that application is running on.
In our back-end, we have it set up so that an application can be made active or passive, and a host can be made active or passive as well. I've added glyphicons that visualize the app and host states.
The glyphicons are supposed to be contained within the server name button, and if you run the jsfiddle in Chrome you'll see how it's supposed to look.
The problem is in Firefox, the glyphicons get pushed down to what looks like a new line. I don't want this to happen - I want it to look the same as in Chrome. I've done some googling and inspecting of properties and can't see to ascertain why this is happening and how it can be fixed.
<body>
<div id="container" class="container-fluid col-lg-10 col-md-10 col-sm-12" role="main">
<div class="app row" id="ATStatsProcessor">
<h4>Application Name</h4>
<div class="environment col-sm-4 col-lg-3">
<h5>Environment Name</h5>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
<span class="glyphicon glyphicon-chevron-up pull-right"></span>
<div class="host">
<div class="host btn btn-default btn-pressed">
<span class="button-text">Server Name</span>
<span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
<span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.app {
color: #818a98;
border-radius: 6px;
margin: 1em;
padding: 1em;
background-color: #e4e9ef;
}
div.environment h5 {
display: inline-block;
max-width: 80%;
}
.environment {
color: #818a98;
border-radius: 6px;
margin: .5em 2.25em;
padding-top: .25em;
padding-bottom: 1em;
background-color: white;
}
.app .environment .host {
display: inherit;
margin: .25em;
}
.host.btn.btn-default {
background-color: #c93135;
color: white;
}
.host.btn.btn-pressed {
background-color: #2f3b46;
color: white;
}
.confirm.btn-success {
background-color: #63a72c !important;
}
.confirm.btn-danger {
background-color: #c93135 !important;
}
body {
background-color: #f8f9fb !important;
}
.icon-size-small {
font-size: x-small;
}
.state-enabled {
color: green;
}
.button-text {
display: inline-block;
max-width: 85%;
overflow-x: hidden;
}
https://jsfiddle.net/zc419hwa/11/
It seems that floats clear all elements within a parent element that has the white-space: nowrap; property in Firefox. Not sure why this is, but it can be worked around easily enough. You can fix the issue a few different ways:
Modify your HTML code by moving the button-text span after the glyphicons like so:
<div class="host btn btn-default btn-pressed">
<span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
<span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
<span class="button-text">Server Name</span>
</div>
--OR--
Remove property white-space: nowrap; from your .btn class.
--OR--
Absolutely position your glyphicons by adding this code to your CSS:
.host {
position: relative;
}
.host .glyphicon {
position: absolute;
top: 0;
right: 0;
margin-top: 5px;
margin-right: 10px;
}
.host .glyphicon-hdd {
margin-right: 21px;
}
Related
I put the web into the IOS app as a webview.
When I use the <detail> tag of html 5, I want to change it's display to flex not block,in web it can work but it cannot work on the phone
This is my code, is there any mistake?
details summary::-webkit-details-marker {
display: none;
}
details{
width:100%;
}
details summary {
width: 100%;
/* padding: 0.5rem 0; */
border-bottom: 1px solid #dddddd;
position: relative;
cursor: pointer;
font-size: 1.25rem;
font-weight: 300;
list-style: none;
float:left;
}
details summary:after {
content: "click me";
color: black;
right: 0;
transform-origin: center;
transition: 200ms linear;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<details style="display: flex; ">
<summary class="d-flex">
<div class="mr-3 w-75">
<p class="font-weight-bold mb-0">title</p>
</div>
<div class="mr-3 w-75">
<p class="font-weight-bold mb-0">date</p>
<span class="t-12">time</span>
</div>
</summary>
<p>
<pre class="d-inline">content</pre>
</p>
</details>
This issue is documented here: https://github.com/philipwalton/flexbugs#flexbug-9
The following workaround was proposed there:
The simple solution to this problem is to use a wrapper element that can be a flex container (like a ) directly inside of the element that can't. Demos 9.1.b and 9.2.b show workaround for the and elements, respectively.
In your case you should wrap your elements that should be displayed as flex in a wrapper element like a div.
I also faced a similar issue: the flex properties were not working with the summary tags in a WebView, otherwise working on a normal browser. The only workaround I found was to recreate the details-summary tag functionality with javascript by changing the display property.
document.querySelector('.summary').addEventListener('click', function() {
let collapsible = this.nextElementSibling
collapsible.classList.toggle('d-block')
})
section {
width: 100%;
}
.collapsible {
display: none;
overflow: hidden;
}
.summary {
width: 100%;
/* padding: 0.5rem 0; */
border-bottom: 1px solid #dddddd;
position: relative;
cursor: pointer;
font-size: 1.25rem;
font-weight: 300;
list-style: none;
}
.summary::after {
content: "click me";
color: black;
right: 0;
transform-origin: center;
transition: 200ms linear;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<section>
<div class="d-flex summary">
<div class="mr-3 w-75">
<p class="font-weight-bold mb-0">title</p>
</div>
<div class="mr-3 w-75">
<p class="font-weight-bold mb-0">date</p>
<span class="t-12">time</span>
</div>
</div>
<div class="collapsible">
<pre class="d-inline">content</pre>
</div>
</section>
i have meet same issue.when i use flex in ssummary tag.i think a good way is not to use flex instead of using other css layout ways.
position:absolute;
use trandition css to manage our child
Using the attribute value in HTML, I can't make button text work in two lines as well as different font sizes
I have already tried whitespace in css but it's more like word wrap and that does not solve my problem. I also tried using ampersand-hash13; and ampersand-hash10; but it doesn't work as well.
#media (min-height: 280px) {
.divNumKeypad {
position: fixed;
bottom: 0;
width: 100%;
}
.numberBtn{
font-size: 30px;
height: 68px;
}
<div class="col-xs-4 ">
<input id="btnEight" type="button" tabindex="-1" value="HI HELLO" class="btn btn-primary btn-block numberBtn" onclick="buttonClick(8)" />
</div>
I expect to have a button with two lines of text. "HI" should be on the first line with bigger font and the bottom text "HELLO" should be smaller than the text on the top.
Try this below
#media (min-height: 280px) {
.line-1, {
display:block;
font-size: 20px
}
.line-2 {
display: block;
font-size: 10px;
}
}
<div class="col-xs-4 ">
<button>
<span class="line-1">HI</span>
<span class="line-2">HELLO</span>
</button>
</div>
Consider using button instead of input:
button {
font-size: 30px;
}
<button>HI<br><small>HELLO</small></button>
Try this.
label{
max-width: 150px;
font-size: 18px;
display: block;
padding:10px 20px;
border:1px solid black;
cursor: pointer;
}
label span{
display: block;
font-size: 14px;
}
label input{
background:none;
border:none;
}
input[value]{
font-size: 0;
display: none;
}
<div class="col-xs-4 ">
<label> <input id="btnEight" type="button" tabindex="-1" value="HI HELLO" class="btn btn-primary btn-block numberBtn" onclick="buttonClick(8)" />HI<span> HELLO</span></label>
</div>
I have a problem with labels in sidebars - they create a new line in left sidepanel
Screen shot for labels
They supost to be in the same line as "Approved" and "Unapproved" menu links.
This example of code comes from : Bootstrap 3 Tutorials [COMPLETE] - Building a blog admin video tut for beginners part 6 and 7
.css file :
.box {
border: 1px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
/*color: #1f3647; */
color: #fff;
text-align: center;
margin: 10px 0px;
font-size: 24px;
}
#side-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#side-menu a {
padding: 12px 20px;
text-decoration: none;
color: #9fb1c2;
font-weight: bold;
font-size: 13px;
display: block;
}
#side-menu .glyphicon {
margin-right: 6px;
}
.html
<li class="link">
<a href="#collapse-comments" data-toggle="collapse" aria-controls="collapse-comments">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span>Comments</span>
</a>
<ul class="collapse collapsable box" id="collapse-comments">
<li>
Approved
<span class="label label-info pull-right box">17</span>
</li>
<li>
Unapproved
<span class="label label-warning pull-right">10</span>
</li>
</ul>
</li>
If I change display:block; to display:inline-block; its better :
Second screenshots for labels
but this time labels are little upper then they should be located. Another strange behavior is that articles label moved to left
Your a has display:block so its 100% width by default. a must have display set on inline or inline-block, like the spans :)
I have changed the display:block; into display:inline-block; that's working fine. could you please check it and let me know the solution.
I'm struggling with getting a section background color to change on mouse over. I'm trying to turn the entire section into a link. Right now, only the elements inside the section become links, not the block itself.
If I remove the <section> prior to the <a> the whole block becomes a link but the background sill does not change on mouse-over. I have an identical scenario in a menu and it works, so I'm a little confused here. I'm also wondering why only the elements turn into links withing a section and it does the opposite in my sub menu. Section code below:
.ch-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $ch-section-text;
font-size: 13px;
border-bottom: 1px solid $body-1px-line;
}
.ch-section a {
display: block;
width: 400px;
text-decoration: none;
}
.ch-section a.active {
font-weight: bold;
}
.ch-section a:hover:not(.active) {
background-color: yellow;
color: $sn-list-link-active;
}
<section class="ch-section">
<a href="#">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</a>
</section>
I'm struggling with getting a section background color to change on
mouse over. I'm trying to turn the entire section into a link. Right
now, only the elements inside the section become links, not the block
itself.
If I remove the prior to the the whole block becomes a
link but the background sill does not change on mouse-over.
It is because you have a as child of the section, so make it parent (as I did it in a previous question you had).
.ch-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $ch-section-text;
font-size: 13px;
border-bottom: 1px solid $body-1px-line;
}
a {
text-decoration: none;
}
a .ch-section {
display: block;
width: 400px;
}
a.active .ch-section {
font-weight: bold;
}
a:hover:not(.active) .ch-section {
background-color: yellow;
color: $sn-list-link-active;
}
<a href="#">
<section class="ch-section">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</section>
</a>
The actual problem here is that you haven't set the height of your a tag. However when setting the a tag height to 100%, you will notice it still won't work. This is because the section has no fixed height specified. Instead you specified both min-height and max-height to be the same height, which doesn't really make sense. If instead you specify height:140px, it will work as expected:
.ch-section {
position: relative;
height: 140px;
width: 400px;
font-size: 13px;
}
.ch-section a {
display: block;
height: 100%;
text-decoration: none;
}
.ch-section a.active {
font-weight: bold;
}
.ch-section a:hover:not(.active) {
background-color: yellow;
}
<section class="ch-section">
<a href="#">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</a>
</section>
I have an Angular ng-repeat that creates boxes and returns a container with a little info. I have the hover effect working, but am struggling getting the focus to work. Basically, these containers are allowed to be clicked, then show a larger box with additional info. Showing my code below. Ideas please?
html:
<h1>Pending Swipes</h1>
<div class="swipeBoxes" ng-repeat="swipe in swipes" ng-required="true">
<a href="" ng-click="editSwipe(swipe)" >
<div class="swipeBox col-md-12">
<div class="col-md-12 claimObject">
<span class="claimLine" style="width: 3px; position: absolute; top: 5px; left: 5px;">{{ $index + 1 }}.</span>
<span class="claimedLeft">swipe date:</span>
<span class="claimedRight">{{ swipe.date | date: 'MM/dd/yyyy'}}</span>
</div>
<div class="col-md-12 claimObject">
<span class="claimedLeft">provider:</span
><span class="claimedRight">{{ swipe.merchant }}</span>
</div>
<div class="col-md-12 claimObject">
<span class="claimedLeft">amount:</span>
<span class="claimedRight">{{ swipe.amount | currency }}</span>
</div>
</div>
</a>
</div>
And the css is to make this work kinda:
.swipeBoxes a {
text-decoration: none;
}
.swipeBoxes a:hover {
text-decoration: none;
}
.swipeBox, .recurBox {
background-color: #ffffff;
margin-top: 10px;
min-height: 85px;
box-shadow: 0 0 8px rgba(0,0,0,.5);
border-radius: 2px;
color: #000000;
}
.swipeBox:hover, .swipeBox:active, .swipeBox:focus {
background-color: #efefef;
}
.swipeBox >a:active, .swipeBox >a:focus {
background-color: #efefef;
}
The :focus selector is only allowed on elements that accept keyboard events or other user inputs.
So it will work on a elements but not on div.
Your css rule:
.swipeBox >a:active, .swipeBox >a:focus {
background-color: #efefef;
}
is not working because you have no a element as first child of .swipeBox