html - Table row width is changing to do match an element which is not inside the table-row -
i have following html structure input icon on left side.
<div class="fieldset"> <p>normal input</p> <div> <span><i class="icon-cart"></i></span> <input name=""> </div> </div>
i using display:table
properties style structure desired layout demonstrated in following image:
however, icon (<span>
) stretching width according title (<p>
) above image below demonstrate:
here current css used:
/*fieldsets*/ .fieldset { width: 100%; display: table; position: relative; white-space: nowrap; margin-bottom: 15px; } .fieldset:last-of-type { margin-bottom: 0; } /*fieldsets > labels*/ .fieldset > p { width: 1%; margin-bottom: 3px; } /*fieldsets > input container*/ .fieldset > div { display: table-row; position: relative; } .fieldset > div > * { display: table-cell; white-space: nowrap; vertical-align: middle; position: relative; } /*fieldsets > input + icon*/ .fieldset > div > span { border: 1px solid #b0c2ce; padding: 5px 15px; font-weight: bold; width: 1%; } /*fieldsets > input + icon senarios*/ .fieldset > div > span:first-of-type { border-right: 0; border-radius: 4px 0 0 4px; } .fieldset > div > span:not(:only-of-type) + input { border-radius: 0; } .fieldset > div > input + span { border-left: 0; border-radius: 0 4px 4px 0; } .fieldset > div > span + input, .fieldset > div > span + textarea, .fieldset > div > span + select, .fieldset > div > span + .select-dropdown-single .select-dropdown-input, .fieldset > div > span + .select-dropdown-multi .select-input { border-radius: 0 4px 4px 0; } /*fieldsets > input + tooltip icon*/ .fieldset > div [class^="tooltip-"], .fieldset > div [class*=" tooltip-"] { text-align: center; width: 30px; }
how can stop icon width changing according <p>
above it? not contained within same div.
here how approach this. mark-up good, no changes required.
first, apply display: table
child div
, let p
element regular block or inline-block (depends on design).
you can set width of first table-cell element (span
) 1% , shrink-to-fit width need.
in original css, p
element being wrapped anonymous table-cell , table-row elements. net result width of first table-cell column being determined width of p
text, not width of icon.
/*fieldsets*/ .fieldset { width: 100%; margin-bottom: 15px; border: 1px dotted blue; } .fieldset:last-of-type { margin-bottom: 0; } /*fieldsets > labels*/ .fieldset > p { display: inline-block; margin-bottom: 3px; border: 1px dotted gray; } /*fieldsets > input container*/ .fieldset > div { display: table; } .fieldset > div > * { display: table-cell; white-space: nowrap; vertical-align: middle; position: relative; } /*fieldsets > input + icon*/ .fieldset > div > span { border: 1px solid #b0c2ce; padding: 5px 15px; font-weight: bold; width: 1%; } /*fieldsets > input + icon senarios*/ .fieldset > div > span:first-of-type { border-right: 0; border-radius: 4px 0 0 4px; } .fieldset > div > span + input { border-radius: 2px; width: auto; } .fieldset > div > input + span { border-left: 0; border-radius: 0 4px 4px 0; } .fieldset > div > span + input, .fieldset > div > span + textarea, .fieldset > div > span + select, .fieldset > div > span + .select-dropdown-single .select-dropdown-input, .fieldset > div > span + .select-dropdown-multi .select-input { border-radius: 0 4px 4px 0; } /*fieldsets > input + tooltip icon*/ .fieldset > div [class^="tooltip-"], .fieldset > div [class*=" tooltip-"] { text-align: center; width: 30px; }
<div class="fieldset"> <p>normal input</p> <div> <span><i class="icon-cart">icon</i></span> <input name=""> </div> </div>
Comments
Post a Comment