I'm trying to make an editable table with bootstrap.
So, it must include some inputs.
Table columns width usually fit with its content. Bootstrap's form-control sets the width: 100%, but i feel it too large and want the input smaller.
I found in another question that i can use w-auto on my input to bypass this.
However, table doesn't seem to shrink the column size to it's content when i do this.
I guess i should somehow tell the table which column must expand to fill the space.
I've tried setting w-100 to another column, but it breaks another input-group in another column.
<table class="table table-sm">
<thead>
<th>Problematic column</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<td class="table-danger"><input type="number" class="form-control w-auto"></td>
<td>Something else</td>
<td>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">X</button>
</div>
<input type="text" class="form-control"/>
</div>
</td>
</tbody>
</table>
See plunker
Im not 100% sure what u exactly want to achieve, but i think you want this behaviour?
Add input-group div around your first input field and remove the w-auto class.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="lib/script.js"></script>
</head>
<div class="container">
<table class="table table-sm">
<thead>
<th>Problematic column</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<td class="table-danger">
<div class="input-group">
<input type="number" class="form-control">
</div>
</td>
<td>Something else</td>
<td>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">X</button>
</div>
<input type="text" class="form-control"/>
</div>
</td>
</tbody>
</table>
</div>
</html>
Related
I have a v-data-table with table headers and the styling is inside the .vue component. When I use the following style
.v-data-table-header th {
white-space: nowrap;
}
Nothing happens to the table headers. I have also tried other css like background and text colors and nothing is happening. I checked the dev tools and there are definitely th elements and it doesn't seem like the style is being overridden by anything since it's not even showing up in the styles tab of the dev tools. If i just use .v-data-table-header the style is applied. What could be going on here?
edit:
here is the vue code
<v-expansion-panel>
<v-expansion-panel-header>
Example header
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-data-table
:headers="someHeaders"
:items="someItems"
/>
</v-expansion-panel-content>
</v-expansion-panel>
Here is the html for the table:
<div class="v-expansion-panel-content__wrap">
<div data-v-7037ec41="" class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table__wrapper">
<table>
<colgroup>
<col class="">
<col class="">
<col class="">
</colgroup>
<thead class="v-data-table-header">
<tr>
<th role="columnheader" scope="col" aria-label="Name: Not sorted. Activate to sort ascending."
aria-sort="none" class="text-start sortable"><span>Name</span><i aria-hidden="true"
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
style="font-size: 18px;">arrow_upward</i></th>
<th role="columnheader" scope="col" aria-label="Path: Not sorted. Activate to sort ascending."
aria-sort="none" class="text-start sortable"><span>Path</span><i aria-hidden="true"
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
style="font-size: 18px;">arrow_upward</i></th>
<th role="columnheader" scope="col"
aria-label="Message: Not sorted. Activate to sort ascending." aria-sort="none"
class="text-start sortable"><span>Message</span><i aria-hidden="true"
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
style="font-size: 18px;">arrow_upward</i></th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="text-start">r3_ibmmq_jms_0.1</td>
<td class="text-start">Routes/MICROSERVICE</td>
<td class="text-start">cMQConnectionFactory component
"cMQConnectionFactory_1":MQTT_RECONNECT_DELAY of cMQConnectionFactory was changed to 10</td>
</tr>
<tr class="">
<td class="text-start">r4_ibmq_jms_job_0.1</td>
<td class="text-start">Routes/MICROSERVICE</td>
<td class="text-start">cMQConnectionFactory component
"cMQConnectionFactory_1":MQTT_RECONNECT_DELAY of cMQConnectionFactory was changed to 10</td>
</tr>
</tbody>
</table>
</div>
<div class="v-data-footer">
<div class="v-data-footer__select">Rows per page:<div
class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted v-select">
<div class="v-input__control">
<div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-101"
class="v-input__slot">
<div class="v-select__slot">
<div class="v-select__selections">
<div class="v-select__selection v-select__selection--comma">10</div><input
aria-label="Rows per page:" id="input-101" readonly="readonly" type="text"
aria-readonly="false" autocomplete="off">
</div>
<div class="v-input__append-inner">
<div class="v-input__icon v-input__icon--append"><i aria-hidden="true"
class="v-icon notranslate material-icons theme--light">arrow_drop_down</i>
</div>
</div><input type="hidden" value="10">
</div>
<div class="v-menu">
<!---->
</div>
</div>
</div>
</div>
</div>
<div class="v-data-footer__pagination">1-2 of 2</div>
<div class="v-data-footer__icons-before"><button type="button" disabled="disabled"
class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
aria-label="Previous page"><span class="v-btn__content"><i aria-hidden="true"
class="v-icon notranslate material-icons theme--light">chevron_left</i></span></button>
</div>
<div class="v-data-footer__icons-after"><button type="button" disabled="disabled"
class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
aria-label="Next page"><span class="v-btn__content"><i aria-hidden="true"
class="v-icon notranslate material-icons theme--light">chevron_right</i></span></button>
</div>
</div>
</div>
</div>
I figured out the issue. The vue component was using 'scoped' styles which stops styling from applying to child components. I removed the scoped from <style scoped> and now it works as expected.
I'm trying to build a settings for my WordPress plugin, I want my image to be displayed aside the table on the right, but it always goes to bottom can you guys help me to fix that ?
<form action="options.php" method="post">');
<div class="row">
<div class="col-md-8">
<table class="form-table">
<tbody>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="x'.$key.'" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="myinput" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
....
</tbody>
</table>
</div>
<div class="col-md-4">
<div id="special">
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
</div>
</div>
// outputs the WP submit button html
//#submit_button();
Add a div element with "container" or "container-fluid" class after form element( <form action="options.php" method="post"> )
like :<form action="options.php" method="post"><div class="container">
...............
</div></form>
OR
like :<form action="options.php" method="post"><div class="container-fluid">
...............
</div></form>
I have a data table in my AngularJS application which has many columns where the responsiveness doesn't work anymore. I am currently scrolling the whole way through the data table, which doesn't look good.
I am trying to find a way to freeze some columns on the right side of the data table so that the scroll will be only for the columns on the left. The data tables contain buttons on the right side, so if the buttons are frozen it would be more helpful.
HTML:
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<div class="col-md-12">
<div class="widget widget-table action-table" style="overflow:auto">
<!-- /widget-header -->
<div class="widget-content table-container" ng-controller="getTalentController">
<table ng-table="talentsList" show-filter="true" class="table table-striped table-bordered" style="font-size: smaller;text-align:center">
<tr ng-repeat="talent in data">
<td data-title="'#'" style="width:5px">{{ $index+1 }}</td>
<td data-title="'Employee ID'" sortable="'employeeNo'" filter="{ 'employeeNo': 'text' }" style="width:50px">
{{talent.employeeNo}}
</td>
<td data-title="'Name'" sortable="'fullName'" filter="{ 'fullName': 'text' }">
{{talent.fullName}}
</td>
<td data-title="'From'" sortable="'inDate'" filter="{ 'inDate': 'text' }">
{{talent.inDate}}
</td>
<td data-title="'Till'" sortable="'outTill'" filter="{ 'outTill': 'text' }">
{{talent.outTill}}
</td>
<td data-title="'Account'" sortable="'account'" filter="{ 'account': 'text' }">
{{talent.account}}
</td>
<td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }" ng-class="{greenStyle : talent.state == 'Available', blueStyle : talent.state == 'Billed', redStyle: talent.state == 'Blocked'}">
<div style="border:solid">{{talent.state}}</div>
</td>
<td data-title="'Remarks'" ng-click="showRemarks[$index]=!showRemarks[$index]" style="width:70px">
<span ng-hide="showRemarks[$index]" class="ellipses" style="width:inherit">{{talent.remark}} </span>
<span ng-show="showRemarks[$index]"> {{talent.remark}} </span>
</td>
<td data-title="'Resume'">
<a ng-click="downloadResume(talent.id)" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="resume"><svg class="glyph translucent floppy-disk"><use xlink:href="#translucent-floppy-disk"></use></svg></a>
</td>
<td data-title="'Reserve'">
<a ui-sref="reservation.edit({id: talent.id})" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="save"><svg class='glyph stroked hand-cursor'><use xlink:href='#stroked-hand-cursor' /></svg></a>
</td>
</tr>
</table>
</div>
<!-- /widget-content -->
</div>
<!-- /widget -->
</div>
<!-- /span12 -->
</div>
<!-- /row -->
</div>
I would like to freeze the columns on the right side carrying title 'State','Remarks','Resume',and 'Reserve'.
How can I achieve this. I guess the controller code wont be required for this problem. Currently I am creating scroll bar for the table by applying style="overflow:auto" for the outer div.
CSS : https://hastebin.com/wibahuyoxa.cs
When I add a .group-addon to an element inside a bootstrap .table, all other elements are not given enough space, and the group-addon input takes up far too much room.
<h2>Only one bully, group-addon</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
<div class="input-group-addon">x</div>
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<h2>Two bullying group-addons</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<div class="input-group-addon">x</div>
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
<div class="input-group-addon">x</div>
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<h2>No Bullies</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<div class="alert alert-info">When there is no group-addon inside a table with class table, the spacing looks reasonable, but a single group-addon ruins it all</div>
http://jsfiddle.net/billymoon/ntm2q/
How should I use group-addons inside bootstrap tables without them taking too much space?
Try in your Less / CSS:
.input-group-addon {
width:auto;
}
The problem is in your bootstrap.min.css line 9 where you have this rules:
.input-group-addon, .input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
You should erase width: 1%; or just override with something like this:
.input-group-addon {
width:0;
}
DEMO
I have a big table and this is the last row of that table:
<tr>
<td>
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
Inside my last td there are two buttons inside forms (is this good way to do it?). What I want to do is to middle align both "Back" and "Delete" buttons so that they look nice. Now it looks like a zigzag (see picture). I've given id or class -tags to those buttons and tried to move them with bottom, left, display, float etc. commands with no results.
I can't make two td's (one td for one button) because there is so much space between td's.
What should I do?
[edit] Here is a jsFiddle to demonstrate. [/edit]
Forms are block-level elements, simply turn them into inline-block and they'll sit nicely side-by-side.
<table>
<tr>
<td>
<form action="index.jsp" method="get" style="display: inline-block;">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post" style="display: inline-block;">
<button type="submit" name="delete" class="deleteButton" value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
</table>
The styling would be better done as part of your stylesheet, but added here as style attributes for simplicity.
You could try something like this:
<tr>
<td style="line-height:30px;">
<div style="height:30px; float:left;">
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
</div>
<div style="height:30px; float:left;">
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</div>
<div style="clear:both;"></div>
</td>
</tr>
Let me know if it works (or not) :)
Simply align form tag with display:inline-block in last-child td
Clarification in fiddle : http://jsfiddle.net/HarishBoke/uHCyU/