Jquery Mobile Set Width of 2 Elements to 80% and 20%

JQuery Mobile set width of 2 elements to 80% and 20%

You can override each grid column width.

<div  class="ui-block-a" style="width:80%"><input id="outgoingMsg" placeholder="Your Message . . ."></div>
<div  class="ui-block-b" style="width:20%" >
    <div  style="margin: 10px 0 0 0;">
        <a id="callDialog" href="#dialog" type="button" data-theme="b" data-rel="dialog"  data-transition="slidedown">Send</a>
    </div>
</div>

Changing height of jQuery Mobile select with jQuery?

You are missing the obvious.

Your original select is not longer visible. Also as you can see new one is just custom combination of <div>'s and <span>'s. New custom select box will not inherit css from the old one. New select box CSS structure needs to be changed in order for this to work.

Working example: http://jsfiddle.net/Gajotres/PMrDn/107/

HTML:

<div class="ui-grid-a">
    <div class="ui-block-a" style="width: 80%;">
        <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
        </div>

        <input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/>

    </div>
    <div class="ui-block-b" style="width: 20%; padding-left: 15px;"  id="grid-container">
        <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
        </div>

        <select name="select-choice-1" id="select-choice-1" data-theme="a">
            <option value="" style="padding: 0;">CAD</option>
            <option value="" style="padding: 0;"></option>
        </select>

    </div>
</div>

CSS:

#grid-container .ui-select div span {
    padding-bottom: 0.14em  !important;
}

Or if you want for select box text to be perfectly centered take a look at this example: http://jsfiddle.net/Gajotres/PMrDn/108/

CSS:

#grid-container .ui-select div span {
    padding-top: 0.2em  !important;
    padding-bottom: 0.2em  !important;
}

grid-container is just an id given to the grid container, so we can affect only this select box. If we change .ui-select it will affect every single select box.

Jquery Mobile- Footer elements, 100% width

Just enclose your form elements inside a grid to automatically stretch the inputs like so:

Supplied my own inline-widths to the inputs to stretch them the way i want. You can also create your own class and use that in conjunction with the .ui-block-* class.

<form method="post" action="send.php" class="ui-grid-a">
    <div style="width:80%;" class="ui-block-a"><input style="" data-mini="true" type="text" name="message" id="message" value="" data-theme="a"/></div>
    <div style="width:20%;" class="ui-block-b"><input type="submit" id="submit" value="Send Message" data-mini="true" data-theme="a"/></div>       
</form>

Demo: http://jsfiddle.net/tKcMg/1/

jQuery DataTables: control table width

The issue is caused because dataTable must calculate its width - but when used inside a tab, it's not visible, hence can't calculate the widths. The solution is to call 'fnAdjustColumnSizing' when the tab shows.

Preamble

This example shows how DataTables with scrolling can be used together
with jQuery UI tabs (or indeed any other method whereby the table is
in a hidden (display:none) element when it is initialised). The reason
this requires special consideration, is that when DataTables is
initialised and it is in a hidden element, the browser doesn't have
any measurements with which to give DataTables, and this will require
in the misalignment of columns when scrolling is enabled.

The method to get around this is to call the fnAdjustColumnSizing API
function. This function will calculate the column widths that are
needed based on the current data and then redraw the table - which is
exactly what is needed when the table becomes visible for the first
time. For this we use the 'show' method provided by jQuery UI tables.
We check to see if the DataTable has been created or not (note the
extra selector for 'div.dataTables_scrollBody', this is added when the
DataTable is initialised). If the table has been initialised, we
re-size it. An optimisation could be added to re-size only of the
first showing of the table.

Initialisation code

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

See this for more info.

dynamically change the size of text in button jquerymobile

You could read the document's width, or the button's, and then make the font-size of the button relative to that width, eg.:

var buttonWidth = $('#svbutton').width();
var fontSize = buttonWidth / 10;
$('#svbutton').css('font-size', fontSize + 'px');

JSFiddle
http://jsfiddle.net/VFube/1

Image re-size to 50% of original size in HTML

You did not do anything wrong here, it will any other thing that is overriding the image size.

You can check this working fiddle.

And in this fiddle I have alter the image size using %, and it is working.

Also try using this code:

<img src="image.jpg" style="width: 50%; height: 50%"/>​

Here is the example fiddle.

Height equal to dynamic width (CSS fluid layout)

Using jQuery you can achieve this by doing

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

Check working example at http://jsfiddle.net/n6DAu/1/

Set a button group's width to 100% and make buttons equal width?

BOOTSTRAP 2 (source)

The problem is that there is no width set on the buttons. Try this:

.btn {width:20%;}

EDIT:

By default the buttons take an auto width of its text length plus some padding, so I guess for your example it is probably more like 14.5% for 5 buttons (to compensate for the padding).

Note:

If you don't want to try and compensate for padding you can use box-sizing:border-box;

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

---

Related Topics