lundi 4 juillet 2016

How to wrap long word inside container using Twitter Bootstrap 3?

This is my html:

<div class="container-fluid">
    <div class="row post img-rounded">
        <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
</div>

The issue is, the end user selects what is inside the span. If the content inside the span is a very long word, then a horizontal scroll bar appears and the word extends outside of the div. Is there a non-hacky (possibly Twitter Bootstrap 3) way of basically wrapping the word so that it does not extend outside of the div, causing a horizontal scrollbar?

If not, what's the best way to solve the issue?

WooCommerce: Add to cart shortcode style

I implemented the add_to_cart shortcode of WooCommerce, but default style appears and I don't succeed to modify it.

Shortcode : [add_to_cart id="99"]

Default style defined by woocommerce

array(
  'id' => '99',
  'style' => 'border:4px solid #ccc; padding: 12px;',
  'sku' => 'FOO')

How can I modify this default styles?

(Modifying the main style.css doesn't work)

Screenshot of Shortcode [product id="99"] vs [add_to_cart id="99"

How does negative margin on first child affect the position of the next elements?

if I have this dom structure

<div style="overflow:hidden;">
    <div id="d1" style="margin-top:-50px; height:10px;"></div>
    <div id="d2" style="height:30px;"></div>
    <div id="d3" style="height:30px;"></div>
</div>

My question is how the elements d2 and d3 will be placed? just after the first element? even if d2 will be hidden, and d3 will be half-hidden (10px hidden). Or the two elements will be placed in the visible area of the parent?

My question here is about the exact CSS specifications.

Uploading multiple files with single html file tag in struts 1.x

I want to upload multiple files in struts 1.x . At my Jsp page it's only single html file tag.

I had old class which uses 'com.oreilly.servlet.MultipartRequest' .Here It uses request in its constructor and with single html file tag , it uploads multiple files successfully to server.

If I convert that class to struts1.x action class, I am not able to upload multiple files using form bean.

I tried through Java script,

In java script I can get all attached files as html file object. I tried creating other through that html file object. But how can i assign file to

HTML/CSS: Making two floating divs the same height

I have a little peculiar problem that I currently solve using a table, see below. Basically, I want to have two divs take up 100% of the available width, but only take up as much vertical space as needed (which isn't really that obvious from the picture). The two should at all times have the exact same height with a little line between them, as shown.

alt text

This is all very easy to do using table, which I'm currently doing. However, I'm not too keen on the solution, as semantically this is not actually a table.

CSS element size after translateZ

i've discovered something recently. I'm trying to achieve parallax with CSS acoording to this CODEpen https://codepen.io/keithclark/pen/JycFw

I've got something like:

<div class="parent">
    <div class="parallax">
    </div>
</div>

and CSS:

.parent {
    perspective:1px;
}
.parallax {
    transform: translateZ(.35px) scale(.65);
}

And everything works fine - parallax is working. But i found out that .parallax element is not the size of a real one, for example when i want to hover it the box of element is elswhere.

Change an input's HTML5 placeholder color with CSS

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

But the following CSS doesn't do diddly squat to the placeholder's value:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value will still remain grey instead of red.

Is there a way to change the color of the placeholder text?

I'm already using the jQuery placeholder plugin for the browsers that don't support the placeholder attribute natively.