I have markup that puts anchors (for help icons) right after <label/> elements. If the label and icon would fix on one line, everything works how I want. However, if the label causes the text to wrap (due to length), then the icon creates a line feed and renders itself on a new line. I want the icon to simply appear 'after' the label on the same line no matter how many lines the label takes.
This is the result of the rendering (in case screen sizes aren't right - note, I don't know why Font Awesome isn't working in the fiddle, but you can still see the issue):
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
HTML
<div class="container">
<div class="row">
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019</label>
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a>
</div>
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 with longer text so that it wraps</label>
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a>
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Here is the fiddle: https://jsfiddle.net/8x2na97d/
Add the anchor tags inside label.
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a>
</label>
Solution : https://jsfiddle.net/hqx5wjop/1/
It happens because label is displayed as an inline-block and anchor tag is displayed as inline
You can also solve it by adding the style
display: inline;
to label tag
Set this CSS:
label{
display: inline;
}
Try This code label{display:inline;}
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
label{
display:inline;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 ffddff</label>
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a>
</div>
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 with longer text so that it wraps</label>
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a>
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
I think this code will help you for label and fa icon in same line,
<style>
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 0px #6c757d;
padding: 10px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a></label>
</div>
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 with longer text so that it wraps
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a> </label>
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
</body>
Related
I've installed a module from https://desislavsd.gitbook.io and used it for my custom modal. However I have trouble the dropdown is not overlapping and stuck in here even adjusting z-index:999 does not do anything.
I also tried to make adjustments to the height but upon clicking the custom component but doesn't work because if I already make the height of the modal higher before the dropdown list is shown it would leave a big space below they dropdown which is not friendly looking.
Custom module https://jsfiddle.net/desislavsd/es2n6py0/
Either adjusting the height of the modal onclick will do or overlapping the dropdown as long as the lists are shown.
<div class="filter-body-w-auto shadows-box p-0 col-lg-5 col-md-6 col-sm-9" v-if="getSelectedFilterType == 'connectivity'">
<div class="filter-header">
<h6>Connectivity</h6>
<div class="filter-close-btn" #click="hideModal('')">
<i class="fa fa-times fa-lg" aria-hidden="true"></i>
</div>
</div>
<div class="row pt-1 px-2 mt-0 mb-2 mx-1 justify-content-evenly">
<p class="text-dark text-start mt-1 mb-0 mx-0 py-1 px-0" style="font-size: 100%;">Available to All Tenants</p>
<v-select v-model="selected.browsers" as="name:id:id" :from="browsers" tagging :tag-keys="[9,32,188]"></v-select>
</div>
</div>
-------------------------------------------------------------------------
<!-- Inspector code -->
<div data-v-796ce895="" class="filter-body-w-auto shadows-box p-0 col-lg-5 col-md-6 col-sm-9">
<div data-v-796ce895="" class="filter-header">
<h6 data-v-796ce895="">Connectivity</h6>
<div data-v-796ce895="" class="filter-close-btn">
</div>
</div>
<div data-v-796ce895="" class="row filter-tags pt-1 px-2 mt-0 mb-2 mx-1 justify-content-evenly">
<p data-v-796ce895="" class="text-dark text-start mt-1 mb-0 mx-0 py-1 px-0" style="font-size: 100%;">Available
to All Tenants</p>
<div data-v-796ce895="" tabindex="-1" class="v-select -empty -multiple">
<div class="v-select-bar">
<div class="v-select-inp-group"><input placeholder="Search.." class="v-select-inp"><button type="button"
tabindex="-1" class="v-select-btn-clear"></button><button type="button" tabindex="-1"
class="v-select-btn-dd"></button><button type="button" tabindex="-1"
class="v-select-btn-spinner"></button></div>
</div>
<div class="v-select-list">
<span class="v-select-option">Internet Explorer</span>
<span class="v-select-option">Firefox</span>
<span class="v-select-option">Chrome</span>
<span class="v-select-option">Opera</span>
<span class="v-select-option">Safari</span>
<span class="v-select-option">Opera3</span>
<span class="v-select-option">Opera2</span>
<span class="v-select-option">Opera2</span>
<span class="v-select-option">Opera1</span>
<span class="v-select-option">Opera11</span>
</div>
</div>
</div>
</div>
CSS
.filter-body-w-auto[data-v-796ce895] {
display: inline-block;
z-index: 99;
background: white;
border-radius: 6px;
box-shadow: 4px 4px 4px rgb(0 0 0 / 20%);
top: 400px;
transform: translate(-50%, 0);
overflow: hidden;
position: fixed;
height: 500px;
max-height: 100%;
}
.filter-header[data-v-796ce895] {
background: #466cb3;
padding: 10px 17px;
color: #FFF;
width: 100%;
text-align: left;
}
3rd party css module: https://github.com/desislavsd/vue-select/blob/master/dist/vue-select.css
Btw I also have used some bootstrap classes in here mixed with custom styles
Awkward design but another possible solution if overlap does not work
I am implementing a chat module like linked-in or facebook. User List is one parent component (col-md-12) and after each user click, I am creating a new child component (col-md-3 each). Everything is working fine but the scroll option on (col-md-12) is not working. The position of parent and child component is fixed hence the background scroll is only working if I scroll outside col-md-12 class area.
<div class="row" >
<div class="content">
<div class="row">
<div class="col-md-12" id="ng-chat-view">
<div class="col-md-3 chat-farmer-list-ui">
<div id="ng-chat-people" [ngClass]="{'ng-chat-people-collapsed':isCollapsed}">
<a href="javascript:void(0);" class="ng-chat-title shadowed" matTooltip={{farmerListTooltip}} (click)="onChatTitleClicked($event)">
<span>
Farmer List
</span>
</a>
<input *ngIf="!isCollapsed" id="ng-chat-search_friend" type="search" placeholder="Search" [(ngModel)]="search" (ngModelChange)="getFarmerBySearchVal(search)"
/>
<ul id="ng-chat-users" *ngIf="!isCollapsed">
<li *ngFor="let user of farmers">
<div *ngIf="!user.imageUrl" class="icon-wrapper">
<i class="user-icon"></i>
</div>
<img *ngIf="user.imageUrl" alt="" class="avatar" height="30" width="30" src="{{user.imageUrl}}"/>
<strong title="{{user.user}}" (click)="openChatWindow(user, true)">{{user.name}}</strong>
</li>
</ul>
</div>
</div>
<div class="col-md-9 m-l">
<div *ngFor="let user of userInfo; let i = index">
<div>
<app-chatwindow [userInfo]="user" (onWindowCloseNotify)="onWindowCloseInChildComponent($event)"></app-chatwindow>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#ng-chat-view{
position: fixed;
bottom: 0%;
margin-right: 10px;
font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
font-size: 15px;
z-index:999;
cursor: pointer;
}
.row .m-l{
margin-left: -92px;
float: left;
}
#media (min-width: 992px){
.chat-farmer-list-ui {
float: right;
}
}
I have a page using a masterpage in asp.net 4.0. My masterpage has header which has a search box. Header has css position fixed and have z-index 10.
I am trying to create a search instruction which will open when user types anything. my instruction box do not show as floatig over header instead it opens inside header and expands it. Here are my css and html
header {
width:100%;
display:inline-block;
background-color:#ef4023;
position:fixed;
z-index:10;
}
header #Guide {
width: 100%;
z-index: 5;
margin-right: -1px;
position:relative;
background: #eee;
border: 1px solid #ccc;
}
<header>
<div class="col-lg-4 col-md-4 col-sm-2 col-xs-4">
<div class="logo">
<img src="images/logo.png" alt="logo" class="img-responsive" />
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-8">
<div class="col-md-6">
<!--SearchBarStart-->
<div ng-controller="MyCtrl">
<form>
<h3>Search Here </h3>
<input type="text" class="form-control" id="SearchKeyword" ng-model="searchText" required="required" />
<div class="list-group" id="Guide" ng-show="showLinks">
<a class="list-group-item" href="" ng-click="SearchType(0,true,'KeyWord', 1)">
<div class="input-group">
<span class="fa fa-suitcase"></span><span style="padding-left: 20px">instruction goes here</span>
</div>
</a>
</div>
</form>
</div>
</div>
</div>
</header>
You have to use position: fixed also on the instruction box, with according position settings. (relative will put it into the document flow, thereby taking up space, and absolute won't work since you don't have a relative parent for it.)
header {
width: 100%;
display: inline-block;
background-color: #ef4023;
position: fixed;
z-index: 10;
}
header #Guide {
width: 100%;
z-index: 15;
margin-right: -1px;
position: fixed;
top: 110px;
left: 0px;
background: #eee;
border: 1px solid #ccc;
}
<header>
<div class="col-lg-4 col-md-4 col-sm-2 col-xs-4">
<div class="logo">
<img src="images/logo.png" alt="logo" class="img-responsive" />
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-8">
<div class="col-md-6">
<!--SearchBarStart-->
<div ng-controller="MyCtrl">
<form>
<h3>Search Here </h3>
<input type="text" class="form-control" id="SearchKeyword" ng-model="searchText" required="required" />
<div class="list-group" id="Guide" ng-show="showLinks">
<a class="list-group-item" href="" ng-click="SearchType(0,true,'KeyWord', 1)">
<div class="input-group">
<span class="fa fa-suitcase"></span><span style="padding-left: 20px">instruction goes here</span>
</div>
</a>
</div>
</form>
</div>
</div>
</div>
</header>`
To change the color like this:
I don't seem to find how to do it anywhere.
If you want to apply the same color style to all of your cards you can do something like this:
.ui.card,
.ui.cards>.card {
background-color: #D9499A;
}
The card is divided into 3 div elements: .image, .content, and .extra.content. If you want to change the colors individually do something like:
.ui.card>.content,
.ui.cards>.card>.content {
background-color: #D9499A;
}
.ui.card>.content.extra,
.ui.cards>.card>.content.extra {
background-color: #D9499A;
}
Check this example Fiddle out:
HTML
<div class="ui card kristy">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<a class="header">Kristy</a>
<div class="meta">
<span class="date">Joined in 2013</span>
</div>
<div class="description">
Kristy is an art director living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 22 Friends
</a>
</div>
</div>
<div class="ui card matthew">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
</div>
<div class="content">
<a class="header">Matthew</a>
<div class="meta">
<span class="date">Joined in 2015</span>
</div>
<div class="description">
Matthew is an in interior designer living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 47 Friends
</a>
</div>
</div>
<div class="ui card molly">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/molly.png">
</div>
<div class="content">
<a class="header">Molly</a>
<div class="meta">
<span class="date">Joined in 2010</span>
</div>
<div class="description">
Molly is a personal assistant living in Paris.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 12 Friends
</a>
</div>
</div>
CSS
.ui.card {
display: inline-block;
margin: 10px;
}
.ui.card,
.ui.cards>.card {
background-color: #5C5D5F;
color: white;
}
.ui.card.matthew {
background-color: #2B4B64;
}
.ui.card.kristy {
background-color: #253E54;
}
.ui.card>.content>a.header,
.ui.cards>.card>.content>a.header,
.ui.card .meta,
.ui.cards>.card .meta,
.ui.card>.content>.description,
.ui.cards>.card>.content>.description,
.ui.card>.extra a:not(.ui),
.ui.cards>.card>.extra a:not(.ui) {
color: white;
}
You can give an id for the object and then set the color with CSS, eg:
#header-blue{
background-color: #1A3E6E;
}
i am trying to make my tiles look the same even text inside increase.but it does seems to be able to work even with word property.i want to make the "buy extended warranty" and ""List machines for service pack" to be same as others.
Anyone can help?
.tile {
width: 100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 30px;
margin-bottom: 40px;
text-align:center;
}
.tile:hover
{
background:#F8F9F9;
}
<div class="tab-pane active" id="warranty">
<div class="col-md-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a>
</div>
<div class="col-md-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a>
</div>
<div class="col-md-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a>
</div>
<div class="col-md-4 ">
<a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a>
</div>
<div class="col-md-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a>
</div>
<div class="col-md-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a>
</div>
<div class="col-md-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a>
</div>
</div>
You could use flex-box for this:
css:
.tab-pane {
display: flex;
flex-wrap: wrap;
}
.tile {
width: 100%;
padding: 30px;
margin-bottom: 40px;
text-align: center;
display: block;
}
.tile:hover {
background: #F8F9F9 !important;
}
HTML
<div class="tab-pane active" id="warranty">
<div class="col-sm-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a>
</div>
<div class="col-sm-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a>
</div>
<div class="col-sm-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a>
</div>
<div class="col-sm-4 ">
<a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a>
</div>
<div class="col-sm-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a>
</div>
<div class="col-sm-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a>
</div>
<div class="col-sm-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a>
</div>
</div>
I adjusted the class on your col-md-4 to col-sm-4 so you could see it in action. I included the bootstrap CDN CSS, as you are using bootstrap class names in your HTML. And I added !important to override your inline color styles on the anchor tags.
Here's the fiddle to see it in action:
https://jsfiddle.net/mjqfjbh0/1/