Limit width on Bootstrap input-group - html

I'm struggling with a problem for several days now and I couldn't find a solution yet, even though I've tried myself with different approaches, searched google and the mighty stackoverlow for hours.
The set-up:
I've got a panel with two list-groups next to each other, where relations can be managed. On the left are the linked items, on the right all available items that are not linked yet (featuring a pagination and all). The js-logic is working flawless. Clicking on a question-mark does display details for the item. Clicking on a plus moves an item to the left list, clicking on an "x" moves it back to the right. Of course the icons are properly switched, too.
The problem:
The items are user-generated and the form is used both on big and small screens (used bootstrap for that reason).
Some of the items do have a rather long name, limiting the users to keep it short is not an option here. If the text is too long, it just breaks out of the layout.
What I tried so far:
Since the input-groups work with simulating table-elements, I've tried several approaches with table-layout:fixed;, but that doesn't seem to work if it's not really a table. Then I tried several approaches with containing different elements in div-containers and giving them percentual sizes.
It never worked.
Now I'm experimenting with cutting the text server-side, but that looks stupid if the screen is wide enough and the text is cut anyway.
Does someone smarter than me have a solution that makes overflow:hidden; and text-overflow:ellipis; work on those elements?
Here is a (very cleaned-up) fiddle to work with:
https://jsfiddle.net/Fanmade/9vf8xvuL/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Left</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 1
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 2
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 3
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Right</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 4
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 5 just has a really long text and I don't want to cut it when there is enough space on wide screens
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 6
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Edit after the answers:
Thank you both so much for the answer!
I'm feeling so stupid right now. Of course the answer had to be so simple and I was just searching in the wrong direction.

The working fiddle is
https://jsfiddle.net/sesn/y98pz4hj/1/
Here is your answer
button { white-space: normal !important; height: auto !important; }

It will work :
button {
white-space: normal !important;
height: auto !important;
}

Related

Is there a way to close the toggle menu by clicking on the page instead of the toggle button in angular and bootstrap?

I have a navbar inside the component of Angular project. The navbar that is used is responsive and has a toggle button which appears after you reduce the size of the browser window. The purpose of the button is to display or hide the menus when clicked.
What I need is that when Click anywhere instead of the button, it should close the menus that were displaying.
This is in the component of Angular Project.
<div class="row my-row">
<div class="col my-col-1 ">
<input type="checkbox" id="menu" />
<label for="menu" class="menu">
<span></span>
<span></span>
<span></span>
</label>
<nav class="nav text-white">
<ul>
<li><a routerLink=""><i class="bi bi-house my-fas"></i> <span class="my-span text-white"> Home</span></a></li>
<li><a (click)="onClick('feature')" ><i class="bi bi-play my-fas"></i> <span class="my-span"> Featured Games</span></a></li>
<li><a (click)="onClick('quickPlay')"><i class="bi bi-play my-fas"></i> <span class="my-span"> Most Played Games</span> </a></li>
<ng-template [ngIf]="permission">
<!-- <li ><i class="fas fa-user my-fas"></i> <span class="my-span"> Profile</span></li> -->
<li (click)="onLogout()"><i class="bi bi-power my-fas"></i> <span class="my-span text-white"> Logout</span></li>
<li (click)="onLogout()"><i class="bi bi-person-x my-fas"></i> <span class="my-span text-white"> Unsubscribe</span></li>
</ng-template>
</ul>
</nav>
</div>
<div class="col my-col-2">
<div *ngIf="allow ; else loggedOut">
<span class="user-name">{{userName}}</span>
<img src="../../../assets/Avatar/1.png" alt="Avatar" class="avatar">
<div class="dropdown dropleft">
<span type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="drop-down" > <i style="color: white;" class="ml-4 bi bi-caret-down"></i></span>
<div class="dropdown-menu " style="margin-right: -50px;margin-top:40px;border-radius: 8px;" aria-labelledby="dropdownMenuButton">
<!-- <a class="dropdown-item" href="#"><i class="fas fa-user my-fas"></i> <span class="my-span"> Profile</span></a> -->
<a class="dropdown-item" href="http://gamenow.noeticworld.com/unsub-portal"><i class="bi bi-person-x my-fas"></i> <span class="my-span"> Unsubscribe</span></a>
<a (click)="onLogout()" class="dropdown-item" href="#"><i class="bi bi-power my-fas"></i> <span class="my-span"> Logout</span></a>
</div>
</div>
</div>
<ng-template #loggedOut>
<button style="outline: none;" (click)="onClick('login')" class="my-button">
Login
</button>
<button style="outline: none;" (click)="onClick('login')" class="my-button">
Join Now
</button>
</ng-template>
</div>
</div>
You can achieve that functionality by using Host listeners for example within the menu component like this:
#HostListener('document:click')
clickout() {
// toggle the menu by using its reference
}

navbar active tab using using nuxt/vue

I have a side navbar and I'm trying to make it active according to page click.
This is my sidenav.nav which is a component.
<template>
<aside class="col-md-3">
<nav class="list-group">
<a href="/" class="list-group-item" exact>
Account overview
</a>
<a class="list-group-item" href="/profile/address"> My Address </a>
<a class="list-group-item" href="/profile/orders"> My Orders </a>
<a class="list-group-item" href="/profile/wishlist"> My wishlist </a>
<a class="list-group-item" href="/profile/settings"> Settings </a>
<a class="list-group-item" href=""> Log out </a>
</nav>
</aside>
</template>
Below is my code for address page, other pages are similar to this.
<template>
<section class="section-content padding-y">
<div class="container">
<div class="row">
<sidenav />
<!-- col.// -->
<main class="col-md-9">
<a href="#" class="btn btn-light mb-3">
<i class="fa fa-plus"></i> Add new address
</a>
<div class="row">
<div class="col-md-6">
<article class="box mb-4">
<h6>London, United Kingdom</h6>
<p>
Building: Nestone <br />
Floor: 22, Aprt: 12
</p>
<a href="#" class="btn btn-light disabled">
<i class="fa fa-check"></i> Default</a
>
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
<div class="col-md-6">
<article class="box mb-4">
<h6>Tashkent, Uzbekistan</h6>
<p>
Building one <br />
Floor: 2, Aprt: 32
</p>
Make default
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
<div class="col-md-6">
<article class="box mb-4">
<h6>Moscow, Russia</h6>
<p>
Lenin street <br />
Building A, Floor: 3, Aprt: 32
</p>
Make default
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
</div>
<!-- row.// -->
</main>
</div>
</div>
</section>
</template>
<script>
import sidenav from "~/components/profile-sidenav";
export default {
components: {
sidenav,
},
};
</script>
I have set account overview as the active page, when i go to address page i need 'My address' tab to be active. How do i do that? I tried but that didn't work.
Instead of using <a> tags, use <nuxt-link>. Then, in your css, style the .nuxt-link-exact-active class— for example:
.nuxt-link-exact-active {
font-weight: bold;
}
Now if you have <nuxt-link to=“/address”>My Address</nuxt-link> and the user is on the /address page, the class is added to the nuxt-link element.

Dropdown menu above portlet

I have a dropdown menu in a row in a portlet.
<div class="col-md-6">
<p class="todo-red todo-inline">Gestionnaire : <span class="bold">Name</span></p>
</div>
<div class="col-md-5">
<span class="bold caption-subject uppercase font-grey-mint">Inactif depuis : 26 J</span>
</div>
<div class="col-md-1">
<div class="btn-group">
<a class="btn btn-sm btn-default todo-add-button" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true" aria-expanded="false"><i class="fas fa-volume-mute" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li><i class="fa fa-pencil" aria-hidden="true"></i> 1 jour </li>
<li><i class="fa fa-pencil" aria-hidden="true"></i> 3 jours </li>
<li><i class="fa fa-pencil" aria-hidden="true"></i> 15 jours </li>
<li><i class="fa fa-pencil" aria-hidden="true"></i> Définitif </li>
</ul>
</div>
</div>
It's look like that:
dropdown behind the portlet
The dropdown menu is behind the portlet, I need to have it above the portlet.
I tried to z-index with position:absolute but nothing work.
I haven't find any good help on SO.
Have you any ideas about my issue?
Thank you
EDIT: Please find the JSFiddle illustration: https://jsfiddle.net/L5o0jh4k/

link working on localhost, not on live

I do not understand why my link "back to portfolio" is working on my localhost, and not on my live domain. The only links there is not working, is the back to portfolio button.
Can anybody see why?
My portfolio link
<span class="col-xs-12">
<a href="portfolio.php" class="btn btn-border">
<i class="fa fa-rocket"></i>
Back to Portfolio
/a>
<a href="contact.php" class="btn btn-border">
<i class="fa fa-comment-o"></i>
Work with me?
</a>
</span>
<span class="col-xs-12">
<a href="Portfolio.php" class="btn btn-border">
<i class="fa fa-rocket"></i>
Back to Portfolio
/a>
<a href="contact.php" class="btn btn-border">
<i class="fa fa-comment-o"></i>
Work with me?
</a>
</span>
its case sensitive change fine name o Portfolio or vise versa

Bootstrap list with badges: put icon right to the badge

I have a Twitter Bootstrap list with badges, and I have also added a delete icon I currently have two problems:
The badge is automatically situated to the right of the list row, and I want the delete icon to be after and not before the badge (I think it would look better that way). I guess I'm going to need to redefine the badge style, but don't know how to do that.
The delete icon is not vertically aligned correctly, and I haven't found the way to fix it either.
HTML:
<div class="panel-body">
<ul id="mylist" class="list-group">
<li id="item1" href="#" class="list-group-item">Item1 <span id="badge" class="badge">5</span>
<i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>
</li>
<li id="item2" href="#" class="list-group-item">Item2 <span id="badge" class="badge">-10</span>
<i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>
</li>
</ul>
</div>
Here is a JSFiddle with a small example of my situation.
Any help?
The bootstrap elements like pull-right have the property as:
float : right
Under this property, the Document Object Model is reversed. Like:
<span>First</span><i>Second</i>
would be displayed as: (Note Only Displayed as - DOM is still same.)
<i>Second</i><span>First</span>
Ans your Solution is JSFiddle is: http://jsfiddle.net/r77wkzcg/5/ (Updated)
In right Alignment, the point of connection is right. So, the first element in the DOM gets the priority to attach to the right. Explained here: http://jsfiddle.net/tpahadi/rrrr3wq3/1/
For your items use:
<li id="item1" href="#" class="list-group-item">Item1
<div class="pull-right">
<span id="badge" class="badge" style="float:left;">5</span>
<i class="fa fa-remove fa-2x" style="color: red;"></i>
</div>
</li>
Just put the icon after the badge, it depends of html elements order :
<li id="item1" href="#" class="list-group-item">
Item1
<span id="badge" class="badge">5</span> <!-- first -->
<i class="fa fa-remove fa-2x pull-right" style="color: red;"></i> <!-- second -->
</li>
And for the vertical centering of the delete icon, you can shift top the icon with a negative margin top (it's not clean but it work, just use a precise selector to avoid overriding all bootstrap elements)
See this fiddle
Put the fa-remove icon span first..
<div class="panel-body">
<ul id="mylist" class="list-group">
<li id="item1" href="#" class="list-group-item">
<i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>Item1 <span id="badge" class="badge">5</span>
</li>
<li id="item2" href="#" class="list-group-item">
<i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>Item2 <span id="badge" class="badge">-10</span>
</li>
</ul>
</div>
http://bootply.com/8wySK2DPfw