html - How to style CSS for input box's width as a percentage when it has border and padding? -


If the container is 500 pix width wide, and the label is 30% wide, and the input box is 70% wide, then it is considered Everything should be fine, but the catch is that the border in the input box is left and right for 4px, left and right padding for 2px, it is composed of 6px wide.

We can hack it by making the width is not 70%, but 68% or something else, but it is somewhat hackneyed. Is there any way to handle it? (We can not reset the CSS, because the input box usually requires a border, assuming that we do not hack it using the outline, which is not in any place).

CSS: 

  # my-container {width: 500px} # First-name-label {display: inline-block; Width: 30%} # first-name {display: inline-block; The following are a few examples:  
     
  1.  Outwidth: 356 (for input box, as shown in Debug Console)   
      
  2.  External width 34 9  
  3.  External width 349  
  4.  Do not wrap, but the input box will move from the container width   
     
     
     This is the reason that the width is not accurate because they are set to the  box -Size: content-box; , which is the default setting for  box-size . When  width  and  height  are calculated in css, then the  range  and  padding  are calculated outside of that It is  width  and  height , even if it is  width: 100%; Is set to . To oppose this, you simply limit the  box-sizing: border-box; . It brings both the range and padding inside the calculation of width and height.  
      Try this:   
      # my-container {width: 500px; } #name-label {display: inline-block; Width: 30%; } # First-name {display: inline-block; Width: 70%; -WebKit-box-size: border-box; / * Safari, other webkit * / -moz-box-size: border-box; / * Firefox, Other Gecko * / Box Size: LimitBox; / * Opera / IE 8+ * /}   
      Or if you want to be more specific for text input, try it out:   
      input [type = text] {webkit-box-size: border-box; / * Safari, other webkit * / -moz-box-size: border-box; / * Firefox, Other Gecko * / Box Size: LimitBox; / * Opera / IE 8+ * /   
      CSS syntax:   
      box-size: content box | Border-box | Initial | the heir; Chrome (Any): Box Sizing Opera 8.5+: Box-Sizing Firefox (Any)   : -Moz-Box-Sizing Safari 3: -WebKit-Box-Sizing (5.1 IE8 +: Box-sizing   
     If you want to know more about this, you can find a very informative article on Box Sizing here:  < P>

Comments

Post a Comment

Popular posts from this blog

c - Mpirun hangs when mpi send and recieve is put in a loop -

I was trying to use the program to use mifrewan on 4 node clusters. Distributing node 0 data in nodes 1, 2 and 3. In the program, from '90 'to variable values ​​of' dior 'to be calculated. Therefore the node is distributing data and collecting results in an omitted fashion (for different values ​​of var 'dir') when do {*******} Whereas (dir Loop is given, Mippun is hanging, and no output is found. But when I comment on two {*******} (dir The loop output is obtained for the initial value of variable dir dir = -90 ), and that output is correct. The problem occurs when the loop is given. Can anyone help me in solving this problem. #include "mpi.h" int main (int argc, char * argv []) Float dir = -90; Int rank, nanoprakash; MPI_Status status; MPI_Init (& amp; argc, & argv); MPI_Comm_rank (MPI_COMM_WORLD, & amp; Rank); MPI_Comm_size (MPI_COMM_WORLD, & amp; numprocs); If (rank == 0) {/ / data to begin / / (dest = 1; dest ...
Read more

python - Apply coupon to a customer's subscription based on non-stripe related actions on the site -

I can not find anything in the source about using coupons after subscribing to a user's plan. Is it possible to use a coupon to credit a user's membership after initial subscription? If not, what is the best option? Specifically, I want to give a user 100% coupon for that month, when they take 5 [site specific actions]. This is possible, but may not be the best idea. Coupons are currently applied to the stripe, then apply again at the customer level and each client can have a single coupon. So if you are already offering discounts to the coupon, then the customer who is currently in the present will also give up. It also means that if you are using a recently-added multiple subscription capacity, then all of the user's subscription will be ready for the month. Coupons can be set to "Once", only once (as the only name) can be used by any customer, so if this credit can earn more than once, You will have to maintain a 100% discount coupon continuousl...
Read more

java - Unable to get JDBC connection in Spring application to MySQL -

मैंने स्प्रिंग में डीबी कॉन्फ़िगरेशन का पालन किया है: & lt; bean id = "dataSource" Class = "org.apache.commons.dbcp.BasicDataSource" नष्ट-विधि = "बंद" & gt; & Lt; प्रॉपर्टी नाम = "url" मान = "jdbc: dburl" / & gt; & Lt; संपत्ति नाम = "driverClassName" मान = "com.mysql.jdbc.Driver" / & gt; & Lt; संपत्ति नाम = "उपयोगकर्ता नाम" मान = "उपयोगकर्ता नाम" / & gt; & Lt; संपत्ति नाम = "पासवर्ड" मान = "पासवॉर्फ" / & gt; & Lt; प्रॉपर्टी नाम = "हटाए गए हटाए गए" मान = "सही" / & gt; & Lt; गुण नाम = "प्रारंभिक आकार" मान = "3" / & gt; & Lt; संपत्ति नाम = "अधिकतमअक्टिव" मान = "5" / & gt; & Lt; / सेम ​​& gt; डीबी से गुण मूल्यों को लोड करने के लिए अतिरिक्त कॉन्फ़िगरेशन। & lt; bean id = "config1" class = "org.apache.commons.configuration....
Read more