How can I let a table cell take in the full width of the table with css?

Question 1

Jim Peeters’s Question:

For some reason the cells in my second row in my table are changing the width of the cells in the row above. I have no idea why this is the cause. I don’t want the width of the first cell in the first row to be changed. I have reproduced the problem in jsfiddle to make it clear what I mean.

FiddleJS link:

https://jsfiddle.net/bpyrgsvc/1/

HTML:

<div class="table">
  <div class="row">
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
  </div>
  <div class="row">
    <div class="cell">this changes the width of the cell above</div>
  </div>
</div>

CSS:

.table {
  display:table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

Answer

Starx

I don’t see anything wrong with the results. In a div set to be displayed as table and table-row, it is behaving as tables.

To get the result you want, close the first table and start another.

<div class="table">
  <div class="row">
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
  </div>
</div>
<div class="table">
  <div class="row">
    <div class="cell cell-full">this changes the width of the cell above</div>
  </div>
</div>

https://jsfiddle.net/bpyrgsvc/4/

Question 2

Bodzilla’s Question:

bodzilla

I have an element in my html with this markup:

<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="width: 98px; display: block;">

I would like to know how to remove the width attribute using jQuery

Answer

Starx

You can set the width to be auto

$("selector").css('width', 'auto);

Question 3

Ua_boaz’s Question:

ua_boaz

I am using this tree grid directive github.com, and below css is taken directly from this library.

.tree-grid .level-2 .indented {
    position : relative;
    left     : 20px;
}

<td><a ng-click="user_clicks_branch(row.branch)"><i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon"></i></a><span class="indented tree-label tree-grid-row level-2>
             Citi Corporate and Investment Banking</span>
            </td>

The problem i am having is that span inside td is overflow and showing in the next column, for that purpose i need to add right:20px, but it is not working.

Is there any solution to this problem
plnkr.co

Answer

Starx

Just adding padding-right: 20px; gives what you are asking.

I selected the targeted span from CSS like

<!DOCTYPE html>
<html ng-app="abas-web">
  ...
  <body>
  ...
  <style>
    span.indented.tree-label {
      padding-right: 20px;
    }
  </style>
  </body>

</html>

Demo

Question 4

LastSecondsToLive’s Question:

LastSecondsToLive

I wanted to add the resize event to an element (I know you can’t add resize to a specific element, but it would be fine if the JS-function would be triggered on a resize of any kind – not the specific element).

I was thinking about this:

<div onresize="wrapperResize();"></div>

This somehow doesn’t work (Safari user here). This however works:

<div onclick="wrapperResize();"></div>

Currently wrapperResize() only holds a simple console.log(). What could I do about this?

PS: This works great (traditional checked), what do I even do different?

EXTRA: The div has a fixed height and 33% of the body element wide. Even though the event should fire, when the window is resized I thought this may be the cause.

Answer

aprok

I think you should set onresize handler on window and do it in javascript, not inline html.. Like so

window.onresize = yourFunction

Answer

Starx

You cannot attach a onresize event on a <div> container. It is only available for window for most of the browsers.

Question 5

Jesus Christ’s Question:

Jesus Christ

What is wrong with this piece of code:

jQuery('<iframe id="groundplan_popup" class="groundplan_hidden" />').appendTo("#popup_holder");
var iframe = jQuery("#groundplan_popup");
iframe.attr("src","::censored::" + filename);
var iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');
var exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));

So i have to dynamically create an iframe element which will open up .pdf file in a popup and that part works. What I can’t manage to do is create a div with an id of “groundplan_popup_exit” within that iframe. I don’t know exactly why this doesnt’ work and what exactly I’m doing wrong. When i inspect the iframe window console brings out this warning:

/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more
details.

Dont know if it has anything to do with the reason why this isn’t working.

EDIT:

This is what my code looks like now.

Console prtscr:

Iframe console elements prtscr:

So i’m basically confused about the whole situation as I’m not that experienced in using jquery in general and this is my first time using it with iframes. I’m not even sure if the #groundplan_popup_exit div is even created and how do I find it if it is.

Answer

Starx

I see some problems:

var iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');

Here you are already appending the element to the body.

var exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));

After you have appended above, you are trying to append again with jQuery("#groundplan_popup_exit") which does not even exists.

Fix (untested) would be something like this:

var iframe_body = iframe.contents().find('body');
var exit_btn_gp = iframe_body.append('<div id="groundplan_popup_exit"></div>');

Question 6

Michaelmcgurk’s Question:

michaelmcgurk

I have a very simple page on my site: http://jsfiddle.net/95sptas0/

Using only CSS, how do I add an icon between each .post div? I’d like one after each .post div except the last. I’m hoping to use this icon: http://fortawesome.github.io/Font-Awesome/icon/arrow-down/

.post {
    margin-bottom:50px;
    background:#eaeaea
}

<div class="post">
    <h1>This is a Post</h1>
</div>

<div class="post">
    <h1>This is a Post</h1>
</div>

<div class="post">
    <h1>This is a Post</h1>
</div>

Answer

user2959229

After including the “FontAwesome” font, the following CSS might do it:

.post::after { 
    content: "f063";
    font-family:'FontAwesome';
}

f063 is the code for the “down arrow” using the FontAwesome font.

In order for you to apply this to every element except your last, you can use the last-of-type selector:

.post:last-of-type::after { 
    display: none;
}

Answer

Starx

The font awesome icons requires to have an element with defined class. In you case this is <i class="fa fa-arrow-down"></i>. Since this is a new element you cannot use CSS to handle DOM manipulation.

If you can opt for text based unicode icons and font-based icons however, it will be possible through adjacent selector.

.post+.post::before {
    content: "↓";
}

Demo: http://jsfiddle.net/95sptas0/4/

Question 7

Joel Paxton’s Question:

Joel Paxton

I have a page which has a form/table.

I want to be able to click on a button at the end of a row, or the row itself and copy this data into another form on a separate html page, which can then be edited.

I know it probably has something to do with JQuery, however I have little to no experience with that.

If you require more details, I will happily provide.

EDIT:

Here is what it looks like now (it’s a table which has retrieved data from an xml file using SimpleXML):

<form name ="editEvent" method="post" action="editEvent.php">
    <table border="1">
        <tr bgcolor="#FFA500">
            <th>ID #</th>
            <th>Name</th>
            <th>Start Time</th>
            <th>End Time</th>
            <th>Category</th>
            <th>Description</th>
            <th>Location</th>
            <th>Picture Path</th>
            <th>Edit/Delete</th>
        </tr>   <tr>
          <td>1
          <td>Climbing</td>
          <td>09:00</td>
          <td>09:30</td>
          <td>Physical</td>
          <td>Description of what is going on</td>
          <td>where it is</td>
          <td>a photo link</td>
          <td><input type="submit" name="edit" class ="box" value="Edit/Delete"/></td>
      </tr> 
    </table>

I want it to end up in a table like this:

<tr>
        <td><input type="text" name="name" placeholder="Enter new event name..."/></td>
        <td><input type="text" name="time" placeholder="Enter event start time..."/></td>
        <td><input type="text" name="endtime" placeholder="Enter event end time..."/></td>
        <td><input type="text" name="category"/></td>
        <td><input type="text" name="description" placeholder="Enter a description of the event..."/></td>
        <td><input type="text" name="loc"/></td>
        <td><input type="text" name="picturePath" placeholder="Enter link to picture..."/></td>
        <td><input type="submit" name="create" class="box" value="Create"/></td>
    </tr>

Honestly, any help or even pointers in the right direction would be appreciated. I really don’t know what to do here. I’ve tried searching these forums and Google, but all I found is stuff on SQL and databases. I just want to transfer some HTML table row data on one page to a HTML form on another to be edited.

Answer

Starx

You need some methods of identification on the columns like class name. For eg: <td class="name">Climbing</td> then you can attach an event handler on the td of the row and fetch all the data and populate the form.

$("td").on('click', function() {
   var tr = $(this).parent('tr');
   var name = tr.find(".name").text();
   // Grab other values like this

   // and later populate the form
});

However, Instead of copying the data, an efficient solution would be to hold the primary key of the row in one of the td or on one of the data attributes and use it to fetch the record from the database and then fill up the form.

Question 8

Nubby’s Question:

Nubby

I have a textarea that isn’t very wide. I want as the user enters text for there to be line break once a line has 50 characters. I don’t want any wrapped text. Just line breaks. Is there a way to make this happen?

I tried to test something basic out on one line and failed.

$('#textarea').keypress(function (e) {
if ($(this).val().length == 50) {
    $(this).val()[51] == 'n'
}
})

I clearly am not very experienced. I don’t know if I should start looking into the regExp object.

I can’t allow wrapped text because I need to measure what each line of the textarea has. After the user has submitted the form, I need to be able to use something like this:

var line = $('#textarea').val().split('n');
for(i = 0; i < line.length; i++){
    // do something
}

Answer

beautifulcoder

Try

$('textarea').keypress(function () {
  var length = $(this).val().length;
  if (length % 51 == 0 &&
      length > 0) {
    var val = $(this).val();
    $(this).val(val + 'n');
  }
});

http://jsfiddle.net/2QZbG/

Answer

Starx

You have use % to see if the length and multiple of 50 and add n at the end. Demo

if ($(this).val().length % 50 == 0) {
    $(this).val($(this).val() + 'n);
}

Question 9

Coding Freak’s Question:

coding freak

I put http://jsfiddle.net/48Hpa/19/ same codes to HTML, but I get different results ……………………………………………………………………………………………………………………………………………….. why is that?

enter image description here

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <link type="text/css" rel="stylesheet" href="style.css" />
    <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>

    <script>

        $(document).ready(function () {

            $(function () {
                $("#slider1").slider({
                    range: "min",
                    value: 36,
                    min: 12,
                    max: 36,
                    slide: function (event, ui) {
                        $(".amount1").val(ui.value);
                        writesum();
                    }
                });
                $(".amount1").val($("#slider1").slider("value"));
            });

            $(function () {
                $("#slider2").slider({
                    range: "min",
                    value: 50000,
                    min: 1,
                    max: 50000,
                    slide: function (event, ui) {
                        $(".amount2").val(ui.value);
                        writesum();
                    }
                });
                $(".amount2").val($("#slider2").slider("value"));
            });


            function writesum() {
                var months = $('.amount1').val();
                var credits = $('.amount2').val();
                var payment = parseFloat(Number(credits) / Number(months))
                var rounded = payment.toFixed(2);
                $('.amount3').val(rounded);
            }

        });

    </script>

</head>
<body>
     <input type="text" class="amount1" />

        <div class="container">
            <div id="slider1"></div>
        </div>

        <input type="text" class="amount2" />

        <div class="container">
            <div id="slider2"></div>
        </div>

        <div class="sonuccontainer">
            <div class="bilgilendirme">aylık ödeme miktarınız</div>
            <input type="text" class="amount3" />
        </div>
</body>
</html>

Answer

Starx

JsFiddle use a CSS reset file to reset all browsers default styling. That might be the cause.

But the blue is coming from your style definition:

.ui-slider .ui-slider-handle { outline-color: transparent; background: blue; position: absolute; top: -8px; left: -8px; z-index: 2;  border-radius: 70px;  width: 30px; height:30px; cursor: pointer; }

If it is not showing on your page, means there is something wrong in your page or the styles are being overridden.

Looking at your html, the CSS of jQuery Ui is loaded after your local CSS, so the styles from it are overriding your styles.css Switch them and put styles.css at last.

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="style.css" />

Question 10

Reynier’s Question:

Reynier

I have this HTML:

<form action="" id="product_create" method="post">
    <ul>
        <li id="tab1" data-display="categories-picker"><a href="#">Seleccionar categoría</a></li>
        <li id="tab2" data-display="product-create-step-2"><a href="#">Datos</a></li>
        <li id="tab3" data-display="product-create-step-3" style="display: none"><a href="#">Variaciones</a></li>
        <li id="tab4" data-display="product-create-step-4"><a href="#">Detalles del Producto</a></li>
        <li id="tab5" data-display="product-create-step-5"><a href="#">Condiciones de Venta</a></li>
    </ul>

    <fieldset id="categories-picker">
        ....
    </fieldset>

    <fieldset id="product-create-step-2" style="display: none">
        ....
    </fieldset>

    <fieldset id="product-create-step-3" style="display: none">
        ....
    </fieldset>

    <fieldset id="product-create-step-4" style="display: none">
        ....
    </fieldset>

    <fieldset id="product-create-step-5" style="display: none">
        ....
    </fieldset>

    <button type="button" name="finish-wizard" id="finish-wizard" style="display:none">Finish</button>
</form>

<button type="button" name="previous" id="previous-step" disabled="disabled">« Previous</button>
<button type="button" name="next" id="next-step">Next »</button>

In order to toggle or hide previous/show next I need to get the ID of the previous/next fieldset element when I click on $(input[name="next"]) or $(input[name="previous"]) but I made this code:

var first = $('fieldset').eq(0).attr('id');
var step = 1;

$('#next-step').click(function() {
    if (step >= 1) {
        $("#previous-step").removeAttr("disabled");
    }

    var current = $('fieldset').eq(step).next('fieldset');
    var previous = $('fieldset').eq(step).prev('fieldset');
    current.show();
    previous.hide();
    step++;
});

$('#previous-step').click(function() {
    var current = $('fieldset').eq(step).next('fieldset');
    var previous = $('fieldset').eq(step).prev('fieldset');
    current.hide();
    previous.show();
    step--;
});

But it’s not working fine, can any give me a help?

Answer

Kevin B

This is probably simpler, duplicate the functionality with .prev() instead of .next() to get the code for the prev button.

$('fieldset.step').hide().eq(0).show();

$('#next-step').click(function() {

    var current = $('fieldset.step:visible'),
        next = current.next('fieldset.step');
    if (next.length === 0) {
        next = current.nextUntil('fieldset.step').next('fieldset.step');
    }
    current.hide();
    next.show();
    if (next.nextUntil('fieldset.step').next('fieldset.step').add(next.next('fieldset.step')).length === 0) {
        $("#next-step").prop("disabled",true);
    }
    $("#previous-step").prop("disabled",false);
});

$('#previous-step').click(function() {

    var current = $('fieldset.step:visible'),
        prev = current.prev('fieldset.step');
    if (prev.length === 0) {
        prev = current.prevUntil('fieldset.step').prev('fieldset.step');
    }
    current.hide();
    prev.show();
    if (prev.prevUntil('fieldset.step').prev('fieldset.step').add(prev.prev('fieldset.step')).length === 0) {
        $("#previous-step").prop("disabled",true);
    }
    $("#next-step").prop("disabled",false);
});

don’t forget to give the fieldsets that need to be cycled through a .step class. The id’s are no longer needed.

Fiddle

Answer

Starx

Since you are tracking the elements with their indexes, you can simply select the next and previous element using simple technique like

var previous = $('fieldset').eq(step-1); // To select previous

var next = $('fieldset').eq(step+1); // To select next

But I think you are trying to create this effect: http://jsfiddle.net/c48bs/

Tag: html

How can I let a table cell take in the full width of the table with css?

Jim Peeters’s Question:

Change width of child div element using JQuery

Bodzilla’s Question:

relative position and left and right property together not working, only left is working

Ua_boaz’s Question:

JS/HTML – onresize doesn't fire

LastSecondsToLive’s Question:

Appending div to iframe

Jesus Christ’s Question:

Add Icon between each Div

Michaelmcgurk’s Question:

Copy table row data to a form in html

Joel Paxton’s Question:

How can I automatically add line breaks in a textarea?

Nubby’s Question:

jsfiddle same codes display different results on html

Coding Freak’s Question:

Get the next/previous ID on button click

Reynier’s Question:

Please fill the form - I will response as fast as I can!