Prevent Twitter Bootstrap Empty <Dd> Filling with Next <Dd> Value

Prevent Twitter bootstrap empty dd filling with next dd value

I used this style override.

.dl-horizontal > dd:after {
  display: table;
  content: "";
  clear: both;
}

How to force Twitter Bootstrap .dl-horizontal DT content to wrap instead of truncate?

you can comment out white-space: nowrap; from .dl-horizontal dt block if you want to wrap content in all the dt

if you want to wrap content for a single dt then add inline style='white-space: normal;' to that specific dt

Use case of HTML Definition list, and issue with bootstrap

You can just use a non-breaking space if you don't have a definition instead of leaving it empty. That way all of the css rules will still be applied as expected.

        <dt>Description lists</dt>
        <dd> </dd>

Using box-sizing : border-box with Twitter Bootstrap 2.x, can we do it easily without breaking everything?

Yes.

Here's a mixin you can use in Bootstrap. It will automatically add all the vendor prefixes.

*, *:before, *:after {
    .box-sizing(border-box);
}

input {
    .box-sizing(content-box);
}

Inputs still need the content-box, otherwise they'll be too small.

Using box-sizing : border-box with Twitter Bootstrap 2.x, can we do it easily without breaking everything?

Yes.

Here's a mixin you can use in Bootstrap. It will automatically add all the vendor prefixes.

*, *:before, *:after {
    .box-sizing(border-box);
}

input {
    .box-sizing(content-box);
}

Inputs still need the content-box, otherwise they'll be too small.

How do you prevent bootstrap-datepicker from clearing existing value from input if no date is selected?

Can't tell for sure without more of an example but the problem is probably that the $this->swimmers->dob string you are giving to the input is not recognised as a date format by bootstrap-datepicker. You can define the date format it uses by adding the data-date-format attribute to your input.

For example if you were using a MySQL formatted date or PHP's DateTime object with $date->format('Y-m-d') you could use:

<div id="datepicker" class="input-group date">
    <input type="text" class="form-control" id="dob" name="dob" value="<?php echo $this->swimmers->dob;?>" data-date-format="yy-mm-dd"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

How to style dt and dd so they are on the same line?

dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0;
  padding: 0;
  margin: 0
}

<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

Bootstrap Datepicker With Daterange Not Saving Value as the Specified Format

I'm not sure what your problem is but by looking at your code I can only guess that you might be in the middle of a race condition.

You're setting the date_hidden variable in Datepicker.toDisplay and then reading from it in the changeDate custom event.

Put a debugger or a console log in both callbacks to make sure you're not in the middle of a race condition.

As for setting the formatted value in the input fields, well I can see in your HTML code that you have selectors that you can use, like the hidden field's ID for example.

Another thing I'd suggest is, instead of setting and reading the date_hidden field in those different callbacks, just call $('#elementID').datepicker('getDate') in the changeDate event handler and do all the transformations you need there, then extract that code and put it in a separate function.

How to make BootStrap-DatePicker Stop Submit Form

Thanks a Lot for all your reply.

First

Infact I am not comfortable in using ajax call within datepicker change event itself. Because the Form that I handle does not only have DatePicker it should have other Input fields also.
So I am ruling out that method

Second
Catching the previous send data is obviously another option
send_data = post_data;
Which works for me

Third

However I have found out the issue and a way to fix it without a workaround.

I made the following changes in the
Datepicker for Bootstrap v1.4.0 ( bootstrap-datepicker.js )

Under setValue Function call

I could see a statement

this.element.find('input').val(formatted).change();

This is triggered when the Datepicker Show the calendar view and hide the calendar view.

Hence it make call to web-platform.
Because I guess it is tracking the input change event of the Input Text Field. Over which the Date-picker sits. ( Not Sure though )

So I managed to change that to

this.element.find('input').val(formatted).change(function(e){e.preventDefault();});

In the Library, and I see that my issue got fixedc.

Thanks you very much. And I hope these help someone.

---

Related Topics